ตัวอย่างโปรแกรมให้ @kidsdev

บล็อกนี้เขียนเพื่อตอบคำถามของ @kidsdev ที่อยากเขียนโปรแกรมประมาณ Robolab ด้วย Flex (http://tinyurl.com/dy9of4) ขอตอบลงบล็อก เผื่อจะมีประโยชน์กับคนอื่นๆ ด้วยครับ

ขอยกตัวอย่างวิธีสร้างโปรแกรมต่อไปนี้ละกันครับ



เตรียมข้าวของ

files ผมใช้ FlashDevelop เป็น IDE นะครับ สร้างโปรเจคใหม่เป็น Flex 3 Project ใส่รูปภาพไว้สองรูป คือ 1sec.png กับ cond.png ไว้ในโฟลเดอร์ bin ตามรูปซ้ายมือครับ

นี่คือรูป 1sec.png และ cond.png ตามลำดับ

1sec.png cond.png

ออกแบบหน้าจอ

ก่อนอื่นเขียนโค้ดเพื่อสร้าง Panel 2 อัน อันนึงเป็น Toolbox ไว้แสดงเครื่องมือให้ผู้ใช้เลือก อีกอันเป็น Canvas เป็นพื้นที่ให้เอาของที่เลือกมาวางๆ ได้

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:HBox>
		<mx:Panel title="Toolbox">
			<mx:Button icon="@Embed('../bin/cond.png')"></mx:Button>
			<mx:Button icon="@Embed('../bin/1sec.png')"></mx:Button>
		</mx:Panel>
		<mx:Panel title="Canvas">
			<mx:Canvas id="canvas" width="600" height="400"></mx:Canvas>
		</mx:Panel>
	</mx:HBox>
</mx:Application>

ลองรันจะได้โปรแกรมตามภาพต่อไปนี้
app1

เขียนโปรแกรมจริงๆล่ะ

ทีนี้เราจะเขียนโปรแกรมให้เวลากดปุ่มใน Toolbox แล้วเพิ่มวัตถุชิ้นนั้นลงใน canvas

<mx:Script>
	<![CDATA[
	import mx.controls.Image;
	private var maxX:int = 0;
	private function addItem(type:String):void {
		// create a new item
		var item:Image = new Image();
		item.source = type + '.png';
		item.x = maxX;
		maxX += 32;
 
		// display it on a canvas
		canvas.addChild(item);
	}	
	]]>
</mx:Script>

ต้องไปแก้ <mx:Button ให้ event click=”addItem(‘cond’);” ด้วยนะครับ ลองรันและกดๆ ดูจะเห็นวัตถุปรากฏขึ้นใน canvas ได้และ แต่เรายัง Drag มันไปมาไม่ได้ เราต้องแก้โค้ดข้างบนอีกนิดหน่อย ให้มี Event Listener เวลา Mouse Down, Mouse Up ครับ

ทำให้ลากวัตถุไปมาได้

import flash.events.MouseEvent;
private function onMouseDown(e:MouseEvent):void {
	var item:Image = e.currentTarget as Image;
	if(e.buttonDown)
		item.startDrag();
}
private function onMouseUp(e:MouseEvent):void {
	var item:Image = e.currentTarget as Image;
	item.stopDrag();
}

ทำให้ของมัน Drag Drop ใน Actionscript นี่สะดวกมากครับ แค่เรียก startDrag() กับ stopDrag() ก็เสร็จแล้ว โค้ดข้างบนเป็นแค่ตัว Listener ครับ เราต้องไปเพิ่ม Event Listener ให้กับ item ทุกๆ อันด้วย

item.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
item.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

ตอนนี้โปรแกรมมีความสามารถคือ เพิ่ม item ได้ drag item ไปมาได้แล้ว
ขอสรุปโค้ด ณ ปัจจุบันก่อนละกันครับ

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
	<![CDATA[
	import mx.controls.Image;
	import flash.events.MouseEvent;
	private var maxX:int = 0;
	private function onMouseDown(e:MouseEvent):void {
		var item:Image = e.currentTarget as Image;
		if(e.buttonDown)
			item.startDrag();
	}
	private function onMouseUp(e:MouseEvent):void {
		var item:Image = e.currentTarget as Image;
		item.stopDrag();
	}
	private function addItem(type:String):void {
		// create a new item
		var item:Image = new Image();
		item.source = type + '.png';
		item.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
		item.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		item.x = maxX;
		maxX += 32;
 
		// display it on a canvas
		canvas.addChild(item);
	}	
	]]>
</mx:Script>
	<mx:HBox>
		<mx:Panel title="Toolbox">
			<mx:Button icon="@Embed('../bin/cond.png')" click="addItem('cond');"></mx:Button>
			<mx:Button icon="@Embed('../bin/1sec.png')" click="addItem('1sec');"></mx:Button>
		</mx:Panel>
		<mx:Panel title="Canvas">
			<mx:Canvas id="canvas" width="600" height="400"></mx:Canvas>
		</mx:Panel>
	</mx:HBox>
</mx:Application>

วิธีอ้างถึง item ที่เราเพิ่มๆ เข้าไปใน canvas

หลายคนคงสงสัยแล้วว่าเราจะอ้างถึง item ที่เราเพิ่มๆ เข้าไปได้ยังไง? มันมีฟังก์ชัน canvas.getChildren() ที่จะคืนค่ากลับมาเป็น Array ของวัตถุทั้งหมดที่เป็นลูกของมัน หรือถ้าเรียก canvas.getChildByName(‘ชื่อ item’) จะคืนค่าเป็นวัตถุ 1 อันแต่ต้องกำหนด Property name ให้มันด้วย (จะได้เอาไว้อ้างถึงได้)

ลากเส้น

ทีนี้ลากเส้นเชื่อมยังไง? ตัว canvas มันมี .graphics (คล้ายๆ ใน .net เลย)
ตัวอย่างการลากเส้นใน canvas จากตำแหน่ง (0, 0) ไป (100, 100) ด้วยเส้นขนาด 2px สีเทาเขียนเป็นโค้ดได้ดังนี้

canvas.graphics.clear();      // ล้างสิ่งที่เคยวาดทั้งหมดออก
canvas.graphics.lineStyle(2, 0x808080);
canvas.graphics.moveTo(0, 0);
canvas.graphics.lineTo(100, 100);

แจกโค้ด

ขอแจกโค้ดที่ยังเขียนไม่เสร็จ แต่มีรายละเอียดคร่าวๆ ในการใช้งาน flex (เริ่มขี้เกียจเขียนล่ะ ตอนนี้ตีสี่แล้ว) เพราะโปรแกรมของ @kidsdev รายละเอียดเยอะจริงๆ :D
Robolab Flex3 Clone (12.2kb)

ปล. ขออภัยถ้าบล็อกนี้ลวกมากมาย…. เห็น @kidsdev ต้องทำเสร็จภายในวันศุกร์นี้แล้ว เลยต้องรีบเขียนคร่าวๆ ครับ

Comments (1)

lightDecember 11th, 2009 at 5:33 pm

ขอบคุณมากค่ะ แต่สงสัยอ่ะ maxX เอาไปใช้ตรงไหนอ่ะ

[Reply]

Leave a comment

Your comment