數(shù)據(jù)綁定定義：
幻燈片 2
當(dāng)數(shù)據(jù)源對(duì)象的數(shù)據(jù)發(fā)生變化時(shí)，目標(biāo)對(duì)象的數(shù)據(jù)會(huì)自動(dòng)更新，而不需要我們?cè)倬帉?xiě)代碼去強(qiáng)制更新
綁定實(shí)際也是借助事件機(jī)制來(lái)完成的，當(dāng)目標(biāo)使用了數(shù)據(jù)綁定的時(shí)候，目標(biāo)對(duì)象就會(huì)監(jiān)聽(tīng)數(shù)據(jù)源對(duì)象的某一固定事件。當(dāng)數(shù)據(jù)源發(fā)生變化時(shí)，數(shù)據(jù)源會(huì)派發(fā)改變事件（ChangeEvent），通知目標(biāo)對(duì)象更新數(shù)據(jù)。這個(gè)過(guò)程由Flex完成，不用我們手動(dòng)干預(yù)。
綁定的前提條件：
源對(duì)象的數(shù)據(jù)和目標(biāo)對(duì)象的數(shù)據(jù)格式相同。
方法：
1 在對(duì)象的屬性標(biāo)簽中,使用{ }把數(shù)據(jù)源直接綁定到對(duì)象的某個(gè)屬性上。
<?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 在對(duì)象的屬性標(biāo)簽中,使用{ }把某個(gè)函數(shù)的返回值作為數(shù)據(jù)源綁定到對(duì)象屬性上。函數(shù)的參數(shù)要使用[Bindable]綁定符號(hào)
[Bindable]，[Bindable(event=“eventname”)]Event表示當(dāng)數(shù)據(jù)源發(fā)生變化時(shí)，數(shù)據(jù)源所在對(duì)象派發(fā)的事件類(lèi)型，它是可選項(xiàng)，默認(rèn)的事件名是“propertyChange”，一般情況下只需要使用[Bindable]標(biāo)簽
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="結(jié)果" 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="結(jié)果" width="48" fontSize="12" fontWeight="bold"/>
22
23 </mx:Application>
24
3 使用標(biāo)簽
<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>魚(yú)</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="專(zhuān)輯信息" fontSize="12">
<mx:Label x="58" y="36" text="專(zhuān)輯" 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 閱讀(425)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
Flex3.0