ตัวอย่างโปรแกรมให้ @kidsdev
บล็อกนี้เขียนเพื่อตอบคำถามของ @kidsdev ที่อยากเขียนโปรแกรมประมาณ Robolab ด้วย Flex (http://tinyurl.com/dy9of4) ขอตอบลงบล็อก เผื่อจะมีประโยชน์กับคนอื่นๆ ด้วยครับ
ขอยกตัวอย่างวิธีสร้างโปรแกรมต่อไปนี้ละกันครับ
เตรียมข้าวของ
ผมใช้ FlashDevelop เป็น IDE นะครับ สร้างโปรเจคใหม่เป็น Flex 3 Project ใส่รูปภาพไว้สองรูป คือ 1sec.png กับ cond.png ไว้ในโฟลเดอร์ bin ตามรูปซ้ายมือครับ
นี่คือรูป 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>
ลองรันจะได้โปรแกรมตามภาพต่อไปนี้

เขียนโปรแกรมจริงๆล่ะ
ทีนี้เราจะเขียนโปรแกรมให้เวลากดปุ่มใน 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 รายละเอียดเยอะจริงๆ ![]()
Robolab Flex3 Clone (12.2kb)
ปล. ขออภัยถ้าบล็อกนี้ลวกมากมาย…. เห็น @kidsdev ต้องทำเสร็จภายในวันศุกร์นี้แล้ว เลยต้องรีบเขียนคร่าวๆ ครับ
ขอบคุณมากค่ะ แต่สงสัยอ่ะ maxX เอาไปใช้ตรงไหนอ่ะ
[Reply]