`

FLEX 数据绑定专题一(转)

    博客分类:
  • flex
阅读更多
ps:附件是全文的pdf版本,以及涉及代码的myeclipse工程
1.关于数据绑定
   数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。数据绑定为在
应用的不同层之间传递数据提供了便捷方法。数据绑定需要一个源属性,一个目的属性,以及
用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时,对象发出触发事
件。
   Adobe 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>
   数据绑定表达式中可以将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 控
件的数据绑定:

  <?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>标记都能在编译期定义数据绑定,而使用ActionScript 代码则
可以在运行期定义数据绑定,如下例所示:

<?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 执行拷贝,必须使用[Bindable]标记来向Flex 注册这个属性。
The [Bindable] 元数据标记有以下语法:
[Bindable]
[Bindable(event="eventname")]

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

  下面的例子作了一个maxFontSize 属性和一个minFontSize 属性变量可用于数据绑定表达式的源:
<?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>

2. 在ActionScript 中定义数据绑定

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

(1)在MXML 与在ActionScript 定义数据绑定的区别
编译期在MXML 中定义数据绑定与在运行期在ActionScript 中定义数据绑定有一些不同之
处:
分享到:
评论

相关推荐

    FLEX资源——FLEX数据绑定专题(中文PDF)

    《FLEX数据绑定专题》是一本深入探讨Adobe Flex中数据绑定技术的专业中文PDF文档。Flex是一种用于构建富互联网应用程序(RIA)的开放源码框架,它允许开发者创建交互性强、功能丰富的Web应用。数据绑定是Flex中一个...

    Flex数据绑定专题

    ### Flex数据绑定专题详解 #### 一、数据绑定概述 数据绑定是Flex应用程序开发中的核心概念之一,它指的是将一个对象中的数据与另一个对象中的数据建立连接的过程。通过数据绑定,开发者可以实现在应用程序的不同...

    FLEX数据绑定专题

    本文将深入探讨“FLEX数据绑定专题”,包括其多种实现方式以及如何结合Java作为后端来实现数据交换。 首先,数据绑定是Flex中一种强大的工具,它简化了UI组件状态与应用数据之间的同步。在Flex 4中,数据绑定主要...

    flex数据绑定 pdf

    这份名为“FLEX数据绑定专题”的PDF文档,很可能深入探讨了这一主题,提供了详细的理论知识和实践案例。 在Flex中,数据绑定是一个自动化的过程,它使得视图组件(如文本框、列表等)能够自动反映出数据源的变化,...

    flex数据绑定

    Flex数据绑定是Adobe Flex应用程序开发中的核心特性,它允许...通过阅读《FLEX数据绑定专题.pdf》这样的文档,你可以深入理解Flex数据绑定的工作原理,学习如何有效地利用这一功能,提升Flex应用的开发效率和用户体验。

    Flex内存数据做范围分段专题图

    在提供的压缩包文件"Flex内存数据做范围分段专题图"中,可能包含了示例代码、数据文件和详细的教程,用于演示如何在Flex环境中实现这一功能。通过学习这些资源,开发者可以更深入地了解如何在实际项目中应用SuperMap...

    Flex制作的专题作业

    它允许开发者使用MXML和AS3来设计和编写用户界面,同时提供了强大的数据绑定和组件模型,使得开发复杂的交互式应用变得简单。在本项目中,Flex可能被用来构建了网页的主要结构和动态功能,如内容滑动效果。 HTML...

    Flex常用教程及库

    压缩包中的“FLEX数据绑定专题”可能包含以下内容: 1. **基础教程**:介绍数据绑定的基本概念,如何在MXML和ActionScript中设置绑定,以及不同类型的绑定。 2. **案例分析**:通过实际项目示例,展示数据绑定在...

    Flex饼图向上吐槽

    Flex饼图向上吐槽是一个关于Adobe Flex中饼图组件的专题,这个组件被设计用来以图形化的方式展示数据,尤其适用于显示部分与整体的关系。在Flex中,饼图是一种常见的图表类型,它将数据集中的各个数据项以扇形区域...

    How to use Flex to achieve Thematic Layers of Columnar

    总的来说,使用Flex实现柱状专题图层涉及到了面向对象编程、图形渲染以及数据绑定的概念。通过灵活地调整和定制ColumnChart,我们可以创建出满足特定需求的地图可视化效果,从而更好地呈现和分析地理空间数据。

    flex 学习网址

    Flex的核心优势在于其强大的数据绑定功能、灵活的布局管理器以及丰富的用户界面组件库。这些特性使得开发者能够轻松构建出既美观又高效的Web应用。 #### Flex学习资源推荐 1. **CSDN专题文章:“Flex 学习资料汇总...

    源码免费课程下载

    4. **数据绑定与模型视图控制器(MVC)架构**:学会如何利用ExtJs的数据绑定特性以及MVC架构模式组织代码,提高开发效率和代码可维护性。 ### 专题-深入JavaOOP编程 面向对象编程(OOP)是现代软件开发的基础之一,...

    XamarimFormsLayouts

    7. **BindableLayout**:绑定布局是Xamarin.Forms 4.0引入的新特性,它允许你将任何布局与数据源绑定,自动根据数据项创建和管理子视图。 在使用这些布局时,还需要理解以下概念: - **Margin和Padding**:这两个...

Global site tag (gtag.js) - Google Analytics