术语汇编Flex数据绑定概述

本文和大家重点讨论一下Flex数据绑定的概念,Flex数据绑定为在应用的不同层之间传递数据提供了便捷方法。Flex数据绑定需要一个源属性,一个目的属性,以及用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时,对象发出触发事件。

成都创新互联公司主营昂昂溪网站建设的网络公司,主营网站建设方案,重庆APP开发公司,昂昂溪h5小程序制作搭建,昂昂溪网站营销推广欢迎昂昂溪等地区企业咨询

Flex数据绑定

1.关于Flex数据绑定

Flex数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。Flex数据绑定为在应用的不同层之间传递数据提供了便捷方法。Flex数据绑定需要一个源属性,一个目的属性,以及用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时,对象发出触发事件。

Adobe Flex 提供三种方法用于指定Flex数据绑定:MXML 中的大括号({})语法,MXML 中的标记,以及ActionScript 中的BindingUtils 的系列方法。

(1)下面的例子使用大括号({})语法来展示一个Text 控件,该控件的数据来自于TextInput 控件Text 属性:

 
 
 

 Flex数据绑定表达式中可以将ActionScript 代码以及E4X 表达式作为一部分包含进来,如下例所示:

 
 
 

 (2)用标记作为大括号语法的替代方法。

在使用时,要为标记提供一个源属性作为标记的source 属性以及提供一个目的属性作为标记的destination 属性。下面的例子使用标记定义了一个从TextInput 控件到Text 控件的Flex数据绑定:

 
 
 

 
同大括号语法相比,用标记能够将视图(用户界面)同模型完全分离。
标记也能实现将多个源属性绑定到一个相同的目的属性,这是因为能够定义多个具有相同的destination 属性的标记.

大括号语法和标记都能在编译期定义Flex数据绑定,而使用ActionScript 代码则可以在运行期定义Flex数据绑定,如下例所示:

 
 
 
  1. import mx.binding.utils.*;
  2. // Define data binding.
  3. public function initBindingHandler():void {
  4. BindingUtils.bindProperty(myText, "text", myTI, "text");
  5. }
  6. ]]>

 (3)创建用作Flex数据绑定源的属性

当创建一个用于绑定表达式源的属性,那么在源属性值发生变化时Flex 就能自动将值拷贝到所有的目的属性。为了让Flex 执行拷贝,必须使用[Bindable]标记来向Flex 注册这个属性。
The [Bindable] 元数据标记有以下语法:

 
 
 
  1. [Bindable]
  2. [Bindable(event="eventname")]

如果忽略了事件名称,Flex 自动地创建一个名为propertyChange 的事件,并且在属性发生变化时,由Flex 发出这个事件以触发所有以这个属性作为源的Flex数据绑定。

下面的例子作了一个maxFontSize 属性和一个minFontSize 属性变量可用于Flex数据绑定表达式的源:

 
 
 
  1. // Define public vars for tracking font size.
  2. [Bindable]
  3. public var maxFontSize:Number = 15;
  4. [Bindable]
  5. public var minFontSize:Number = 5;
  6. ]]>

 2. 在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. import mx.binding.utils.*;
  2. import mx.events.FlexEvent;
  3. // Method called when myTI.text changes.
  4. public function updateMyString(val:String):void {
  5. myTA.text = val.toUpperCase();
  6. }
  7. public function mySetterBinding(event:FlexEvent):void {
  8. var watcherSetter:ChangeWatcher =
  9. BindingUtils.bindSetter(updateMyString, myTI, "text");
  10. }
  11. ]]>
  12. text="Hello Setter" />
  13. initialize="mySetterBinding(event);"/>

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

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

 
 
 
  1. initialize="initWatcher();">
  2. import mx.binding.utils.*;
  3. import mx.events.FlexEvent;
  4. import mx.events.PropertyChangeEvent;
  5. public var myWatcher:ChangeWatcher;
  6. // Define binding watcher.
  7. public function initWatcher():void {
  8. // Define a watcher for the text binding.
  9. ChangeWatcher.watch(textarea, "text", watcherListener);
  10. }
  11. // Event listener when binding occurs.
  12. public function watcherListener(event:Event):void {
  13. myTA1.text="binding occurred";
  14. // Use myWatcher.unwatch() to remove the watcher.
  15. }
  16. ]]>

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

 

本文名称:术语汇编Flex数据绑定概述
分享网址:http://www.mswzjz.com/qtweb/news32/208632.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联