http://mba.shengwushibie.com/itbook/BookChapter.asp?id=13721
[Bindable] |
[Bindable(event='eventName')] |
开发者一般忽略事件(event)名称,只使用[Bindable]标识可绑定数据源。这种情况下,Flex会默认地创建mx.events.PropertyChangeEvent类型事件,事件名为propertyChange。当数据绑定的数据源发生变化时,数据源会自动调度propertyChange事件,通知Flex将新值复制给目标数据。
如果在标识绑定时说明了事件,也就是说采用了[Bindable (event='eventName')]方式,开发者须要自己定义和调度事件。
我们依次说明如何声明属性、ActionScript类和方法作为可绑定的数据源。
声明可绑定属性
在属性变量定义之前,使用元数据标签[Bindable]声明属性可绑定。属性可以是公共属性、私有属性或被保护属性。声明如下:
[Bindable] public var employee:Employee=new Employee(); [Bindable] private var acEmployees:ArrayCollection=new ArrayCollection(); |
如上声明后,employee和acEmployees变量可作为绑定数据源。
对于使用getter和setter方法定义的属性变量,需要在get或set方法前声明[Bindable]。如代码13-3所示。
代码13-3:getter和setter的属性绑定声明
<?xml version='1.0' encoding='utf-8'?> <mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' layout='vertical' verticalAlign='middle' backgroundColor='white' creationComplete='init();'> <mx:Script> <![CDATA[ private var _prop:String; private function init():void{ prop='bind was triggerd'; } [Bindable] private function set prop(value:String ):void{ //自定义代码 _prop=value; } private function get prop():String{ //自定义代码 return _prop; } ]]> </mx:Script> <mx:Text id='txtDest' text='{prop}'/> <mx:Button label='修改' click='prop='bind was triggerd Again!''/> </mx:Application> |
声明可绑定ActionScript类
在公共类定义前,使用[Bindable]声明该类是可绑定的。
声明ActionScript类可绑定意味着告诉Flex,这个类的所有公共属性都是可绑定的。因此,代码13-4、代码13-5具有相同的意义。
代码13-4:可绑定ActionScript类一
package com.longfei.bookLabs.bookStore.model { [Bindable] public class Employee { public var name:String; public var title:String; public function Employee(){ } } } |
package com.longfei.bookLabs.bookStore.model { public class Employee { [Bindable] public var name:String; [Bindable] public var title:String; public function Employee(){ } } } |
声明可绑定方法
在Flex中,方法也可以作为数据绑定的数据源,前提条件是方法的参数必须声明为可绑定的属性变量。当属性变量发生变化时,方法就会被调用,并把结果传递给目标数据,如代码13-6所示。
代码13-6:可绑定ActionScript方法
<?xml version='1.0' encoding='utf-8'?> <mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' layout='vertical' verticalAlign='middle' backgroundColor='white'> <mx:Script> <![CDATA[ private var strDest:String; private function functionSrc(value:Object):String{ strDest='新数据是: ' + value; return strDest; } ]]> </mx:Script> <mx:Form> <mx:FormItem label='数据源:'> <mx:TextInput id='txtSrc' /> </mx:FormItem> <mx:FormItem label='目标数据:'> <mx:TextInput id='txtDest' text='{functionSrc(txtSrc.text)}'/> </mx:FormItem> </mx:Form> </mx:Application> |