技術(shù)分享 在ActionScript中如何定義Flex數(shù)據(jù)綁定
你對在ActionScript 中定義Flex數(shù)據(jù)綁定是否了解,這里和大家分享一下,通過使用bindProperty() 方法可以讓我們創(chuàng)建一個(gè)到用變量實(shí)現(xiàn)的屬性的數(shù)據(jù)綁定,或者用bindSetter()方法創(chuàng)建一個(gè)到用方法實(shí)現(xiàn)的屬性的Flex數(shù)據(jù)綁定。
在ActionScript 中定義Flex數(shù)據(jù)綁定
通過使用mx.binding.utils.BindingUtils能夠在ActionScript中定義綁定。這個(gè)類定義了幾個(gè)靜態(tài)方法,通過使用bindProperty() 方法可以讓我們創(chuàng)建一個(gè)到用變量實(shí)現(xiàn)的屬性的數(shù)據(jù)綁定,或者用bindSetter()方法創(chuàng)建一個(gè)到用方法實(shí)現(xiàn)的屬性的Flex數(shù)據(jù)綁定。
(1)在MXML 與在ActionScript 定義Flex數(shù)據(jù)綁定的區(qū)別
編譯期在MXML 中定義Flex數(shù)據(jù)綁定與在運(yùn)行期在ActionScript 中定義Flex數(shù)據(jù)綁定有一些不同之處:
◆不能在由bindProperty()或者bindSetter()方法定義綁定表達(dá)式中引入ActionScript 代碼。相反,使用bindSetter()方法可以指定一個(gè)在綁定發(fā)生時(shí)調(diào)用的
方法。
◆ 不能在由ActionScript 中定義的綁定表達(dá)式中引入E4X 表達(dá)式。
◆ 在由the bindProperty()或者bindSetter()方法定義的Flex數(shù)據(jù)綁定表達(dá)式的屬性鏈中不能引入函數(shù)或者數(shù)組元素。更多信息見Working with bindable property chains.
◆同運(yùn)行時(shí)使用bindProperty()或者bindSetter()定義的Flex數(shù)據(jù)綁定相比,MXML 編譯器有更好的警告和錯(cuò)誤檢查支持。
(2)范例:在ActionScript 中定義Flex數(shù)據(jù)綁定
下面的例子是用bindSetter()建立了一個(gè)Flex數(shù)據(jù)綁定。bindSetter()方法的參數(shù)設(shè)置如下:
◆ 源(source) 對象
◆ 源(source) 屬性名
◆ 當(dāng)源(source)屬性變化被調(diào)用的方法。
下面的范例中,當(dāng)向TextInput 控件中輸入文本時(shí),文本會(huì)被轉(zhuǎn)換為大寫形式并拷貝給TextArea
控件:
- <?xml version="1.0"?>
- <!-- binding/BindSetterAS.mxml -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
- <mx:Script>
- <![CDATA[
- import mx.binding.utils.*;
- import mx.events.FlexEvent;
- // Method called when myTI.text changes.
- public function updateMyString(val:String):void {
- myTA.text = val.toUpperCase();
- }
- <!-- Event listener to configure binding. -->
- public function mySetterBinding(event:FlexEvent):void {
- var watcherSetter:ChangeWatcher =
- BindingUtils.bindSetter(updateMyString, myTI, "text");
- }
- ]]>
- </mx:Script>
- <mx:Label text="Bind Setter using setter method"/>
- <mx:TextInput id="myTI"
- text="Hello Setter" />
- <mx:TextArea id="myTA"
- initialize="mySetterBinding(event);"/>
- </mx:Application>
(3)定義綁定觀察者 (watchers)
Flex 有個(gè)mx.binding.utils.ChangeWatcher 類,可以用這個(gè)類來定義一個(gè)Flex數(shù)據(jù)綁定觀察者。通常,F(xiàn)lex數(shù)據(jù)綁定觀察者在綁定發(fā)生時(shí)激活一個(gè)事件監(jiān)聽器。可按照下面的范例使用
ChangeWatcher 的watch()即可建立一個(gè)Flex數(shù)據(jù)綁定觀察者:
- <?xml version="1.0"?>
- <!-- binding/DetectWatcher.mxml -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- initialize="initWatcher();">
- <mx:Script>
- <![CDATA[
- import mx.binding.utils.*;
- import mx.events.FlexEvent;
- import mx.events.PropertyChangeEvent;
- public var myWatcher:ChangeWatcher;
- // Define binding watcher.
- public function initWatcher():void {
- // Define a watcher for the text binding.
- ChangeWatcher.watch(textarea, "text", watcherListener);
- }
- // Event listener when binding occurs.
- public function watcherListener(event:Event):void {
- myTA1.text="binding occurred";
- // Use myWatcher.unwatch() to remove the watcher.
- }
- ]]>
- </mx:Script>
- <!-- Define a binding expression_r to watch. -->
- <mx:TextInput id="textinput" text="Hello"/>
- <mx:TextArea id="textarea" text="{textinput.text}"/>
- <!-- Trigger a binding. -->
- <mx:Button label="Submit" click="textinput.text='Goodbye';"/>
- <mx:TextArea id="myTA1"/>
- </mx:Application>
上面的范例中,為Flex數(shù)據(jù)綁定觀察者定義了事件監(jiān)聽器,在這個(gè)事件監(jiān)聽器中使用了單個(gè)參數(shù)來包含事件對象。事件對象的數(shù)據(jù)類型由被觀察的屬性所決定。每個(gè)可綁定的屬性會(huì)不同的
事件類型以及相關(guān)的事件對象。有關(guān)確定事件類型的更多信息見“使用Bindable 元數(shù)據(jù)標(biāo)記”。
【編輯推薦】
- Adobe Flex提供三種方法指定Flex數(shù)據(jù)綁定
- 術(shù)語匯編 Flex數(shù)據(jù)綁定概述
- Flex數(shù)據(jù)綁定的四種方式
- 解析Flex全屏模式設(shè)置方法
- Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則