數據綁定定義：
幻燈片 2
當數據源對象的數據發生變化時，目標對象的數據會自動更新，而不需要我們再編寫代碼去強制更新
綁定實際也是借助事件機制來完成的，當目標使用了數據綁定的時候，目標對象就會監聽數據源對象的某一固定事件。當數據源發生變化時，數據源會派發改變事件（ChangeEvent），通知目標對象更新數據。這個過程由Flex完成，不用我們手動干預。
綁定的前提條件：
源對象的數據和目標對象的數據格式相同。
方法：
1 在對象的屬性標簽中,使用{ }把數據源直接綁定到對象的某個屬性上。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HSlider x="47" y="170" width="283" id="fsize" minimum="10" maximum="50" />
<mx:Label x="47" y="34" text="Bingo" fontSize="{fsize.value}" width="306" height="91" id="msg" color="#F15906" fontWeight="bold"/>
</mx:Application>
2 在對象的屬性標簽中,使用{ }把某個函數的返回值作為數據源綁定到對象屬性上。函數的參數要使用[Bindable]綁定符號
[Bindable]，[Bindable(event=“eventname”)]Event表示當數據源發生變化時，數據源所在對象派發的事件類型，它是可選項，默認的事件名是“propertyChange”，一般情況下只需要使用[Bindable]標簽
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4 <mx:Script>
5 <![CDATA[
6
7 [Bindable]
8 private var n:int;
9
10 internal function square(num:int):int{
11 return num*num;
12 }
13 ]]>
14 </mx:Script>
15
16
17 <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
18 snapInterval="1" id="s_num" change="{n=s_num.value}"/>
19 <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(n)}"/>
20 <mx:Label x="66" y="53" text="結果" width="48" fontSize="12" fontWeight="bold"/>
21
22 </mx:Application>
23
仿Java Getters&Setters
package com.classes
{
[Bindable]
public class BindClass
{
public var n:int;
public function BindClass()
{
}
//[Bindable]
public function get N():int{
return n;
}
public function set N(x:int):void{
n=x;
}
}
}
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4 <mx:Script>
5 <![CDATA[
6
7 import com.classes.BindClass;
8 internal var bc:BindClass=new BindClass();
9
10
11 internal function square(num:int):int{
12 return num*num;
13 }
14 ]]>
15 </mx:Script>
16
17
18 <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
19 snapInterval="1" id="s_num" change="{bc.n=s_num.value}"/>
20 <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(bc.n)}"/>
21 <mx:Label x="66" y="53" text="結果" width="48" fontSize="12" fontWeight="bold"/>
22
23 </mx:Application>
24
3 使用標簽
<mx:Binding>
source=“…” destination=“…”
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()">
<mx:Model id="books">
<books>
<book>
<name>城市</name>
<author>張懸</author>
</book>
<book>
<name>魚</name>
<author>陳綺貞</author>
</book>
</books>
</mx:Model>
<mx:Binding source="books.book[0].name" destination="txt_name.text"/>
<mx:Binding source="books.book[0].author" destination="txt_author.text"/>
<mx:Panel x="44" y="24" width="379" height="178" layout="absolute" title="專輯信息" fontSize="12">
<mx:Label x="58" y="36" text="專輯" fontSize="12" fontWeight="bold"/>
<mx:Label x="58" y="71" text="作者" fontSize="12" fontWeight="bold"/>
<mx:TextInput x="111" y="36" id="txt_name" fontSize="12"/>
<mx:TextInput x="111" y="71" id="txt_author" fontSize="12"/>
</mx:Panel>
</mx:Application>
posted on 2010-03-06 14:48
Ying-er 閱讀(419)
評論(0) 編輯 收藏 所屬分類:
Flex3.0