Flex4.6_建立一個簡易留言板範例使用AS3與MXML溝通範例

• 首先建立一個新的Package 名為 com.pomodo.model
• 之後在底下建立 Task.as 作為 mxml的溝通管道

1. package com.pomodo.model
2. {
3. public class Task
4. {
5. [Bindable]
6. public var name:String;
8. public function Task(name:String=""){
9. this.name=name;
10. }
11. }
12. }

資料結構如下:

• 新增一個 mxml 名為 guestbook

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
3.   xmlns:s="library://ns.adobe.com/flex/spark" 
4.   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
5. <fx:Declarations>
6. <!-- Place non-visual elements (e.g., services, value objects) here -->
7. </fx:Declarations>
8. <fx:Script>
9. <![CDATA[
10. import com.pomodo.model.Task;
11. import mx.collections.ArrayCollection;
13. [Bindable]
14. private var tasks:ArrayCollection=new ArrayCollection();
16. private function createTask():void{
17. tasks.addItem(new Task(newTask.text));
18. }
20. private function deleteSelectedTask():void{
21. tasks.removeItemAt(taskList.selectedIndex);
22. }
25. ]]>
26. </fx:Script>
27. <s:Panel title="留言板" width="100%" height="100%">
28. <s:VGroup  width="100%" height="100%">
29. <s:HGroup width="100%" verticalAlign="middle">
30. <s:Label text="留言內容"/>
31. <s:TextInput id="newTask" width="100%" enter="createTask()"/>
32. <s:Button label="Create" click="createTask()"/>
33. </s:HGroup>
34. <s:List id="taskList" width="100%" height="100%" labelField="name" dataProvider="{tasks}"/>
35. <s:HGroup width="100%">
36. <s:Button label="Delete" width="100%" height="30" enabled="{taskList.selectedItem!=null}" click="deleteSelectedTask()"/>
37. </s:HGroup>
38. </s:VGroup>
39. </s:Panel>
40. </s:Application>

• VGroup 為垂直顯示，也就是說包在裡面的原件皆垂直排列
• HGroup 為水平顯示，也就是說包在裡面的原件皆水平排列
• dataProvider 將資料綁定到 ArrayCollection 的 task
• enabled 判斷是否有沒有選擇到 taskList 裡面的清單，如果有 Delete 才能被啟動按下。

顯示結果: