PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


สร้าง Flex Message ด้วย XML กับ LINE Messaging API ตอนที่ 10

08 April 2019 By Ninenik Narkdee
line bot sdk bot flex message

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ line bot sdk bot flex message





ต่อจากตอนที่แล้ว เราได้รู้จักกับ Flex Message ว่ามีองค์ประกอบ
อะไรบ้าง รวมถึงการสร้างข้อความ Flex Message ด้วย Line bot sdk
แยกตามแต่ละ Component ได้รู้จักกับแนวทางการสร้าง Flex Message
Layout สามารถทบทวนเนื้อหาได้ที่บทความ
    เริ่มต้นการใช้งาน Flex Message ผ่าน LINE Messaging API ตอนที่ 9 http://niik.in/899
    https://www.ninenik.com/content.php?arti_id=899 via @ninenik
 
ในตอนต่อไปนี้ เราจะมาเข้าสู่รายละเอียดทั้งหมดของการใช้งาน Flex Message
ผ่าน Line bot sdk และมาทำความรู้จักกับแนวทางการประยุกต์การสร้าง Flex Message 
ด้วยรูปแบบ XML 
 

Class ที่จำเป็นในการใช้งาน Flex Message 

    ให้เราเพิ่ม class เหล่านี้เข้าไปในไฟล์ bot.php และ bot_action.php
 
use LINE\LINEBot\Constant\Flex\ComponentIconSize;
use LINE\LINEBot\Constant\Flex\ComponentImageSize;
use LINE\LINEBot\Constant\Flex\ComponentImageAspectRatio;
use LINE\LINEBot\Constant\Flex\ComponentImageAspectMode;
use LINE\LINEBot\Constant\Flex\ComponentFontSize;
use LINE\LINEBot\Constant\Flex\ComponentFontWeight;
use LINE\LINEBot\Constant\Flex\ComponentMargin;
use LINE\LINEBot\Constant\Flex\ComponentSpacing;
use LINE\LINEBot\Constant\Flex\ComponentButtonStyle;
use LINE\LINEBot\Constant\Flex\ComponentButtonHeight;
use LINE\LINEBot\Constant\Flex\ComponentSpaceSize;
use LINE\LINEBot\Constant\Flex\ComponentGravity;
use LINE\LINEBot\MessageBuilder\FlexMessageBuilder;
use LINE\LINEBot\MessageBuilder\Flex\BubbleStylesBuilder;
use LINE\LINEBot\MessageBuilder\Flex\BlockStyleBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\BubbleContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\CarouselContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\BoxComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ButtonComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\IconComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ImageComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\SpacerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\FillerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\SeparatorComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\TextComponentBuilder;
 
ต่อไปให้เราสร้างไฟล์ชื่อ flex_gen.php ไฟล์นี้เป็นไฟล์ที่รวมฟังก์ชั่น ที่ผู้เขียนสร้างขึ้นมาประยุกต์
สำหรับแปลง Flex Message ในรูปแบบ XML โดยจะใช้คำสั่ง createFlex()
 
ไฟล์ flex_gen.php
<?php
///////////// ส่วนของการเรียกใช้งาน class ผ่าน namespace
use LINE\LINEBot;
use LINE\LINEBot\HTTPClient;
use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot\Event;
use LINE\LINEBot\Event\BaseEvent;
use LINE\LINEBot\Event\MessageEvent;
use LINE\LINEBot\Event\AccountLinkEvent;
use LINE\LINEBot\Event\MemberJoinEvent; 
use LINE\LINEBot\MessageBuilder;
use LINE\LINEBot\MessageBuilder\TextMessageBuilder;
use LINE\LINEBot\MessageBuilder\StickerMessageBuilder;
use LINE\LINEBot\MessageBuilder\ImageMessageBuilder;
use LINE\LINEBot\MessageBuilder\LocationMessageBuilder;
use LINE\LINEBot\MessageBuilder\AudioMessageBuilder;
use LINE\LINEBot\MessageBuilder\VideoMessageBuilder;
use LINE\LINEBot\ImagemapActionBuilder;
use LINE\LINEBot\ImagemapActionBuilder\AreaBuilder;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapMessageActionBuilder ;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapUriActionBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\BaseSizeBuilder;
use LINE\LINEBot\MessageBuilder\ImagemapMessageBuilder;
use LINE\LINEBot\MessageBuilder\MultiMessageBuilder;
use LINE\LINEBot\TemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\DatetimePickerTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\MessageTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\PostbackTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\UriTemplateActionBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ButtonTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselColumnTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ConfirmTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ImageCarouselTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ImageCarouselColumnTemplateBuilder;
use LINE\LINEBot\QuickReplyBuilder;
use LINE\LINEBot\QuickReplyBuilder\QuickReplyMessageBuilder;
use LINE\LINEBot\QuickReplyBuilder\ButtonBuilder\QuickReplyButtonBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraRollTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\LocationTemplateActionBuilder;
use LINE\LINEBot\RichMenuBuilder;
use LINE\LINEBot\RichMenuBuilder\RichMenuSizeBuilder;
use LINE\LINEBot\RichMenuBuilder\RichMenuAreaBuilder;
use LINE\LINEBot\RichMenuBuilder\RichMenuAreaBoundsBuilder;
use LINE\LINEBot\Constant\Flex\ComponentIconSize;
use LINE\LINEBot\Constant\Flex\ComponentImageSize;
use LINE\LINEBot\Constant\Flex\ComponentImageAspectRatio;
use LINE\LINEBot\Constant\Flex\ComponentImageAspectMode;
use LINE\LINEBot\Constant\Flex\ComponentFontSize;
use LINE\LINEBot\Constant\Flex\ComponentFontWeight;
use LINE\LINEBot\Constant\Flex\ComponentMargin;
use LINE\LINEBot\Constant\Flex\ComponentSpacing;
use LINE\LINEBot\Constant\Flex\ComponentButtonStyle;
use LINE\LINEBot\Constant\Flex\ComponentButtonHeight;
use LINE\LINEBot\Constant\Flex\ComponentSpaceSize;
use LINE\LINEBot\Constant\Flex\ComponentGravity;
use LINE\LINEBot\MessageBuilder\FlexMessageBuilder;
use LINE\LINEBot\MessageBuilder\Flex\BubbleStylesBuilder;
use LINE\LINEBot\MessageBuilder\Flex\BlockStyleBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\BubbleContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\CarouselContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\BoxComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ButtonComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\IconComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ImageComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\SpacerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\FillerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\SeparatorComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\TextComponentBuilder;


$is_carousel = NULL;
$is_bubble = NULL;
$is_singleBubble = NULL;
$count_container = 0;
$count_bubble = 0;
$name_container = NULL;

$bubble_direction = array();
$block_header = array();
$block_hero = array();
$block_body = array();
$block_footer = array();
$block_header_style = array();
$block_hero_style = array();
$block_body_style = array();
$block_footer_style = array();
$box_header = array();
$box_hero = array();
$box_body = array();
$box_footer = array();

function bubbleContainerAttr($xmlObj){
	$bubbleContainer = $xmlObj;
	$bubbleContainerAttr = NULL;
	foreach($bubbleContainer->attributes() as $key=>$val){
		if($key=="direction"){$bubbleContainerAttr[0]=implode("",(array)$val[0]);}
	}	
	return $bubbleContainerAttr;			
}
function blockStyleAttr($xmlObj){
	$blockStyle = $xmlObj;
	$blockStyleAttr = array(null,null,null);
	foreach($blockStyle->attributes() as $key=>$val){
		if($key=="backgroundColor"){$blockStyleAttr[0]=implode("",(array)$val[0]);}
		if($key=="separator"){$blockStyleAttr[1]=(boolean)implode("",(array)$val[0]);}
		if($key=="separatorColor"){$blockStyleAttr[2]=implode("",(array)$val[0]);}
	}	
	if(count($blockStyle->attributes())>0){
		return $blockStyleAttr;			
	}else{
		return NULL;	
	}
}
function textComponentArr($xmlObj){
	$textComponent = $xmlObj;
	$textComponentAttr = array(trim((string)$textComponent),null,null,null,null,null,null,null,null,null,null);
	foreach($textComponent->attributes() as $key=>$val){
		if($key=="flex"){$textComponentAttr[1]=(int)implode("",(array)$val[0]);}
		if($key=="margin"){$textComponentAttr[2]=implode("",(array)$val[0]);}
		if($key=="size"){$textComponentAttr[3]=implode("",(array)$val[0]);}
		if($key=="align"){$textComponentAttr[4]=implode("",(array)$val[0]);}
		if($key=="gravity"){$textComponentAttr[5]=implode("",(array)$val[0]);}
		if($key=="wrap"){$textComponentAttr[6]=(boolean)implode("",(array)$val[0]);}
		if($key=="maxLines"){$textComponentAttr[7]=(int)implode("",(array)$val[0]);}
		if($key=="weight"){$textComponentAttr[8]=implode("",(array)$val[0]);}		
		if($key=="color"){$textComponentAttr[9]=implode("",(array)$val[0]);}
		if($key=="action"){
			$textButton = "u";
			$strAction = str_replace(")","",implode("",(array)$val[0]));
			switch($strAction){
				case (preg_match('/^p\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new PostbackTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^m\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new MessageTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^u\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,$data);			
					break;
				case (preg_match('/^c\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/camera/");		
					break;
				case (preg_match('/^cs\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/single/");	
					break;
				case (preg_match('/^cm\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/multi/");				
					break;
				case (preg_match('/^l\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/location");				
					break;
				case (preg_match('/^d\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new DatetimePickerTemplateActionBuilder($textButton,$data,'datetime');
					break;																																			
				default:
					$actionVal = new PostbackTemplateActionBuilder($textButton,"");	

					break;					
			}					
			$textComponentAttr[10] = $actionVal;
		}
	}	
	return $textComponentAttr;
}
function boxComponentArr($xmlObj,$arrComponent = array()){
	$boxComponent = $xmlObj;
	$boxComponentAttr = array(null,$arrComponent,null,null,null,null);
	foreach($boxComponent->attributes() as $key=>$val){
		if($key=="layout"){$boxComponentAttr[0]=implode("",(array)$val[0]);}
		if($key=="flex"){$boxComponentAttr[2]=(int)implode("",(array)$val[0]);}
		if($key=="spacing"){$boxComponentAttr[3]=implode("",(array)$val[0]);}
		if($key=="margin"){$boxComponentAttr[4]=implode("",(array)$val[0]);}
		if($key=="action"){
			$textButton = "u";
			$strAction = str_replace(")","",implode("",(array)$val[0]));
			switch($strAction){
				case (preg_match('/^p\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new PostbackTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^m\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new MessageTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^u\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,$data);			
					break;
				case (preg_match('/^c\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/camera/");		
					break;
				case (preg_match('/^cs\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/single/");	
					break;
				case (preg_match('/^cm\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/multi/");				
					break;
				case (preg_match('/^l\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/location");				
					break;
				case (preg_match('/^d\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new DatetimePickerTemplateActionBuilder($textButton,$data,'datetime');
					break;																																			
				default:
					$actionVal = new PostbackTemplateActionBuilder($textButton,"");	
					break;					
			}		
			$boxComponentAttr[5] = $actionVal;
		}
	}	
	return $boxComponentAttr;
}
function buttonComponentArr($xmlObj){
	$buttonComponent = $xmlObj;
	$textButton = trim((string)$buttonComponent);
	$buttonComponentAttr = array(new PostbackTemplateActionBuilder($textButton,"nothing"),null,null,null,null,null,null);
	foreach($buttonComponent->attributes() as $key=>$val){
		if($key=="action"){
			$strAction = str_replace(")","",implode("",(array)$val[0]));
			switch($strAction){
				case (preg_match('/^p\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new PostbackTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^m\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new MessageTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^u\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,$data);			
					break;
				case (preg_match('/^c\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/camera/");		
					break;
				case (preg_match('/^cs\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/single/");	
					break;
				case (preg_match('/^cm\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/multi/");				
					break;
				case (preg_match('/^l\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/location");				
					break;
				case (preg_match('/^d\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new DatetimePickerTemplateActionBuilder($textButton,$data,'datetime');
					break;																																			
				default:
					$actionVal = new PostbackTemplateActionBuilder($textButton,"false");	
					break;					
			}
			$buttonComponentAttr[0] = $actionVal;
		}
		if($key=="flex"){$buttonComponentAttr[1]=(int)implode("",(array)$val[0]);}
		if($key=="margin"){$buttonComponentAttr[2]=implode("",(array)$val[0]);}
		if($key=="height"){$buttonComponentAttr[3]=implode("",(array)$val[0]);}
		if($key=="style"){$buttonComponentAttr[4]=implode("",(array)$val[0]);}
		if($key=="color"){$buttonComponentAttr[5]=implode("",(array)$val[0]);}
		if($key=="gravity"){$buttonComponentAttr[6]=implode("",(array)$val[0]);}
	}	
	return $buttonComponentAttr;
}
function iconComponentAttr($xmlObj){
	$iconComponent = $xmlObj;
	$iconComponentAttr = array(null,null,null,null);
	foreach($iconComponent->attributes() as $key=>$val){
		if($key=="url"){$iconComponentAttr[0]=implode("",(array)$val[0]);}
		if($key=="margin"){$iconComponentAttr[1]=implode("",(array)$val[0]);}
		if($key=="size"){$iconComponentAttr[2]=implode("",(array)$val[0]);}
		if($key=="aspectRatio"){$iconComponentAttr[3]=implode("",(array)$val[0]);}
	}	
	return $iconComponentAttr;		
}
function separatorComponentAttr($xmlObj){
	$separatorComponent = $xmlObj;
	$separatorComponentAttr = array();
	foreach($separatorComponent->attributes() as $key=>$val){
		if($key=="margin"){$separatorComponentAttr[0]=implode("",(array)$val[0]);}
		if($key=="color"){$separatorComponentAttr[1]=implode("",(array)$val[0]);}
	}	
	return $separatorComponentAttr;		
}
function fillerComponentAttr(){
		
}
function spacerComponentAttr($xmlObj){
	$spacerComponent = $xmlObj;
	$spacerComponentAttr = array("md");
	foreach($spacerComponent->attributes() as $key=>$val){
		if($key=="size"){$spacerComponentAttr[0]=implode("",(array)$val[0]);}
	}	
	return $spacerComponentAttr;	
}
function imageComponentArr($xmlObj){
	$imageComponent = $xmlObj;
	$imageComponentAttr = array(null,null,null,null,null,null,null,null,null);
	foreach($imageComponent->attributes() as $key=>$val){
		if($key=="url"){$imageComponentAttr[0]=implode("",(array)$val[0]);}
		if($key=="flex"){$imageComponentAttr[1]=(int)implode("",(array)$val[0]);}
		if($key=="margin"){$imageComponentAttr[2]=implode("",(array)$val[0]);}
		if($key=="align"){$imageComponentAttr[3]=implode("",(array)$val[0]);}
		if($key=="gravity"){$imageComponentAttr[4]=implode("",(array)$val[0]);}
		if($key=="size"){$imageComponentAttr[5]=implode("",(array)$val[0]);}
		if($key=="aspectRatio"){$imageComponentAttr[6]=implode("",(array)$val[0]);}
		if($key=="aspectMode"){$imageComponentAttr[7]=implode("",(array)$val[0]);}		
		if($key=="backgroundColor"){$imageComponentAttr[8]=implode("",(array)$val[0]);}
		if($key=="action"){
			$textButton = "u";
			$strAction = str_replace(")","",implode("",(array)$val[0]));
			switch($strAction){
				case (preg_match('/^p\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new PostbackTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^m\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new MessageTemplateActionBuilder($textButton,$data);				
					break;
				case (preg_match('/^u\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,$data);			
					break;
				case (preg_match('/^c\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/camera/");		
					break;
				case (preg_match('/^cs\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/single/");	
					break;
				case (preg_match('/^cm\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/cameraRoll/multi/");				
					break;
				case (preg_match('/^l\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new UriTemplateActionBuilder($textButton,"line://nv/location");				
					break;
				case (preg_match('/^d\(/',$strAction) ? true : false):
					list($ac,$data) = explode("(",$strAction);
					$actionVal = new DatetimePickerTemplateActionBuilder($textButton,$data,'datetime');
					break;																																			
				default:
					$actionVal = new PostbackTemplateActionBuilder($textButton,"");	
					break;					
			}
			$imageComponentAttr[9] = $actionVal;			
		}
	}	
	return $imageComponentAttr;
}
function listElement($xmlObj,$arr_Element = array()){
	$arr_final = array();
	foreach ($xmlObj->children() as $childObj) {		
		$elName = $childObj->getName();	
		if($elName=="box"){
			$arr_final[] = new BoxComponentBuilder(...boxComponentArr($childObj,listElement($childObj,$arr_Element)));
		}else{			
			if($elName=="text"){
				$arr_final[] = new TextComponentBuilder(...textComponentArr($childObj)); // textComponentArr
			}elseif($elName=="button"){				
				$arr_final[] = new ButtonComponentBuilder(...buttonComponentArr($childObj)); // 
			}elseif($elName=="icon"){				
				$arr_final[] = new IconComponentBuilder(...iconComponentAttr($childObj)); // 						
			}elseif($elName=="image"){				
				$arr_final[] = new ImageComponentBuilder(...imageComponentArr($childObj)); // 		
			}elseif($elName=="filler"){				
				$arr_final[] = new FillerComponentBuilder(); // 				
			}elseif($elName=="spacer"){				
				$arr_final[] = new SpacerComponentBuilder(...spacerComponentAttr($childObj)); // 
			}elseif($elName=="separator"){				
				$arr_final[] = new SeparatorComponentBuilder(...separatorComponentAttr($childObj)); // 										
			}else{
				$arr_final[] = array();
			}
		}
	}	
	return $arr_final;
}
function createFlex($xmlstr){
	//$objXML = new SimpleXMLElement($xmlstr);
	$xmlIterator = new SimpleXMLIterator($xmlstr);
	$xmlIterator->rewind();
	$name_container = $xmlIterator->getName();
	$count_container = $xmlIterator->count();
	
	if($name_container!="carousel"){
		$is_singleBubble = true; 
	}
	$arr_bubble = array();
	$hasBlockStyle = false;
	$i = 0;
	for( $xmlIterator; $xmlIterator->valid(); $xmlIterator->next() ) {
		$bubble_direction[$i] = NULL;
		$bubble_direction[$i] = bubbleContainerAttr($xmlIterator->current());
	
		$block_header[$i] = NULL;
		$block_hero[$i] = NULL;
		$block_body[$i] = NULL;
		$block_footer[$i] = NULL;
		$block_header_style[$i] = NULL;
		$block_hero_style[$i] = NULL;
		$block_body_style[$i] = NULL;
		$block_footer_style[$i] = NULL;
		foreach ($xmlIterator->current()->children() as $blockChild) {
			if($blockChild->getName()=="header"){
				$block_header[$i]=$blockChild;
				$block_header_style[$i] = (!is_null(blockStyleAttr($blockChild)))?new BlockStyleBuilder(...blockStyleAttr($blockChild)):NULL;	
				$box_header[$i] = listElement($blockChild->children());
			}
			if($blockChild->getName()=="hero"){
				$block_hero[$i]=$blockChild;
				$block_hero_style[$i] = (!is_null(blockStyleAttr($blockChild)))?new BlockStyleBuilder(...blockStyleAttr($blockChild)):NULL;	
				$box_hero[$i] = listElement($blockChild->children());
			}
			if($blockChild->getName()=="body"){
				$block_body[$i]=$blockChild;	
				$block_body_style[$i] = (!is_null(blockStyleAttr($blockChild)))?new BlockStyleBuilder(...blockStyleAttr($blockChild)):NULL;	
				$box_body[$i] = listElement($blockChild->children());
			}
			if($blockChild->getName()=="footer"){
				$block_footer[$i]=$blockChild;	
				$block_footer_style[$i] = (!is_null(blockStyleAttr($blockChild)))?new BlockStyleBuilder(...blockStyleAttr($blockChild)):NULL;	
				$box_footer[$i] = listElement($blockChild->children());
			}
	
		}
		$style_bubble[$i]=NULL;
		if(!is_null($block_header_style[$i]) || !is_null($block_hero_style[$i]) || !is_null($block_body_style[$i]) || !is_null($block_footer_style[$i])){
				$style_bubble[$i] = new BubbleStylesBuilder(
					$block_header_style[$i],
					$block_hero_style[$i],
					$block_body_style[$i],
					$block_footer_style[$i]
				);
		}
		$i++;
	
	}
	for($i=0;$i<$count_container;$i++){
		$containDirection = (!is_null($bubble_direction[$i]))?$bubble_direction[$i][0]:"ltr";
		$containHeader = (!is_null($block_header[$i]))?new BoxComponentBuilder(...boxComponentArr($block_header[$i]->children(),$box_header[$i])):NULL;
		$containHero = (!is_null($block_hero[$i]))?new ImageComponentBuilder(...imageComponentArr($block_hero[$i]->children(),$box_hero[$i])):NULL; 
		$containBody = (!is_null($block_body[$i]))?new BoxComponentBuilder(...boxComponentArr($block_body[$i]->children(),$box_body[$i])):NULL;
		$containFooter = (!is_null($block_footer[$i]))?new BoxComponentBuilder(...boxComponentArr($block_footer[$i]->children(),$box_footer[$i])):NULL;
		$arr_bubble[] = new BubbleContainerBuilder(
			$containDirection,$containHeader,$containHero,$containBody,$containFooter,$style_bubble[$i]		
		);
	}		
	$arr_FlexMessage = NULL;
	if(!is_null($is_singleBubble)){
		$arr_FlexMessage = $arr_bubble[0];
	}else{
		$arr_FlexMessage = new CarouselContainerBuilder(
			$arr_bubble
		);
	}
	$textReplyMessage = $arr_FlexMessage;
	return $textReplyMessage;
}
 
ส่วนต่อมา กลับมาที่ไฟล์ bot_action.php ให้เราเรียกใช้ไฟล์ฟังก์ชั่น flex_gen.php เข้ามาใน
ไฟล์ bot_action.php ด้วยคำสั่ง
 
// ไฟล์ฟังก์ชั่นสำหรับแปลง xml เป็น flex 
require_once("flex_gen.php");
และไฟล์ bot_action.php ให้เราเพิ่ม เงื่อนไข การโต้ตอบกับ Bot อย่างง่ายเข้าไป เช่นสมมติเรากำหนด
ว่า เมื่อผู้ใช้พิมพ์ fl ให้ตอบกลับเป็นข้อความ Flex Message จะได้ไฟล์ bot_action.php เป็นดังนี้
 
ไฟล์ bot_action.php
<?php
///////////// ส่วนของการเรียกใช้งาน class ผ่าน namespace
use LINE\LINEBot;
use LINE\LINEBot\HTTPClient;
use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot\Event;
use LINE\LINEBot\Event\BaseEvent;
use LINE\LINEBot\Event\MessageEvent;
use LINE\LINEBot\Event\AccountLinkEvent;
use LINE\LINEBot\Event\MemberJoinEvent; 
use LINE\LINEBot\MessageBuilder;
use LINE\LINEBot\MessageBuilder\TextMessageBuilder;
use LINE\LINEBot\MessageBuilder\StickerMessageBuilder;
use LINE\LINEBot\MessageBuilder\ImageMessageBuilder;
use LINE\LINEBot\MessageBuilder\LocationMessageBuilder;
use LINE\LINEBot\MessageBuilder\AudioMessageBuilder;
use LINE\LINEBot\MessageBuilder\VideoMessageBuilder;
use LINE\LINEBot\ImagemapActionBuilder;
use LINE\LINEBot\ImagemapActionBuilder\AreaBuilder;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapMessageActionBuilder ;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapUriActionBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\BaseSizeBuilder;
use LINE\LINEBot\MessageBuilder\ImagemapMessageBuilder;
use LINE\LINEBot\MessageBuilder\MultiMessageBuilder;
use LINE\LINEBot\TemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\DatetimePickerTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\MessageTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\PostbackTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\UriTemplateActionBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ButtonTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselColumnTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ConfirmTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ImageCarouselTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ImageCarouselColumnTemplateBuilder;
use LINE\LINEBot\QuickReplyBuilder;
use LINE\LINEBot\QuickReplyBuilder\QuickReplyMessageBuilder;
use LINE\LINEBot\QuickReplyBuilder\ButtonBuilder\QuickReplyButtonBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraRollTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\LocationTemplateActionBuilder;
use LINE\LINEBot\RichMenuBuilder;
use LINE\LINEBot\RichMenuBuilder\RichMenuSizeBuilder;
use LINE\LINEBot\RichMenuBuilder\RichMenuAreaBuilder;
use LINE\LINEBot\RichMenuBuilder\RichMenuAreaBoundsBuilder;
use LINE\LINEBot\Constant\Flex\ComponentIconSize;
use LINE\LINEBot\Constant\Flex\ComponentImageSize;
use LINE\LINEBot\Constant\Flex\ComponentImageAspectRatio;
use LINE\LINEBot\Constant\Flex\ComponentImageAspectMode;
use LINE\LINEBot\Constant\Flex\ComponentFontSize;
use LINE\LINEBot\Constant\Flex\ComponentFontWeight;
use LINE\LINEBot\Constant\Flex\ComponentMargin;
use LINE\LINEBot\Constant\Flex\ComponentSpacing;
use LINE\LINEBot\Constant\Flex\ComponentButtonStyle;
use LINE\LINEBot\Constant\Flex\ComponentButtonHeight;
use LINE\LINEBot\Constant\Flex\ComponentSpaceSize;
use LINE\LINEBot\Constant\Flex\ComponentGravity;
use LINE\LINEBot\MessageBuilder\FlexMessageBuilder;
use LINE\LINEBot\MessageBuilder\Flex\BubbleStylesBuilder;
use LINE\LINEBot\MessageBuilder\Flex\BlockStyleBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\BubbleContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\CarouselContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\BoxComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ButtonComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\IconComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ImageComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\SpacerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\FillerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\SeparatorComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\TextComponentBuilder;

// ไฟล์ฟังก์ชั่นสำหรับแปลง xml เป็น flex 
require_once("flex_gen.php");

// ส่วนของการทำงาน
if(!is_null($events)){

	// ถ้า bot ถูก invite เพื่อเข้า Join Event ให้ bot ส่งข้อความใน GROUP ว่าเข้าร่วม GROUP แล้ว
	if(!is_null($eventJoin)){
		$textReplyMessage = "ขอเข้าร่วมด้วยน่ะ $sourceType ID:: ".$sourceId;
		$replyData = new TextMessageBuilder($textReplyMessage);                 
	}
	
	// ถ้า bot ออกจาก สนทนา จะไม่สามารถส่งข้อความกลับได้ เนื่องจากไม่มี replyToken
	if(!is_null($eventLeave)){

	}	
	
	// ถ้า bot ถูกเพื่มเป้นเพื่อน หรือถูกติดตาม หรือ ยกเลิกการ บล็อก
	if(!is_null($eventFollow)){
        $textReplyMessage = "ขอบคุณที่เป็นเพื่อน และติดตามเรา";        
        $replyData = new TextMessageBuilder($textReplyMessage);     			
	}
	
	// ถ้า bot ถูกบล็อก หรือเลิกติดตาม จะไม่สามารถส่งข้อความกลับได้ เนื่องจากไม่มี replyToken
	if(!is_null($eventUnfollow)){

	}		
	
	// ถ้ามีสมาชิกคนอื่น เข้ามาร่วมใน room หรือ group 
	// room คือ สมมติเราคุยกับ คนหนึ่งอยู่ แล้วเชิญคนอื่นๆ เข้ามาสนทนาด้วย จะกลายเป็นห้องใหม่
	// group คือ กลุ่มที่เราสร้างไว้ มีชื่อกลุ่ม แล้วเราเชิญคนอื่นเข้ามาในกลุ่ม เพิ่มร่วมสนทนาด้วย
	if(!is_null($eventMemberJoined)){
			$arr_joinedMember = $eventObj->getEventBody();
			$joinedMember = $arr_joinedMember['joined']['members'][0];
			if(!is_null($groupId) || !is_null($roomId)){
				if($eventObj->isGroupEvent()){
					foreach($joinedMember as $k_user=>$v_user){
						if($k_user=="userId"){
							$joined_userId = $v_user;
						}
					}						
					$response = $bot->getGroupMemberProfile($groupId, $joined_userId);
				}
				if($eventObj->isRoomEvent()){
					foreach($joinedMember as $k_user=>$v_user){
						if($k_user=="userId"){
							$joined_userId = $v_user;
						}
					}					
					$response = $bot->getRoomMemberProfile($roomId, $joined_userId);    
				}
			}else{
				$response = $bot->getProfile($userId);
			}
			if ($response->isSucceeded()) {
				$userData = $response->getJSONDecodedBody(); // return array     
				// $userData['userId']
				// $userData['displayName']
				// $userData['pictureUrl']
				// $userData['statusMessage']
				$textReplyMessage = 'สวัสดีครับ คุณ '.$userData['displayName'];     
			}else{
				$textReplyMessage = 'สวัสดีครับ ยินดีต้อนรับ';
			}
//        $textReplyMessage = "ยินดีต้อนรับกลับมาอีกครั้ง ".json_encode($joinedMember);
        $replyData = new TextMessageBuilder($textReplyMessage);     				
	}
	
	// ถ้ามีสมาชิกคนอื่น ออกจากก room หรือ group จะไม่สามารถส่งข้อความกลับได้ เนื่องจากไม่มี replyToken
	if(!is_null($eventMemberLeft)){
	
	}	

	// ถ้ามีกาาเชื่อมกับบัญชี LINE กับระบบสมาชิกของเว็บไซต์เรา
	if(!is_null($eventAccountLink)){
		// หลักๆ ส่วนนี้ใช้สำรหบัเพิ่มความภัยในการเชื่อมบัญตี LINE กับระบบสมาชิกของเว็บไซต์เรา 
        $textReplyMessage = "AccountLink ทำงาน ".$replyToken." Nonce: ".$eventObj->getNonce();
        $replyData = new TextMessageBuilder($textReplyMessage);   	  					
	}
			
    // ถ้าเป็น Postback Event
    if(!is_null($eventPostback)){
        $dataPostback = NULL;
        $paramPostback = NULL;
        // แปลงข้อมูลจาก Postback Data เป็น array
        parse_str($eventObj->getPostbackData(),$dataPostback);
        // ดึงค่า params กรณีมีค่า params
        $paramPostback = $eventObj->getPostbackParams();
		
		$moreResult = "";
		if(isset($dataPostback['action']) && $dataPostback['action']=="more_richmenu"){
			$respRichMenu = $bot->linkRichMenu($userId,$dataPostback['richmenuid']);
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}		
		if(isset($dataPostback['action']) && $dataPostback['action']=="back_richmenu"){
			$respRichMenu = $bot->unlinkRichMenu($userId);
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}				
		
		if(isset($dataPostback['action']) && $dataPostback['action']=="delete_richmenu"){
			$respRichMenu = $bot->deleteRichMenu($dataPostback['richMenuId']);
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}
		if(isset($dataPostback['action']) && $dataPostback['action']=="get_richmenu"){
			$respRichMenu = $bot->getRichMenu($dataPostback['richMenuId']);
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}
		if(isset($dataPostback['action']) && $dataPostback['action']=="s_default_richmenu"){
			$respRichMenu = $httpClient->post("https://api.line.me/v2/bot/user/all/richmenu/".$dataPostback['richMenuId'],array());
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}		
		if(isset($dataPostback['action']) && $dataPostback['action']=="c_default_richmenu"){
			$respRichMenu = $httpClient->delete("https://api.line.me/v2/bot/user/all/richmenu");
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}			
		if(isset($dataPostback['action']) && $dataPostback['action']=="g_default_richmenu"){
			$respRichMenu = $httpClient->get("https://api.line.me/v2/bot/user/all/richmenu");
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}			
		if(isset($dataPostback['action']) && $dataPostback['action']=="upload_richmenu"){
			$richMenuImg = str_replace('Rich Menu ','',$dataPostback['richMenuName']);
			if(!file_exists("rich-menu/rich-menu-0".$richMenuImg.".png")){
				$richMenuImg = substr(str_replace('Rich Menu ','',$dataPostback['richMenuName']),0,1);
			}
			$respRichMenu = $bot->uploadRichMenuImage($dataPostback['richMenuId'],"rich-menu/rich-menu-0".$richMenuImg.".png","image/png");
			$moreResult = $respRichMenu->getRawBody();
			$result = json_decode($respRichMenu->getRawBody(),TRUE);	
		}					
		
        // ทดสอบแสดงข้อความที่เกิดจาก Postaback Event
        $textReplyMessage = "ข้อความจาก Postback Event Data : DataPostback = ";        
        $textReplyMessage.= json_encode($dataPostback);
        $textReplyMessage.= " ParamPostback = ".json_encode($paramPostback);
		$textReplyMessage.= " RsponseMore = ".$moreResult;
        $replyData = new TextMessageBuilder($textReplyMessage);     
    }
    // ถ้าเป้น Message Event 
    if(!is_null($eventMessage)){
		
		// สร้างตัวแปรเก็ยค่าประเภทของ Message จากทั้งหมด 7 ประเภท
		$typeMessage = $eventObj->getMessageType();  
		//  text | image | sticker | location | audio | video | file  
		// เก็บค่า id ของข้อความ
		$idMessage = $eventObj->getMessageId();  		
		// ถ้าเป็นข้อความ
		if($typeMessage=='text'){
			$userMessage = $eventObj->getText(); // เก็บค่าข้อความที่ผู้ใช้พิมพ์
		}
		// ถ้าเป็น image
		if($typeMessage=='image'){

		}				
		// ถ้าเป็น audio

		if($typeMessage=='audio'){

		}		
		// ถ้าเป็น video
		if($typeMessage=='video'){

		}	
		// ถ้าเป็น file
		if($typeMessage=='file'){
			$FileName = $eventObj->getFileName();
			$FileSize = $eventObj->getFileSize();
		}				
		// ถ้าเป็น image หรือ audio หรือ video หรือ file และต้องการบันทึกไฟล์
		if(preg_match('/image|audio|video|file/',$typeMessage)){			
			$responseMedia = $bot->getMessageContent($idMessage);
			if ($responseMedia->isSucceeded()) {
				// คำสั่ง getRawBody() ในกรณีนี้ จะได้ข้อมูลส่งกลับมาเป็น binary 
				// เราสามารถเอาข้อมูลไปบันทึกเป็นไฟล์ได้
				$dataBinary = $responseMedia->getRawBody(); // return binary
				// ดึงข้อมูลประเภทของไฟล์ จาก header
				$fileType = $responseMedia->getHeader('Content-Type');    
				switch ($fileType){
					case (preg_match('/^application/',$fileType) ? true : false):
//						$fileNameSave = $FileName; // ถ้าต้องการบันทึกเป็นชื่อไฟล์เดิม
						$arr_ext = explode(".",$FileName);
						$ext = array_pop($arr_ext);
						$fileNameSave = time().".".$ext;       						
						break;					
					case (preg_match('/^image/',$fileType) ? true : false):
						list($typeFile,$ext) = explode("/",$fileType);
						$ext = ($ext=='jpeg' || $ext=='jpg')?"jpg":$ext;
						$fileNameSave = time().".".$ext;
						break;
					case (preg_match('/^audio/',$fileType) ? true : false):
						list($typeFile,$ext) = explode("/",$fileType);
						$fileNameSave = time().".".$ext;                        
						break;
					case (preg_match('/^video/',$fileType) ? true : false):
						list($typeFile,$ext) = explode("/",$fileType);
						$fileNameSave = time().".".$ext;                                
						break;                                                      
				}
				$botDataFolder = 'botdata/'; // โฟลเดอร์หลักที่จะบันทึกไฟล์
				$botDataUserFolder = $botDataFolder.$userId; // มีโฟลเดอร์ด้านในเป็น userId อีกขั้น
				if(!file_exists($botDataUserFolder)) { // ตรวจสอบถ้ายังไม่มีให้สร้างโฟลเดอร์ userId
					mkdir($botDataUserFolder, 0777, true);
				}   
				// กำหนด path ของไฟล์ที่จะบันทึก
				$fileFullSavePath = $botDataUserFolder.'/'.$fileNameSave;
//				file_put_contents($fileFullSavePath,$dataBinary); // เอา comment ออก ถ้าต้องการทำการบันทึกไฟล์
				$textReplyMessage = "บันทึกไฟล์เรียบร้อยแล้ว $fileNameSave";
				$replyData = new TextMessageBuilder($textReplyMessage);
//				$failMessage = json_encode($fileType);				
//				$failMessage = json_encode($responseMedia->getHeaders());
				$replyData = new TextMessageBuilder($failMessage);  					
			}else{
				$failMessage = json_encode($idMessage.' '.$responseMedia->getHTTPStatus() . ' ' . $responseMedia->getRawBody());
				$replyData = new TextMessageBuilder($failMessage);  		
			}
		}
		// ถ้าเป็น sticker
		if($typeMessage=='sticker'){
			$packageId = $eventObj->getPackageId();
			$stickerId = $eventObj->getStickerId();
		}
		// ถ้าเป็น location
		if($typeMessage=='location'){
			$locationTitle = $eventObj->getTitle();
			$locationAddress = $eventObj->getAddress();
			$locationLatitude = $eventObj->getLatitude();
			$locationLongitude = $eventObj->getLongitude();
		}       
		
		
        switch ($typeMessage){ // กำหนดเงื่อนไขการทำงานจาก ประเภทของ message
            case 'text':  // ถ้าเป็นข้อความ
                $userMessage = strtolower($userMessage); // แปลงเป็นตัวเล็ก สำหรับทดสอบ
                switch ($userMessage) {
						case "fl": // ส่วนทดสอบโต้ตอบข้อควมม flex
							$textReplyMessage = new BubbleContainerBuilder(
								"ltr",NULL,NULL,
								new BoxComponentBuilder(
									"vertical",
									array(
										new TextComponentBuilder("hello"),
										new TextComponentBuilder("world")
									)
								)
							);
							$replyData = new FlexMessageBuilder("This is a Flex Message",$textReplyMessage);		   													  	
							break;
						case (preg_match('/^cr-/',$userMessage) ? true : false):
							$paramRichMenu = explode(">",$userMessage);
							if(!isset($paramRichMenu) || !is_array($paramRichMenu) || count($paramRichMenu)<3){
								exit;
							}
							$patternSet = $paramRichMenu[0];
							$numberID = $paramRichMenu[1];
							$actionSet = $paramRichMenu[2];
							$actionArr_prepare = array();
							if(isset($actionSet)){
								$actionArr_prepare = explode(")",$actionSet);
								array_pop($actionArr_prepare);
							}
							$imgTypePattern = str_replace("cr-","",$patternSet);
							$areaBound_arr = array(
								"a"=>array(0,0,833,843),
								"b"=>array(833,0,833,843),

								"c"=>array(1666,0,834,843),
								"d"=>array(0,843,833,843),
								"e"=>array(833,843,833,843),
								"f"=>array(1666,843,834,843),
								"g"=>array(0,0,1250,843),
								"h"=>array(1250,0,1250,843),
								"i"=>array(0,843,1250,843),
								"j"=>array(1250,843,1250,843),
								"k"=>array(0,0,2500,843),
								"l"=>array(0,0,1666,1686),
								"m"=>array(0,843,2500,843),
								"n"=>array(0,0,1250,1686),
								"o"=>array(1250,0,1250,1686),
								"p"=>array(0,0,2500,1686)
							);
							$imgTypePatternArea_arr = array(
								"1"=>array("a","b","c","d","e","f"),
								"2"=>array("g","h","i","j"),
								"3"=>array("k","d","e","f"),
								"4"=>array("l","c","f"),
								"5"=>array("k","m"),
								"6"=>array("n","o"),
								"7"=>array("p")
							);
							
							function makeFRM($imgType){
								global $areaBound_arr,$imgTypePatternArea_arr,$actionSet,$actionArr_prepare;
								$dataArr = array();
								$Area_arr = $imgTypePatternArea_arr[$imgType];
								for($i=1;$i<=count($imgTypePatternArea_arr[$imgType]);$i++){									
									if(preg_match('/^p\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new PostbackTemplateActionBuilder('p',$data);
									}elseif(preg_match('/^m\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new MessageTemplateActionBuilder('m',$data);									
									}elseif(preg_match('/^u\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new UriTemplateActionBuilder('u',$data);	
									}elseif(preg_match('/^c\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new UriTemplateActionBuilder('u',"line://nv/camera/");		
									}elseif(preg_match('/^cs\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new UriTemplateActionBuilder('u',"line://nv/cameraRoll/single/");	
									}elseif(preg_match('/^cm\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new UriTemplateActionBuilder('u',"line://nv/cameraRoll/multi/");														
									}elseif(preg_match('/^l\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new UriTemplateActionBuilder('u',"line://nv/location");																											
									}elseif(preg_match('/^d\(/',$actionArr_prepare[$i-1])){
										list($ac,$data) = explode("(",$actionArr_prepare[$i-1]);
										$actionVal = new DatetimePickerTemplateActionBuilder('d',$data,'datetime');
									}elseif(preg_match('/^n\(/',$actionArr_prepare[$i-1])){
										$actionVal = NULL;
										continue;
									}else{
										$actionVal = NULL;
										continue;
									}
									$patternLetter = $Area_arr[$i-1];
									array_push($dataArr,
											new RichMenuAreaBuilder(
												new RichMenuAreaBoundsBuilder(...$areaBound_arr[$patternLetter]),$actionVal
											)					
									);
								}
								return $dataArr;						
							}
//							$arrayRichMenu = makeFRM();
							// $sizeBuilder, $selected, $name, $chatBarText, $areaBuilders // 1686, 843.  // 2500
							// ($x, $y, $width, $height)
							$_idRichMenu = $imgTypePattern."-".$numberID;
							$respRichMenu = $bot->createRichMenu(
								new RichMenuBuilder(
									new RichMenuSizeBuilder(1686,2500),true,"Rich Menu $_idRichMenu",
									"เมนู",
									makeFRM($imgTypePattern)
								)
							);
							// ทำอื่นๆ 
							$textReplyMessage = " การสร้าง Rich Menu ".$respRichMenu->getRawBody()." Res = ".json_encode($dataArr);
							$replyData = new TextMessageBuilder($textReplyMessage);         							
							break;								
						case "gr-":
							$respRichMenu = $httpClient->get("https://api.line.me/v2/bot/user/all/richmenu");
							$result = json_decode($respRichMenu->getRawBody(),TRUE);		
							$defaultRichMenu = (isset($result['richMenuId']))?$result['richMenuId']:NULL;
	
							$respRichMenu = $bot->getRichMenuList();
							$result = json_decode($respRichMenu->getRawBody(),TRUE);									
							// สร้างตัวแปร สำหรับเก็บ rich menu แต่ละรายการไว้ในแต่ละคอลัมน์
							$columnTemplate = array();
							foreach($result['richmenus'] as $itemRichMenu){
								$_txtShow = ($itemRichMenu['richMenuId']==$defaultRichMenu)?"ยกเลิก":"กำหนดเป็น";
								$_action = ($itemRichMenu['richMenuId']==$defaultRichMenu)?"c_default_richmenu":"s_default_richmenu";
								$imgRichLayout = substr(str_replace('Rich Menu ','',$itemRichMenu['name']),0,1);
								array_push($columnTemplate,	
									new CarouselColumnTemplateBuilder(
											$itemRichMenu['name'], // ชื่อ rich menu
											'เลือกการจัดการ',
											'https://www.example.com/linebot/rich-menu/rich-menu-pattern-0'.$imgRichLayout.'.png', // ไม่แสดงรูป มีมี url รูป
											array(										
												new PostbackTemplateActionBuilder(
													$_txtShow.' Default', // ข้อความแสดงในปุ่ม
													http_build_query(array(
														'action'=>$_action,			
														'richMenuName'=>$itemRichMenu['name'],					 
														'richMenuId'=>$itemRichMenu['richMenuId']
													)), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
													'กำหนด Default Rich Menu'  // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
												),      	
												new PostbackTemplateActionBuilder(
													'แสดงที่ Default', // ข้อความแสดงในปุ่ม
													http_build_query(array(
														'action'=>'g_default_richmenu',		
														'richMenuName'=>$itemRichMenu['name'],			 
														'richMenuId'=>$itemRichMenu['richMenuId']
													)), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
													'แสดง Default Rich Menu'  // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
												),     																						
												new PostbackTemplateActionBuilder(
													'อัพโหลดรูป Rich Menu นี้', // ข้อความแสดงในปุ่ม
													http_build_query(array(
														'action'=>'upload_richmenu',			
														'richMenuName'=>$itemRichMenu['name'],					 
														'richMenuId'=>$itemRichMenu['richMenuId']
													)), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
													'อัพโหลดรูป Rich Menu'  // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
												) 						
											)		
									)	// end CarouselColumnTemplateBuilder			
								); // end array push function
							}	// end foreach						
							
							// ใช้ Carousel Template วนลูปแสดงรายการ rich menu ที่ได้สร้างไว้
							$replyData = new TemplateMessageBuilder('Carousel',
								new CarouselTemplateBuilder(
									$columnTemplate
								)
							);											
							break;  	
						case "gr2-":
							$respRichMenu = $bot->getRichMenuList();
							$result = json_decode($respRichMenu->getRawBody(),TRUE);	
								
							// สร้างตัวแปร สำหรับเก็บ rich menu แต่ละรายการไว้ในแต่ละคอลัมน์
							$columnTemplate = array();
							foreach($result['richmenus'] as $itemRichMenu){
								$imgRichLayout = substr(str_replace('Rich Menu ','',$itemRichMenu['name']),0,1);								
								array_push($columnTemplate,	
									new CarouselColumnTemplateBuilder(
											$itemRichMenu['name'], // ชื่อ rich menu
											'เลือกการจัดการ',
											'https://www.example.com/linebot/rich-menu/rich-menu-pattern-0'.$imgRichLayout.'.png', // ไม่แสดงรูป มีมี url รูป
											array(
												new PostbackTemplateActionBuilder(
													'รายละเอียด Rich Menu', // ข้อความแสดงในปุ่ม
													http_build_query(array(
														'action'=>'get_richmenu',		
														'richMenuName'=>$itemRichMenu['name'],						 
														'richMenuId'=>$itemRichMenu['richMenuId']
													)), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
													'ข้อมูล Rich Menu'  // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
												),      																														
												new PostbackTemplateActionBuilder(
													'ลบ Rich Menu นี้', // ข้อความแสดงในปุ่ม
													http_build_query(array(
														'action'=>'delete_richmenu',			
														'richMenuName'=>$itemRichMenu['name'],					 
														'richMenuId'=>$itemRichMenu['richMenuId']
													)), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
													'ลบ Rich Menu'  // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
												),      		
												new PostbackTemplateActionBuilder(
													'อัพโหลดรูป Rich Menu นี้', // ข้อความแสดงในปุ่ม
													http_build_query(array(
														'action'=>'upload_richmenu',			
														'richMenuName'=>$itemRichMenu['name'],					 
														'richMenuId'=>$itemRichMenu['richMenuId']
													)), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
													'อัพโหลดรูป Rich Menu'  // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
												) 						
											)		
									)	// end CarouselColumnTemplateBuilder			
								); // end array push function
							}	// end foreach						
							
							// ใช้ Carousel Template วนลูปแสดงรายการ rich menu ที่ได้สร้างไว้
							$replyData = new TemplateMessageBuilder('Carousel',
								new CarouselTemplateBuilder(
									$columnTemplate
								)
							);											
							break;  															
						case "ot":
							// ทำอื่นๆ 
							break;
						case "l": // เงื่อนไขทดสอบถ้ามีใครพิมพ์ L ใน GROUP / ROOM แล้วให้ bot ออกจาก GROUP / ROOM
								$sourceId = $eventObj->getEventSourceId();
								if($eventObj->isGroupEvent()){
									$bot->leaveGroup($sourceId);
								}
								if($eventObj->isRoomEvent()){
									$bot->leaveRoom($sourceId);  
								}                                                                                         
							break;							
						case "qr":
							$postback = new PostbackTemplateActionBuilder(
                                'Postback', // ข้อความแสดงในปุ่ม
                                http_build_query(array(
                                    'action'=>'buy',
                                    'item'=>100
                                )), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
		                         'Buy'  // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
                            );
							$txtMsg = new MessageTemplateActionBuilder(

                                'ข้อความภาษาไทย',// ข้อความแสดงในปุ่ม
                                'thai' // ข้อความที่จะแสดงฝั่งผู้ใช้ เมื่อคลิกเลือก
                            );
							$datetimePicker = new DatetimePickerTemplateActionBuilder(
								'Datetime Picker', // ข้อความแสดงในปุ่ม
								http_build_query(array(
									'action'=>'reservation',
									'person'=>5
								)), // ข้อมูลที่จะส่งไปใน webhook ผ่าน postback event
								'datetime', // date | time | datetime รูปแบบข้อมูลที่จะส่ง ในที่นี้ใช้ datatime
								substr_replace(date("Y-m-d H:i"),'T',10,1), // วันที่ เวลา ค่าเริ่มต้นที่ถูกเลือก
								substr_replace(date("Y-m-d H:i",strtotime("+5 day")),'T',10,1), //วันที่ เวลา มากสุดที่เลือกได้
								substr_replace(date("Y-m-d H:i"),'T',10,1) //วันที่ เวลา น้อยสุดที่เลือกได้
							);
							
							$quickReply = new QuickReplyMessageBuilder(
								array(
									new QuickReplyButtonBuilder(new LocationTemplateActionBuilder('เลือกตำแหน่ง')),
									new QuickReplyButtonBuilder(new CameraTemplateActionBuilder('ถ่ายรูป')),
									new QuickReplyButtonBuilder(new CameraRollTemplateActionBuilder('เลือกรูปภาพ')),
									new QuickReplyButtonBuilder($postback),
									new QuickReplyButtonBuilder($datetimePicker),
									new QuickReplyButtonBuilder(
										$txtMsg,
										"https://www.ninenik.com/images/ninenik_page_logo.png"
									),
								)
							);
							$textReplyMessage = "ส่งพร้อม quick reply ";
							$replyData = new TextMessageBuilder($textReplyMessage,$quickReply);     						
							break;   												                       
                    default:
                        $textReplyMessage = " คุณไม่ได้พิมพ์ ค่า ตามที่กำหนด";
                        $replyData = new TextMessageBuilder($textReplyMessage);         
                        break;                                      
                }
                break;                                                  
            default:
				if(!is_null($replyData)){
					
				}else{
					// กรณีทดสอบเงื่อนไขอื่นๆ ผู้ใช้ไม่ได้ส่งเป็นข้อความ
					$textReplyMessage = 'สวัสดีครับ คุณ '.$typeMessage;         
					$replyData = new TextMessageBuilder($textReplyMessage);         
				}
                break;  
        }
    }
}
?>
 
ทดสอบ ถ้าไม่มีอะไรผิดพลาด ก็จะได้ผลลัพธ์ดังนี้
 
 


 


 
 
ส่วนของการสร้าง Flex Message ข้างต้น เราทำการสร้าง Bubble ที่มี
Text Component ข้อความว่า hello world
 
$textReplyMessage = new BubbleContainerBuilder(
	"ltr",NULL,NULL,
	new BoxComponentBuilder(
		"vertical",
		array(
			new TextComponentBuilder("hello"),
			new TextComponentBuilder("world")
		)
	)
);
$replyData = new FlexMessageBuilder("This is a Flex Message",$textReplyMessage);
 
สำหรับ คำว่า "This is a Flex Message" จะเป็นข้อความที่แสดงหรืออธิบายว่า Flex Message
ที่เราส่งไปนั้น เป็นเนื้อหาเกี่ยวกับอะไร ตามตัวอย่างรูปด้านบน หน้ารวมห้องสนทนา เราจะเห็นข้อความ
นี้แสดง ข้อความส่วนนี้ สามารถเปลี่ยนอะไรก็ได้ ที่เราต้องการสื่อถึงรายละเอียดของ Flex Message
 
 

สร้าง Flex Message จากรูปแบบ XML

    ต่อไปเรามาดูว่า ถ้าเราจะส่งข้อความ hello world ในรูปแบบตามตัวอย่างข้างต้น แต่เขียนในรูปแบบ
XML จะสามารถทำได้แบบไหน
 
        // Flex Message รูปแบบ XML
        $xmlstr = <<<XML
        <noncarousel>
            <bubble direction="ltr">
                <body>
                    <box layout="vertical">
                        <text>hello</text>
                        <text>world</text>
                    </box>
                </body>	
            </bubble>
        </noncarousel>	
XML;
							
        $textReplyMessage = createFlex($xmlstr);
        $replyData = new FlexMessageBuilder("Flex from XML",$textReplyMessage);

 
ในรูปแบบ XML เราสร้าง XML string แล้วไว้ในตัวแปร $xmlstr โดยใช้รูปแบบ Heredoc syntax
เป็นการกำหนดค่าตัวแปรรูปแบบหนึ่ง 
 
    $xmlstr = <<<XML
<!--รูปแบบ XML ที่ต้องการ-->
XML;
สังเกตุว่า ตัวปิดของการกำหนดแบบ Herodoc (XML;) จะต้องชิดขอบด้านซ้าย โดยไม่มีช่องว่ามากั้นเสมอ
ไม่เช่นจะไม่สามารถกำหนดค่าได้
    หลักการทำงาน เราส่งรูปแบบ XML เข้าไปในฟังก์ชั่น createFlex($xmlstr) เพื่อแปลงค่า
เป็น Flex Message ก่อนนำไปใช้งาน
 
 

Flex Message XML Elements

    องค์ประกอบของ Flex Message ในรูปแบบ XML ประกอบไปด้วย Elements ต่างๆ 
แบ่งออกได้เป็นแต่ละส่วนดังนี้
 

    ส่วนที่ใช้ในการกำหนด Container

  •     <noncarousel> รูปแบบการใช้งาน <noncarousel>...</noncarousel>
  •     <carousel> รูปแบบการใช้งาน <carousel>...</carousel>
  •     <bubble>  รูปแบบการใช้งาน <bubble>....</bubble>
 

    ส่วนที่ใช้ในการกำหนด Block

  •     <header> รูปแบบการใช้งาน <header>...</header>
  •     <hero> รูปแบบการใช้งาน <hero>...</hero>
  •     <body> รูปแบบการใช้งาน <body>...</body>
  •     <footer> รูปแบบการใช้งาน <footer>...</footer>
 

    ส่วนที่ใช้ในการกำหนด Component

  •     <box> รูปแบบการใช้งาน <box>...</box>
  •     <button> รูปแบบการใช้งาน <button>...</button>
  •     <filler> รูปแบบการใช้งาน <filler />
  •     <icon> รูปแบบการใช้งาน <icon />
  •     <image> รูปแบบการใช้งาน <image />
  •     <separator> รูปแบบการใช้งาน <separator />
  •     <spacer> รูปแบบการใช้งาน <spacer />
  •     <text> รูปแบบการใช้งาน <text>...</text>
 
จะใช้เป็นตัวพิมพ์เล็กทั้งหมด จะเห็นว่าจะเหมือนกันรูปแบบที่กำหนดใน JSON แต่มีเพิ่ม
มาคือ <noncarousel> สำหรับ ส่งข้อมูล Flex ที่เป็น Single Bubble

 

การกำหนด Property ให้กับ Flex Message Element

    ใน Element แต่ละตัว ก็จะมี property ตามรูปแบบ ที่ Line กำหนด โดยในการ XML
เราจะกำหนด property ไว้ในส่วนของ Attribute และบางตัวกำหนดไว้ใน Text Node
ของ Element นั้น
    สามารถดู property ต่าง ๆ เพิ่มเติมได้ที่
    https://developers.line.biz/en/reference/messaging-api/#flex-message
 
    Property จะเป็นแบบ case-sensitive คือยึดตามรูปแบบของ Line เช่น สีพื้นหลัง
ใช้เป็น "backgroundColor" จะไม่ใช้เป็น "backgroundcolor"
 
    ตัวอย่าง
<noncarousel>
	<bubble direction="ltr">
		<body backgroundColor="#CCCCCC">
			<box layout="vertical">
				<text>hello</text>
				<text>world</text>
			</box>
		</body>	
	</bubble>
</noncarousel>	
    Element บางตัวใช้ textNode เป็นค่า text property เช่น <text> และ <button>
    ตัวอย่าง
 
<text>hello world</text>
<button action="u(http://niik.in)">Go</button>
    Element บางตัว เช่น <filler> ไม่มี property ก็สามารถใช้เป็น <filler /> ได้เลย

 
 

Elements Property

    ต่อไปเราจะมาดู property ต่างๆ ไล่ไปแต่ละ element โดย property ใดที่จำเป็นต้องกำหนดเสมอ
เราจะใช้ * กำหนดไว้ด้านหน้า
 

Container Elements

    Carousel Container
<carousel>
	<bubble direction="ltr">

    </bubble>
	<bubble direction="ltr">

    </bubble>    
</carousel>
 
    Bubble Container
<noncarousel>
	<bubble direction="ltr">
    
    </bubble>
</noncarousel>
สำหรับ property ของ Container จะกำหนดใน Bubble Element มี property เดียวคือ
*direction 
    กำหนดค่า ltr หรือ rtl เป็นการกำหนดลักษณะการอ่านของข้อความ จากซ้ายไปขวาหรือขวาไปซ้าย 
ในไทยก็จะเป็นการอ่านจากซ้ายไปขวา เราก็ใช้ ltr เสมอแทนได้
 
 
 

Block Elements

<noncarousel>
	<bubble direction="ltr">
    	<header backgroundColor="#CCCCCC">
        
        </header>
        <hero>
        
		<hero>
        <body separator="true" separatorColor="#FF0000">
        
        </body>
    	<footer>
        
        </footer>
    </bubble>
</noncarousel>
สำหรับ Header, Hero, Body และ Footer Block จะมีด้วยกัน 3 property ได้แก่
 
backgroundColor 
    ค่าสีพื้นหลังใช้เป็นข้อความเลขฐาน 16 เช่น #CCCCCC
separator 
    กำหนดมีเส้นแบ่งด้านบนของ Block หรือไม่ ใช้ค่า "true" หรือ "false" ไม่มีผลกับ Block ตัวแรก
separatorColor 
    ค่าสีเส้นแบ่งเลขฐาน 16 เช่น #CCCCCC
 
 
 

Component Elements

    Box Element
<box layout="vertical" flex="2">

</box>
*layout 
    กำหนดค่าการจัดเรียงแนวนอน "horizontal" "vertical" หรือ "baseline" 
    เพิ่มเติม http://niik.in/899
flex
    กำหนดเป็นตัวเลข เป็นค่ากำหนดถึงสัดส่วนความกว้างหรือสูงของ element นั้นเทียบกับ parent box 
    เพิ่มเติม http://niik.in/899
spacing
    กำหนดระยะห่างระหว่าง element ด้านใน ค่า none, xs, sm, md, lg, xl, หรือ xxl 
    เพิ่มเติม http://niik.in/899
margin
    กำหนดระยะห่างของ element ใกล้เคียง none, xs, sm, md, lg, xl, หรือ xxl
    เพิ่มเติม http://niik.in/899
action
    กำหนดการทำงานให้กับ element นั้น ๆ เมื่อแตะหรือกดที่ element
    รูปแบบการใช้งาน จะอธิบายในหัวข้อถัดไป ตัวอย่าง action="u(http://niik.in)" หมายถึง
    ลิ้งค์ไปยัง url ที่กำหนด
 
 
    Button Element
<button style="primary" action="u(http://niik.in)">
More
</button>
 *action
    กำหนดการทำงานให้กับ element นั้น ๆ เมื่อแตะหรือกดที่ element
    รูปแบบการใช้งาน จะอธิบายในหัวข้อถัดไป ตัวอย่าง action="u(http://niik.in)" หมายถึง
    ลิ้งค์ไปยัง url ที่กำหนด
flex
    กำหนดเป็นตัวเลข เป็นค่ากำหนดถึงสัดส่วนความกว้างหรือสูงของ element นั้นเทียบกับ parent box 
    เพิ่มเติม http://niik.in/899
margin
    กำหนดระยะห่างของ element ใกล้เคียง none, xs, sm, md, lg, xl, หรือ xxl
    เพิ่มเติม http://niik.in/899
height
    กำหนดความสูงให้กับ button ค่า sm หรือ md ค่าเริ่มต้นคือ md
style
    กำหนดรูปแบบของ button ค่า
  •     link สำหรับรูปแบบลิ้งค์คล้ายใน HTML
  •     primary สำหรับปุ่มพื้นหลังสีเข้ม
  •     secondary สำหรับปุ่มพื้นหลังสีอ่อน
    ค่าเริ่มต้นเป็น link *(คำว่า ค่าเริ่มต้น หมายถึง ถ้าไม่ได้กำหนด จะใช้ค่าเริ่มต้น แทน)
color
    ค่าสีใช้เป็นข้อความเลขฐาน 16 เช่น #CCCCCC 
    จะเป็นค่าสีของข้อความถ้ากำหนด style เป็น link และจะเป็นสีพื้นหลัง
    ถ้ากำหนด style เป็น primary หรือ secondary
gravity
    การจัดตำแหน่งในแนวตั้งเทียบกับ parent box
    ค่า top , center หรือ bottom 
    เพิ่มเติม http://niik.in/899
 
 
    Filler Element
<filler />
ไม่ต้องกำหนด property แต่จำไว้ว่า filler มี flex เท่ากับ 1 เสมอ และ การกำหนด spacing 
ใน parent box ไม่มีผลกับ filler
 
 
    Icon Element
<icon url="https://www.ninenik.com/images/ninenik_page_logo.png" />
*url
    กำหนด url ของไฟล์รูปภาพที่ต้องการใช้เป็นไอคอน ต้องเรียกผ่าน https เท่านั้น
    รองรับไฟล์ JPEG และ PNG ขนาดสูงสุดไม่เกิน 240x240 
    ขนาดไฟล์สูงสุดไม่เกิน 1 MB
margin
    กำหนดระยะห่างของ element ใกล้เคียง none, xs, sm, md, lg, xl, หรือ xxl
    เพิ่มเติม http://niik.in/899
size
    กำหนดขนาดสูงสุดของ element นั้นๆ
    ใช้ค่า xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, หรือ 5xl ใหญ่ขึ้นตามลำดับ ค่าเริ่มต้นคือ md
aspectRatio
    อัตราส่วนความกว้างต่อความสูง {width}:{height} เข่น 4:3 หรือ 16:9 ค่าเริ่มต้นเป็น 1:1
    เพิ่มเติม http://niik.in/899
 
Icon Element จะมี flex property เท่ากับ 0 คือ มีความกว้างหรือความสูง เท่ากับขนาดของ Icon นั้นๆ
 
 
    Image Element
<image url="https://www.ninenik.com/images/ninenik_page_logo.png" />
*url
    กำหนด url ของไฟล์รูปภาพ ต้องเรียกผ่าน https เท่านั้น
    รองรับไฟล์ JPEG และ PNG ขนาดสูงสุดไม่เกิน 1024x1024 
    ขนาดไฟล์สูงสุดไม่เกิน 1 MB
flex
    กำหนดเป็นตัวเลข เป็นค่ากำหนดถึงสัดส่วนความกว้างหรือสูงของ element นั้นเทียบกับ parent box 
    เพิ่มเติม http://niik.in/899
margin
    กำหนดระยะห่างของ element ใกล้เคียง none, xs, sm, md, lg, xl, หรือ xxl
    เพิ่มเติม http://niik.in/899
align
    การจัดตำแหน่งในแนวนอนเทียบกับ parent box
    ค่า start , center หรือ end ค่าเริ่มต้น จะเป็น center
    เพิ่มเติม http://niik.in/899
gravity
    การจัดตำแหน่งในแนวตั้งเทียบกับ parent box
    ค่า top , center หรือ bottom ค่าเริ่มต้น จะเป็น top
    เพิ่มเติม http://niik.in/899
size
    กำหนดขนาดสูงสุดของ element นั้นๆ
    ใช้ค่า xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl, หรือ full  ขนาดจะใหญ่ขึ้นตามลำดับ 
    ค่าเริ่มต้นคือ md
aspectRatio
    อัตราส่วนความกว้างต่อความสูง {width}:{height} เข่น 4:3 หรือ 16:9 ค่าเริ่มต้นเป็น 1:1
    เพิ่มเติม http://niik.in/899
aspectMode
    การกำหนดลักษณะการแสดงของรูป ค่า fit และ cover ค่าเริ่มต้นคือ fit
    fit สำหรับให้แสดงให้เห็นรูปนั้นๆ ในพื้นที่ อาจจะมีช่องว่างพื้นหลังถ้ารูปนั้นมีขนาดไม่สันพันธ์กับพื้นที่
    cover สำหรับให้รูปคลุมเต็มพื้นที่ ลักษณะคล้ายกับเป็นรูปพื้นหลัง บางส่วนของรูปอาจหายไป
    ถ้าพื้นที่ไม่สัมพันธ์กับขนาดรูป
    เพิ่มเติม http://niik.in/899
backgroundColor
    สำหรับกำหนดสีพื้นหลัง กรณีรูปนั้นเป็นรูปโปร่งแสง
    ค่าสีพื้นหลังใช้เป็นข้อความเลขฐาน 16 เช่น #CCCCCC
action
    กำหนดการทำงานให้กับ element นั้น ๆ เมื่อแตะหรือกดที่ element
    รูปแบบการใช้งาน จะอธิบายในหัวข้อถัดไป ตัวอย่าง action="u(http://niik.in)" หมายถึง
    ลิ้งค์ไปยัง url ที่กำหนด
 
 
    Separator Element
<separator />
margin
    กำหนดระยะห่างของ element ใกล้เคียง none, xs, sm, md, lg, xl, หรือ xxl
    เพิ่มเติม http://niik.in/899
color
    กำหนดสีของเส้นคั่นหรือเส้นแบ่ง ค่าสีใช้เป็นข้อความเลขฐาน 16 เช่น #CCCCCC 

 
    Spacer Element
<spacer />
size
    ขนาดของช่องว่าง ระหว่าง element 
    ใช้ค่า xs, sm, md, lg, xl, หรือ xxl ขนาดจะใหญ่ขึ้นตามลำดับ 
    ค่าเริ่มต้นคือ md
 
การกำหนด spacing property ของ parent box จะไม่มีผลกับ Spacer Element

 
    Text Element
<text>Hello World</text>
flex
    กำหนดเป็นตัวเลข เป็นค่ากำหนดถึงสัดส่วนความกว้างหรือสูงของ element นั้นเทียบกับ parent box 
    เพิ่มเติม http://niik.in/899
margin
    กำหนดระยะห่างของ element ใกล้เคียง none, xs, sm, md, lg, xl, หรือ xxl
    เพิ่มเติม http://niik.in/899
size
    กำหนดขนาดของตัวอักษร
    ใช้ค่า xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, หรือ 5xl  ขนาดจะใหญ่ขึ้นตามลำดับ 
    ค่าเริ่มต้นคือ md
align
    การจัดตำแหน่งในแนวนอนเทียบกับ parent box
    ค่า start , center หรือ end ค่าเริ่มต้น จะเป็น center
    เพิ่มเติม http://niik.in/899
gravity
    การจัดตำแหน่งในแนวตั้งเทียบกับ parent box
    ค่า top , center หรือ bottom ค่าเริ่มต้น จะเป็น top
    เพิ่มเติม http://niik.in/899
wrap
    กำหนดให้ขึ้นบรรทัดใหม่อัตโนมัติ เพื่อให้ข้อความอยู่ในกรอบ หรือพื้นที่ 
    ใช้ ค่า true หรือ false ค่าเริ่มต้นเป็น false  กรณีใช้ค่าเป็น true เราสามารถกำหนด
    การขึ้นบรรทัดใหม่โดยใช้ \n แทรกในข้อความได้
maxLines
    กำหนดตัวเลข จำนวนบรรทัดของข้อความสูงสุด กรณีข้อความมีจำนวนมาก 
    ทำให้จำนวนบรรทัดเกินค่าที่กำหนด จะแสดงเป็น (...) ต่อท้าย 
    ถ้ากำหนดเป็น 0 จะหมายถึงให้แสดงข้อความทั้งหมด ค่าเริ่มต้นเท่ากับ 0
weight
    กำหนดความเข้มหรือความหนาของข้อความ โดยใช้ค่า regular หรือ bold 
    โดยถ้าระบุเป็น bold จะเป็นตัวหนา ค่าเริ่มต้นเป็น regular หรือตัวอักษรปกติ
color
    กำหนดสีของข้อความ ค่าสีใช้เป็นข้อความเลขฐาน 16 เช่น #CCCCCC 
action
    กำหนดการทำงานให้กับ element นั้น ๆ เมื่อแตะหรือกดที่ element
    รูปแบบการใช้งาน จะอธิบายในหัวข้อถัดไป ตัวอย่าง action="u(http://niik.in)" หมายถึง
    ลิ้งค์ไปยัง url ที่กำหนด
 
 
 

การกำหนด Action ให้กับ Element

    action เป็น property หนึ่งที่ให้ผู้ใช้สามารถโต้ตอบหรือปฏิสัมพันธ์กับ Flex Message โดย Element
ที่รองรับ action property ได้แก่ Box , Button , Image และ Text Element
 
<button style="primary" action="u(http://niik.in)">More</button>
    รูปแบบ action
    p(data) สำหรับกำหนด postback action
        action="p(a=1&b=2)"
 
    m(data) สำหรับกำหนด message action
        action="m(flex message)"
 
    u(data) สำหรับกำหนด uri action หรือ url 
        action="u(http://niik.in)"
 
    d(data) สำหรับกำหนด datetime picker action
        action="d(reservDate=1&room=1)"
 
    c() สำหรับกำหนด เพื่อถ่ายรูป
        action="c()"
 
    cs() สำหรับกำหนด ให้เลือกรูป 1 รูปจากคลังภาพ
        action="cs()"
 
    cm() สำหรับกำหนด ให้เลือกรูปได้หลายรูปจากคลังภาพ
        action="cm()"
 
    l() สำหรับกำหนด เลือกตำแหน่งในแผนที่ (*ตัว L พิมพ์เล็ก)
        action="l()"
 
 
ทั้งหมด เป็นแนวทางการประยุกต์ การสร้าง Flex Message ในรูปแบบ XML สามารถนำไปปรับแต่ง
เพิ่มเติมได้ตามต้องการ 


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: flex message bot line bot sdk




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ ล็อกอิน ด้วย Facebook




URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ