Flex數據綁定中綁定到函數、對象和數組
本文和大家重點討論一下Flex數據綁定中如何綁定到函數、對象和數組,Flex數據綁定是將一個對象中的數據同另一個對象中的數據聯系在一起的過程。
Flex數據綁定
1.綁定到函數、對象和數組
(1)綁定函數以響應Flex數據綁定事件
可以把使用“不可綁定的參數”的函數作為Flex數據綁定表達式的源。但是,必須有一種辦法能夠激活這個函數以更新Flex數據綁定的目的屬性。
在下面的例子中,使用了[Bindable]元數據標記來指定Felx調用isEnabled()函數以響應myFlagChanged事件。當myFlag的setter方法被調用時,它就發出了一個myFlagChanged事件,這個事件觸發任何使用isEnabled()函數作為源的Flex數據綁定。
- <?xmlversionxmlversion="1.0"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
- <![CDATA[
- importflash.events.Event;
- //Defineafunctionthatgetsinvoked
- //inresponsetothemyFlagChangedevent.
- [Bindable(event="myFlagChanged")]
- privatefunctionisEnabled():String{
- if(myFlag)
- return'true';
- else
- return'false';
- }
- privatevar_myFlag:Boolean=false;
- //Defineasettermethodthatdispatchesthe
- //myFlagChangedeventtotriggerthedatabinding.
- publicfunctionsetmyFlag(value:Boolean):void{
- _myFlag=value;
- dispatchEvent(newEvent("myFlagChanged"));
- }
- publicfunctiongetmyFlag():Boolean{
- return_myFlag;
- }
- ]]>
#p# (2)將對象用于Flex數據綁定
當使用對象進行工作時,不得不考慮什么時候定義到這個對象的綁定?或者考慮什么時候定義一個到這個對象屬性的綁定?
綁定到對象
當使一個對象成為Flex數據綁定表達式的源時,Flex數據綁定發生在這個對象被更新之時,或者這個對象的引用被更新之時,但不能發生在這個對象的單個(數據)域(feild)被更新之時。
下面的范例中,創建了Object類的子類,這個子類帶有兩個屬性,stringProp和intProp,但沒有使這兩個屬性成為可綁定屬性:
- packagemyComponents
- {
- //binding/myComponents/NonBindableObject.as
- //Makenoclasspropertiesbindable.
- publicclassNonBindableObjectextendsObject{
- publicfunctionNonBindableObject(){
- super();
- }
- publicvarstringProp:String="Stringproperty";
- publicvarintProp:int=52;
- }
- }
因為這個類的兩個屬性不是可綁定屬性,當它們被更新時Flex不會發出事件去觸發Flex數據綁定。接下來在Flex應用中使用這個類,如下面的范例所示:
- <?xmlversionxmlversion="1.0"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
- creationComplete="initObj();">
- <![CDATA[
- importmyComponents.NonBindableObject;
- [Bindable]
- publicvarmyObj:NonBindableObject=newNonBindableObject();
- [Bindable]
- publicvaranotherObj:NonBindableObject=
- newNonBindableObject();
- publicfunctioninitObj():void{
- anotherObj.stringProp='anotherObject';
- anotherObj.intProp=8;
- }
- ]]>
- <mx:Buttonlabelmx:Buttonlabel="ChangemyObj.stringProp"
- click="myObj.stringProp='newstring';"/>
- <mx:Buttonlabelmx:Buttonlabel="ChangemyObj.intProp"
- click="myObj.intProp=10;"/>
- <mx:Buttonlabelmx:Buttonlabel="ChangemyObj"
- click="myObj=anotherObj;"/>
因為沒有使NonBindableObject類的單個數據域(fields)成為可綁定屬性,所以應用在兩個Text控件的綁定在應用啟動時以及在myObj被更新時才會被更新。在編譯這個應用時,編譯器會輸出警告信息,提示Flex數據綁定機制不能檢測stringProp和intProp屬性的變化。
#p#(3)綁定到對象的屬性
為了使對象的屬性可綁定,要創建新的類定義,如下面的范例所示:
- packagemyComponents
- {
- //binding/myComponents/BindableObject.as
- //Makeallclasspropertiesbindable.
- [Bindable]
- publicclassBindableObjectextendsObject{
- publicfunctionBindableObject(){
- super();
- }
- publicvarstringProp:String="Stringproperty";
- publicvarintProp:int=52;
- }
- }
通過在類定義之前放置[Bindable]元數據標記,就可以使得類中所有public變量、以及所有完全具備setter及getter的public屬性成為可綁定的屬性。接下來就可以使用stringProp和intProp屬性作為Flex數據綁定的源,如下范例所示:
- <?xmlversionxmlversion="1.0"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
- creationComplete="initObj();">
- <![CDATA[
- importmyComponents.BindableObject;
- [Bindable]
- publicvarmyObj:BindableObject=newBindableObject();
- [Bindable]
- publicvaranotherObj:BindableObject=
- newBindableObject();
- publicfunctioninitObj():void{
- anotherObj.stringProp='anotherObject';
- anotherObj.intProp=8;
- }
- ]]>
- <mx:Buttonlabelmx:Buttonlabel="ChangemyObj.stringProp"
- click="myObj.stringProp='newstring';"/>
- <mx:Buttonlabelmx:Buttonlabel="ChangemyObj.intProp"
- click="myObj.intProp=10;"/>
- <mx:Buttonlabelmx:Buttonlabel="ChangemyObj"
- click="myObj=anotherObj;"/>
#p# (4)在綁定中使用數組
在使用數組進行工作時,比如Array或者ArrayCollection對象,可以把數組作為Flex數據綁定表達式的源或目的。
注意:當使用數組作為綁定源時,應該使用ArrayCollection類型的數組,因為ArrayCollection類在數組或數組元素發生變化時能夠發出事件來觸發Flex數據綁定。比如,對ArrayCollection.addItem(),ArrayCollection.addItemAt(),ArrayCollection.removeItem(),以及ArrayCollection.removeItemAt()方法的調用都會觸發Flex數據綁定。
綁定到數組
通常將數組綁定給Flex控件的dataProvider屬性,下面范例說明將數組綁定用于List控
件:
- <?xmlversionxmlversion="1.0"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
- <![CDATA[
- importmx.collections.ArrayCollection;
- [Bindable]
- publicvarmyAC:ArrayCollection=newArrayCollection([
- "One","Two","Three","Four"]);
- [Bindable]
- publicvarmyAC2:ArrayCollection=newArrayCollection([
- "Uno","Dos","Tres","Quatro"]);
- ]]>
- <mx:Button
- label="ChangeElement"
- click="myAC[0]='modOne'"/>
- <mx:Button
- label="AddElement"
- click="myAC.addItem('newelement');"/>
- <mx:Button
- label="RemoveElement0"
- click="myAC.removeItemAt(0);"/>
- <mx:Button
- label="ChangeArrayCollection"
- click="myAC=myAC2"/>
這個例子定義了一個ArrayCollection對象,然后將List控件的dataProvider屬性設置為對這個ArrayCollection的Flex數據綁定。當修改ArrayCollection對象中的元素,或者修改對ArrayCollection對象的引用,都會觸發Flex數據綁定。
綁定到數組中的元素
可以使用數組中的單個元素作為Flex數據綁定源,如下例所示:
- <?xmlversionxmlversion="1.0"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
- <![CDATA[
- importmx.collections.ArrayCollection;
- [Bindable]
- publicvarmyAC:ArrayCollection=newArrayCollection([
- "One","Two","Three","Four"]);
- [Bindable]
- publicvarmyAC2:ArrayCollection=newArrayCollection([
- "Uno","Dos","Tres","Quatro"]);
- ]]>
- <mx:Buttonidmx:Buttonid="button1"
- label="ChangeElement"
- click="myAC[0]='newOne'"/>
- <mx:Buttonidmx:Buttonid="button2"
- label="ChangeArrayCollection"
- click="myAC=myAC2"/>
如果通過方括號語法[]來指定數組元素作為Flex數據綁定表達式的源,那么Flex數據綁定只在應用啟動時觸發,或者在數組或其引用被更新時觸發。當這個數組元素被更新的時候不會觸發Flex數據綁定。
但Flex數據綁定表達式中的myAC.getItemAt(0)則會在該數組元素變化時被觸發更新。因此,id為text2的Text控件在點擊button1時會被更新,而id為text1的Text控件則不會被更新。
當使用數組中的元素作為Flex數據綁定表示的源時,應當在綁定表達式中使用ArrayCollection.getItemAt()方法。
點擊button2時將myAC2拷貝給myAC,這會觸發對數組元素的所有Flex數據綁定而不論它們是如何實現的。
【編輯推薦】
- 技術分享 在ActionScript中如何定義Flex數據綁定
- Adobe Flex提供三種方法指定Flex數據綁定
- 術語匯編 Flex數據綁定概述
- 解析Flex全屏模式設置方法
- Flex內存泄露解決方法和內存釋放優化原則