AdobeFlex提供哪些方法指定Flex数据绑定

这篇文章给大家介绍Adobe Flex提供哪些方法指定Flex数据绑定,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

10余年的阿拉尔网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整阿拉尔建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“阿拉尔网站设计”,“阿拉尔网站推广”以来,每个客户项目都认真落实执行。

和大家重点学习一下Flex数据绑定,Adobe Flex 提供三种方法用于指定Flex数据绑定:MXML 中的大括号({})语法,MXML 中的<mx:Binding>标记,以及ActionScript 中的BindingUtils 的系列方法。

关于Flex数据绑定

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

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


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

<?xml version="1.0"?> <!-- binding/BasicBinding.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:TextInput id="myTI" text="Enter text here"/> <mx:Text id="myText" text="{myTI.text}"/> </mx:Application>

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

<?xml version="1.0"?> <!-- binding/BasicBindingWithAS.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:TextInput id="myTI"/> <mx:Text id="myText" text="{myTI.text.toUpperCase()}"/> </mx:Application>


(2)用<mx:Binding>标记作为大括号语法的替代方法。

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

<?xml version="1.0"?> <!-- binding/BasicBindingMXML.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:TextInput id="myTI"/> <mx:Text id="myText"/> <mx:Binding source="myTI.text" destination="myText.text"/> </mx:Application>

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

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

<?xml version="1.0"?> <!-- binding/BasicBindingAS.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[  import mx.binding.utils.*;  // Define data binding.  public function initBindingHandler():void {  BindingUtils.bindProperty(myText, "text", myTI, "text");  }  ]]> </mx:Script> <mx:TextInput id="myTI"/> <mx:Text id="myText" preinitialize="initBindingHandler();"/> </mx:Application>


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

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

[Bindable]  [Bindable(event="eventname")]

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

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

<?xml version="1.0"?> <!-- binding/FontPropertyBinding.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[  // Define public vars for tracking font size.  [Bindable]  public var maxFontSize:Number = 15;  [Bindable]  public var minFontSize:Number = 5;  ]]> </mx:Script> <mx:Text text="{maxFontSize}"/> <mx:Text text="{minFontSize}"/> <mx:Button click="maxFontSize=20; minFontSize=10;"/> </mx:Application>

关于Adobe Flex提供哪些方法指定Flex数据绑定就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

当前名称:AdobeFlex提供哪些方法指定Flex数据绑定
文章来源:https://www.cdcxhl.com/article40/pdcdho.html

成都网站建设公司_创新互联,为您提供电子商务企业网站制作外贸网站建设小程序开发动态网站

广告

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

绵阳服务器托管