技术分享 在ActionScript中如何定义Flex数据绑定

开发 后端
本文向大家介绍一下在ActionScript 中定义Flex数据绑定的方法,通过使用mx.binding.utils.BindingUtils能够在ActionScript中定义绑定。

你对在ActionScript 中定义Flex数据绑定是否了解,这里和大家分享一下,通过使用bindProperty() 方法可以让我们创建一个到用变量实现的属性的数据绑定,或者用bindSetter()方法创建一个到用方法实现的属性的Flex数据绑定。

在ActionScript 中定义Flex数据绑定

通过使用mx.binding.utils.BindingUtils能够在ActionScript中定义绑定。这个类定义了几个静态方法,通过使用bindProperty() 方法可以让我们创建一个到用变量实现的属性的数据绑定,或者用bindSetter()方法创建一个到用方法实现的属性的Flex数据绑定。

(1)在MXML 与在ActionScript 定义Flex数据绑定的区别

编译期在MXML 中定义Flex数据绑定与在运行期在ActionScript 中定义Flex数据绑定有一些不同之处:
◆不能在由bindProperty()或者bindSetter()方法定义绑定表达式中引入ActionScript 代码。相反,使用bindSetter()方法可以指定一个在绑定发生时调用的
方法。
◆ 不能在由ActionScript 中定义的绑定表达式中引入E4X 表达式。
◆ 在由the bindProperty()或者bindSetter()方法定义的Flex数据绑定表达式的属性链中不能引入函数或者数组元素。更多信息见Working with bindable property chains.
◆同运行时使用bindProperty()或者bindSetter()定义的Flex数据绑定相比,MXML 编译器有更好的警告和错误检查支持。

(2)范例:在ActionScript 中定义Flex数据绑定

下面的例子是用bindSetter()建立了一个Flex数据绑定。bindSetter()方法的参数设置如下:
◆ 源(source) 对象
◆ 源(source) 属性名
◆ 当源(source)属性变化被调用的方法。
下面的范例中,当向TextInput 控件中输入文本时,文本会被转换为大写形式并拷贝给TextArea
控件:
 

  1. <?xml version="1.0"?> 
  2. <!-- binding/BindSetterAS.mxml --> 
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
  4. <mx:Script> 
  5. <![CDATA[  
  6. import mx.binding.utils.*;  
  7. import mx.events.FlexEvent;  
  8. // Method called when myTI.text changes.  
  9. public function updateMyString(val:String):void {  
  10. myTA.text = val.toUpperCase();  
  11. }  
  12. <!-- Event listener to configure binding. -->  
  13. public function mySetterBinding(event:FlexEvent):void {  
  14. var watcherSetter:ChangeWatcher =  
  15. BindingUtils.bindSetter(updateMyString, myTI, "text");  
  16. }  
  17. ]]> 
  18. </mx:Script> 
  19. <mx:Label text="Bind Setter using setter method"/> 
  20. <mx:TextInput id="myTI" 
  21. text="Hello Setter" /> 
  22. <mx:TextArea id="myTA" 
  23. initialize="mySetterBinding(event);"/> 
  24. </mx:Application> 

 (3)定义绑定观察者 (watchers)

Flex 有个mx.binding.utils.ChangeWatcher 类,可以用这个类来定义一个Flex数据绑定观察者。通常,Flex数据绑定观察者在绑定发生时激活一个事件监听器。可按照下面的范例使用
ChangeWatcher 的watch()即可建立一个Flex数据绑定观察者:
 

  1. <?xml version="1.0"?> 
  2. <!-- binding/DetectWatcher.mxml --> 
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  4. initialize="initWatcher();"> 
  5. <mx:Script> 
  6. <![CDATA[  
  7. import mx.binding.utils.*;  
  8. import mx.events.FlexEvent;  
  9. import mx.events.PropertyChangeEvent;  
  10. public var myWatcher:ChangeWatcher;  
  11. // Define binding watcher.  
  12. public function initWatcher():void {  
  13. // Define a watcher for the text binding.  
  14. ChangeWatcher.watch(textarea, "text", watcherListener);  
  15. }  
  16. // Event listener when binding occurs.  
  17. public function watcherListener(event:Event):void {  
  18. myTA1.text="binding occurred";  
  19. // Use myWatcher.unwatch() to remove the watcher.  
  20. }  
  21. ]]> 
  22. </mx:Script> 
  23. <!-- Define a binding expression_r to watch. --> 
  24. <mx:TextInput id="textinput" text="Hello"/> 
  25. <mx:TextArea id="textarea" text="{textinput.text}"/> 
  26. <!-- Trigger a binding. --> 
  27. <mx:Button label="Submit" click="textinput.text='Goodbye';"/> 
  28. <mx:TextArea id="myTA1"/> 
  29. </mx:Application> 

上面的范例中,为Flex数据绑定观察者定义了事件监听器,在这个事件监听器中使用了单个参数来包含事件对象。事件对象的数据类型由被观察的属性所决定。每个可绑定的属性会不同的
事件类型以及相关的事件对象。有关确定事件类型的更多信息见“使用Bindable 元数据标记”。
 

【编辑推荐】

  1. Adobe Flex提供三种方法指定Flex数据绑定
  2. 术语汇编 Flex数据绑定概述
  3. Flex数据绑定的四种方式
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

 

 

责任编辑:佚名 来源: myspace.com
相关推荐

2010-08-11 15:51:45

Flex DataGr

2010-08-09 15:41:13

Flex字体

2010-07-28 12:41:18

Flex组件

2010-07-30 10:53:53

Flex数据绑定

2010-08-12 11:05:33

Flex数据绑定

2010-08-09 10:39:14

FlexACtionSCrip

2010-07-28 13:31:10

Flex数据绑定

2010-07-28 13:11:13

Flex数据绑定

2010-07-30 10:45:08

Flex数据绑定

2010-08-05 13:07:11

FlexJson

2010-08-11 14:47:54

Flex样式

2010-08-02 16:33:11

Flex Spring

2010-07-30 09:08:21

Flex数据绑定

2010-08-12 11:34:15

Flex数据绑定

2010-08-05 15:06:19

Flex数据绑定

2010-08-09 15:30:00

Flex字体

2010-08-10 14:08:09

Flex嵌入字体

2010-07-30 09:28:09

Flex数据绑定

2010-07-28 13:24:20

Flex数据绑定

2010-08-12 10:56:17

Flex数据绑定
点赞
收藏

51CTO技术栈公众号