Flex4.6_使用AS3與MXML進行數據綁定溝通範例

Flex4.6_使用AS3與MXML進行數據綁定溝通範例

建立.as檔案名為 Task_03

package
{
public class Task_03
{
[Bindable]
public var name:String;
public function Task_03(name:String="")
{
this.name=name;
}
}
}

name 變數的Bindable確保該變數可以做為數據綁定的來源!!

建立MXML 檔案

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindalbe]
private var _task:Task_03=new Task_03("Learn Binding");
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="5" paddingTop="5"/>
</s:layout>
<s:TextInput id="textInput1" text="{_task.name}" focusOut="_task.name = textInput1.text;"/>
<s:TextInput id="textInput2" text="{_task.name}" focusOut="_task.name = textInput2.text;"/>
</s:Application>

我們建立一個Task 類型的變數_task ，這個類型是可綁定的，並將它的name 屬性初始化為Learn Binding。
將_task變數的name屬性綁定到textInput1和textInput2的text屬性上。

另一種雙向綁定寫法:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
private var task:Task_03=new Task_03("Don,t do this!");
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="5" paddingTop="5" />
</s:layout>
<s:TextInput id="textInput1" text="@{task.name}"/>
<s:TextInput id="textInput2" text="@{task.name}"/>
</s:Application>

顯示結果:

留言