FLEX 数据绑定专题(2)
2010-05-19 17:18
387 查看
2009年12月21日 星期一 09:51 A.M.
3. 绑定到函数、对象和数组 (1)绑定函数以响应数据绑定事件 可以把使用“不可绑定的参数”的函数作为数据绑定表达式的源。但是,必须有一种办法 能够激活这个函数以更新数据绑定的目的属性。 在下面的例子中,使用了[Bindable]元数据标记来指定Felx 调用isEnabled()函数以响应 myFlagChanged 事件。当myFlag 的 setter 方法被调用时,它就发出了一个myFlagChanged 事 件,这个事件触发任何使用isEnabled()函数作为源的数据绑定。 <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <![CDATA[ import flash.events.Event; // Define a function that gets invoked // in response to the myFlagChanged event. [Bindable(event="myFlagChanged")] private function isEnabled():String { if (myFlag) return 'true'; else return 'false'; } private var _myFlag:Boolean = false; // Define a setter method that dispatches the // myFlagChanged event to trigger the data binding. public function set myFlag(value:Boolean):void { _myFlag = value; dispatchEvent(new Event("myFlagChanged")); } public function get myFlag():Boolean { return _myFlag; } ]]> (2)将对象用于数据绑定 当使用对象进行工作时,不得不考虑什么时候定义到这个对象的绑定?或者考虑什么时候 定义一个到这个对象属性的绑定? 绑定到对象 当使一个对象成为数据绑定表达式的源时,数据绑定发生在这个对象被更新之时,或者这 个对象的引用被更新之时,但不能发生在这个对象的单个(数据)域(feild)被更新之时。 下面的范例中,创建了Object 类的子类,这个子类带有两个属性,stringProp 和intProp, 但没有使这两个属性成为可绑定属性: package myComponents { // binding/myComponents/NonBindableObject.as // Make no class properties bindable. public class NonBindableObject extends Object { public function NonBindableObject() { super(); } public var stringProp:String = "String property"; public var intProp:int = 52; } } 因为这个类的两个属性不是可绑定属性,当它们被更新时Flex 不会发出事件去触发数据绑 定。接下来在Flex 应用中使用这个类,如下面的范例所示: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initObj();"> <![CDATA[ import myComponents.NonBindableObject; [Bindable] public var myObj:NonBindableObject = new NonBindableObject(); [Bindable] public var anotherObj:NonBindableObject = new NonBindableObject(); public function initObj():void { anotherObj.stringProp = 'anotherObject'; anotherObj.intProp = 8; } ]]> <mx:Button label="Change myObj.stringProp" click="myObj.stringProp = 'new string';"/> <mx:Button label="Change myObj.intProp" click="myObj.intProp = 10;"/> <mx:Button label="Change myObj" click="myObj = anotherObj;"/> 因为没有使NonBindableObject 类的单个数据域(fields)成为可绑定属性,所以应用在 两个Text 控件的绑定在应用启动时以及在myObj 被更新时才会被更新。在编译这个应用时,编 译器会输出警告信息,提示数据绑定机制不能检测stringProp 和intProp 属性的变化。 (3)绑定到对象的属性 为了使对象的属性可绑定,要创建新的类定义,如下面的范例所示: package myComponents { // binding/myComponents/BindableObject.as // Make all class properties bindable. [Bindable] public class BindableObject extends Object { public function BindableObject() { super(); } public var stringProp:String = "String property"; public var intProp:int = 52; } } 通过在类定义之前放置[Bindable]元数据标记,就可以使得类中所有public 变量、以及所有 完全具备setter 及getter 的public 属性成为可绑定的属性。接下来就可以使用stringProp 和intProp 属性作为数据绑定的源,如下范例所示: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initObj();"> <![CDATA[ import myComponents.BindableObject; [Bindable] public var myObj:BindableObject = new BindableObject(); [Bindable] public var anotherObj:BindableObject = new BindableObject(); public function initObj():void { anotherObj.stringProp = 'anotherObject'; anotherObj.intProp = 8; } ]]> <mx:Button label="Change myObj.stringProp" click="myObj.stringProp = 'new string';"/> <mx:Button label="Change myObj.intProp" click="myObj.intProp = 10;"/> <mx:Button label="Change myObj" click="myObj = anotherObj;"/> (4)在绑定中使用数组 在使用数组进行工作时,比如Array 或者ArrayCollection 对象,可以把数组作为数据绑定 表达式的源或目的。 注意: 当使用数组作为绑定源时,应该使用ArrayCollection 类型的数组,因为 ArrayCollection 类在数组或数组元素发生变化时能够发出事件来触发数据绑定。比如,对 ArrayCollection.addItem(), ArrayCollection.addItemAt(), ArrayCollection.removeItem(), 以及ArrayCollection.removeItemAt()方法的调用都会触发 数据绑定。 绑定到数组 通常将数组绑定给Flex 控件的dataProvider 属性,下面范例说明将数组绑定用于List 控 件: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ "One", "Two", "Three", "Four"]); [Bindable] public var myAC2:ArrayCollection = new ArrayCollection([ "Uno", "Dos", "Tres", "Quatro"]); ]]> <mx:Button label="Change Element" click="myAC[0]='mod One'"/> <mx:Button label="Add Element" click="myAC.addItem('new element');"/> <mx:Button label="Remove Element 0" click="myAC.removeItemAt(0);"/> <mx:Button label="Change ArrayCollection" click="myAC=myAC2"/> 这个例子定义了一个ArrayCollection 对象,然后将List 控件的dataProvider 属性设置 为对这个ArrayCollection 的数据绑定。当修改ArrayCollection 对象中的元素,或者修改对 ArrayCollection 对象的引用,都会触发数据绑定。 绑定到数组中的元素 可以使用数组中的单个元素作为数据绑定源,如下例所示: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ "One", "Two", "Three", "Four"]); [Bindable] public var myAC2:ArrayCollection = new ArrayCollection([ "Uno", "Dos", "Tres", "Quatro"]); ]]> <mx:Button id="button1" label="Change Element" click="myAC[0]='new One'"/> <mx:Button id="button2" label="Change ArrayCollection" click="myAC=myAC2"/> 如果通过方括号语法[]来指定数组元素作为数据绑定表达式的源,那么数据绑定只在应用 启动时触发,或者在数组或其引用被更新时触发。当这个数组元素被更新的时候不会触发数据 绑定。 但数据绑定表达式中的myAC.getItemAt(0)则会在该数组元素变化时被触发更新。因此,id 为 text2 的Text 控件在点击button1 时会被更新,而id 为text1 的Text 控件则不会被更新。 当使用数组中的元素作为数据绑定表示的源时,应当在绑定表达式中使用 ArrayCollection.getItemAt()方法。 点击button2 时将myAC2 拷贝给myAC,这会触发对数组元素的所有数据绑定而不论它们是如 何实现的。 |
相关文章推荐
- FLEX 数据绑定专题(1)
- FLEX 数据绑定专题(3)
- Flex ComboBox绑定服务器端数据
- Flex对象与组件的数据动态双向绑定
- Flex中数据绑定。
- flex 数据绑定(一)
- flex :读取access数据库数据 转化为xml 然后在flex页面显示绑定图片
- Flex Datagrid 实战 [数据绑定、单击显示、分页]
- Flex中的数据绑定
- Flex绑定数据的方式[转]
- Flex中数据绑定Bind的一些方法
- Flex数据绑定
- flex - 数据绑定
- FLEX学习笔记----数据绑定
- Flex中的数据绑定(Data Binding)1:数据绑定的原理
- Flex: 数据绑定将无法检测对“***”的指定
- Flex 4双向数据绑定
- Flex的数据绑定方式一览
- flex中的数据绑定 bindable
- Flex4 简单的下拉选单 绑定数组数据 比比HTML谁简单 晕死