`
zyjwy02
  • 浏览: 141243 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Flex中的数据绑定(Data Binding)1:数据绑定的原理

阅读更多

Flex中提供了[Bindable]标签,可以方便的实现数据绑定。但是其背后的原理是什么呢?可以用flash.utils.describeType这个工具来分析。
    假设有如下的类,对成员变量声明了数据绑定:

package test
...{
    import mx.collections.ArrayCollection;
    
    public class BindablePropertity
    
...{
        [Bindable]
        public 
var list:ArrayCollection = new ArrayCollection();
    }

}


用flash.utils.describeType输出的xml如下:

<type name="test::BindablePropertity" base="Class" isDynamic="true" isFinal="true" isStatic="true">
  
<extendsClass type="Class"/>
  
<extendsClass type="Object"/>
  
<accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
  
<factory type="test::BindablePropertity">
    
<extendsClass type="Object"/>
    
<implementsInterface type="flash.events::IEventDispatcher"/>
    
<method name="hasEventListener" declaredBy="test::BindablePropertity" returnType="Boolean">
      
<parameter index="1" type="String" optional="false"/>
    
</method>
    
<method name="removeEventListener" declaredBy="test::BindablePropertity" returnType="void">
      
<parameter index="1" type="String" optional="false"/>
      
<parameter index="2" type="Function" optional="false"/>
      
<parameter index="3" type="Boolean" optional="true"/>
    
</method>
    
<method name="willTrigger" declaredBy="test::BindablePropertity" returnType="Boolean">
      
<parameter index="1" type="String" optional="false"/>
    
</method>
    
<accessor name="list" access="readwrite" type="mx.collections::ArrayCollection" declaredBy="test::BindablePropertity">
      
<metadata name="Bindable">
        
<arg key="event" value="propertyChange"/>
      
</metadata>
    
</accessor>
    
<method name="addEventListener" declaredBy="test::BindablePropertity" returnType="void">
      
<parameter index="1" type="String" optional="false"/>
      
<parameter index="2" type="Function" optional="false"/>
      
<parameter index="3" type="Boolean" optional="true"/>
      
<parameter index="4" type="int" optional="true"/>
      
<parameter index="5" type="Boolean" optional="true"/>
    
</method>
    
<method name="dispatchEvent" declaredBy="test::BindablePropertity" returnType="Boolean">
      
<parameter index="1" type="flash.events::Event" optional="false"/>
    
</method>
  
</factory>
</type>


可以看出,增加了[Bindable]声明后,相当于这个类实现了IEventDispatcher接口,并且在数据发生变化时会分发propertyChange事件。这样,其他监听了这一事件的组件就可以在数据变化时得到通知。
    Flex组件的属性大多可以用花括号“{}”进行绑定,也可以将一个组件的属性绑定到另一个组件的属性。同样用describeType进行分析,可以看到:

 <accessor name="btn1" access="readwrite" type="mx.controls::Button" declaredBy="FlexFramework">
    
<metadata name="Bindable">
      
<arg key="event" value="propertyChange"/>
    
</metadata>
  
</accessor>

组件是通过监听propertyChange事件来更新数据的。但是前面的数据绑定声明并没有指定事件名称,这是因为[Bindable]是简化的写法,相当于[Bindable(event="propertyChange")]。这里的事件名称可以改变,但是Flex组件默认监听了名为propertyChange的事件,如果自己更改了事件名称,则必需在Flex中自己监听相应的事件并编写事件处理。
    下一篇将会介绍几个实际绑定的例子。

分享到:
评论

相关推荐

    flex数据绑定的原理

    在Flex开发中,数据绑定(Data Binding)是一种强大的机制,它允许UI组件的状态与应用程序的数据模型之间自动同步。数据绑定的原理是通过监听数据源的变化,并自动更新与之绑定的UI组件,反之亦然,从而简化了代码并...

    Flex Bind数据绑定实例代码

    本实例代码将深入探讨Flex中数据绑定的工作原理以及如何在ActionScript 3.0中实现它。 数据绑定的基本概念是将UI组件的属性(如文本框的文本)与应用程序中的数据源(如数组或对象的属性)关联起来。当数据源发生...

    flex企业应用开发笔记-数据绑定

    在Flex企业应用开发中,数据绑定是连接UI组件与数据模型的重要机制,使得视图能够自动反映模型的变化,反之亦然。这篇笔记主要探讨的是如何在Flex中实现数据绑定,以及其在实际应用中的作用。 数据绑定是Flex框架的...

    Flex Data Binding详解

    Flex Data Binding是Adobe Flex框架中的核心特性之一,它允许开发者创建数据驱动的应用程序,通过将UI组件的属性与数据模型的属性直接关联,实现实时的数据同步。在Flex中,数据绑定确保当数据源发生变化时,相关的...

    flex数据绑定

    Flex数据绑定是Adobe Flex应用程序开发中的核心特性,它允许开发者将UI组件的属性与应用程序的数据模型进行连接,实现数据的动态更新和可视化。在Flex中,数据绑定是一种声明性编程方式,极大地简化了用户界面与业务...

    数据处理和数据服务PPT课件.ppt

    在Flex 2中,可以通过“{}”语法、&lt;mx:Binding&gt;标签或ActionScript的BindingUtils类来实现数据绑定。 - **存储数据**:Flex利用数据模型来存储数据,这是一个ActionScript对象,可以定义属性来保存应用数据。数据...

    Flex4.0中文API.rar

    6. **Data Binding**:Flex 4.0的数据绑定机制更加灵活,支持双向数据绑定,使得视图和模型之间的数据同步更加自动化。 7. **BlazeDS集成**:BlazeDS是Flex与Java服务器通信的中间件,Flex 4.0中对BlazeDS的支持...

    flex builder 4 help

    7. **Data Binding(数据绑定)**:Flex 4的数据绑定机制允许属性之间的自动同步,简化了数据驱动组件的开发。开发者可以通过数据绑定将UI组件与后台数据源关联起来。 8. **Integration with other Adobe ...

    Flex4 中文API

    4. **Data Binding**:Flex4支持数据绑定,允许UI元素与数据模型直接关联,当数据模型改变时,UI会自动更新,反之亦然。这对于实现动态、响应式的用户界面非常有用。 5. **States and Effects**:Flex4引入了状态...

    绑定也疯狂 第二版

    在AS3.0中,绑定(Data Binding)是一种数据同步机制,用于在应用程序的不同部分之间自动同步数据变更,而不需要编写额外的代码来手动同步这些数据。绑定也疯狂第二版是一本关于AS3.0绑定问题的专业书籍,它旨在帮助...

    Flex入门教程,想学Flex的来啊!

    - Data Binding:数据绑定允许将组件属性与应用程序数据模型关联起来,实现数据的实时更新。 五、Flex开发流程 1. 创建新项目:在Flex Builder或Adobe IDEA中启动新项目,选择合适的Flex模板。 2. 设计界面:使用...

    flex项目源码(本人亲自测试可用)

    6. **Data Binding**:Flex支持数据绑定,使得UI组件的属性能够自动与应用程序数据模型同步,简化了数据驱动UI的开发。 7. **Flex Compiler**:编译器将MXML和ActionScript代码转换为SWF文件,这个文件可以在Web...

    flex有关的统计代码

    2. **数据绑定(Data Binding)**:Flex允许开发者将UI组件的属性直接绑定到数据源,当数据源变化时,UI会自动更新。这对于实时更新统计信息非常有用。 3. **事件处理(Event Handling)**:通过监听和响应用户操作...

    flex3.0资源1

    6. **Data Binding**:Flex 3.0 引入了强大的数据绑定机制,允许UI元素与后台数据模型自动同步,减少手动更新UI的工作量,提高代码的可维护性。 7. **Remoting and Web Services**:Flex 3.0 支持与服务器端的数据...

    Flex_API的架构图

    6. **Services and Data Binding**: Flex API支持与服务器端的数据交互,如WebService、AMF(Action Message Format)或Remote Object服务。数据绑定机制使得视图组件可以直接与数据源关联,实现数据的自动更新。 7...

    Flex4 Declarations in ActionScript

    在Flex4中,可以声明绑定表达式,实现视图和模型之间的数据自动更新。 6. Event Handling: 在Flex4中,事件处理也采用声明式方式。开发者可以声明监听器函数,直接在组件属性中指定要响应的事件和处理方法。这使得...

    flex文档中文的pdf文档

    4. Data Binding:数据绑定是Flex的一大特性,允许UI组件的状态自动反映模型数据的变化,反之亦然,降低了代码的复杂性。 5. ActionScript 3.0:作为Flex的主要编程语言,AS3提供了面向对象的编程支持,包括类、接口...

    flex4 视频教程截取的一些图片

    5. **Data Binding**:数据绑定是 Flex 4 中的核心特性,它允许视图和模型之间的双向通信,使得数据的改变能实时反映到界面上。 6. ** States 和 Layouts**:Flex 4 改进了状态管理和布局管理,开发者可以更精确地...

    使用Flex开发DataGrid分页控件应用支持客户端及服务端

    数据源通常通过Flex的Binding机制与DataGrid关联。对于服务端分页,需要在事件处理函数中构建HTTPService或WebService请求,将分页参数传递给服务器,然后处理返回的XML或JSON数据,更新DataGrid的dataProvider。 ...

Global site tag (gtag.js) - Google Analytics