`
xiao_feng68
  • 浏览: 104320 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

(XF - 2)Flex中Bindable的原理

    博客分类:
  • Flex
阅读更多
[Bindable]:元数据标签,它在代码中的作用就是向编译器提供如何编译程序的信息。它的最大作用是使程序组件间的数据同步变得容易。在开发中通常用上Bindable作用在视图控件上,如给它绑定一个对象,则以后只需要在逻辑层更改这个对象的值,则视图层的控件数据会自动更新(同步),而不再需要手动去更新视图。

现在来探索一下Bindable的工作原理:

先来实现一个简单的绑定例子:

    <mx:Script>
        <![CDATA[

          [Bindable]
          private var bind_String:String="hi";
         
          private function onChange():void
          {
               bind_String = "hello";

          }
        ]]>   
    </mx:Script> 
   
    <mx:Text text="{bind_String}">
    <mx:Button click="onChange()">

单击按钮则改变了text的文字,这个就是bindable。那么它是怎样工作的呢?以下是flex编译器处理后的代码:

          [Bindable(event="propertyChange")]
          private var bind_String:String="hi";
         
          private function onChange():void
          {
               var oldValue:String = bind_String;
               bind_String = "hello";
              if(bind_String!==oldValue) {
                  this.dispatchEvent(PropertyChangeEvent.createUpdateEvent(this,
                  "bind_String", oldValue, bind_String));
              }
          }

由上面可以看到数据源更改的时候抛出了一个PropertyChangeEvent事件,通知事件侦听器该数据源发生了变化,并更新视图。

“这也说明了,绑定不过是事件游戏而已,flex为用户隐藏了很多底层算法。”这句概括说明了Bindable的原理。
分享到:
评论

相关推荐

    AngularJS基础 ng-non-bindable 指令详细介绍

    2. 在文档或教程中演示Angular语法,避免表达式被意外执行。 3. 防止用户输入的数据被错误地解释为Angular表达式,提高安全性。 `ng-non-bindable`指令的语法非常简单,只需要在需要禁用编译的元素上添加该指令即可...

    how-to-read-a-local-xml-file-with-flex.pdf

    在本教程中,我们将探讨如何使用Adobe Flex框架来读取一个本地XML文件。此过程对于那些希望利用Flex的强大功能处理数据的应用开发者来说非常有用。 #### 创建XML文件 首先,我们需要创建一个XML文件。在本例中,...

    flex数据绑定的原理

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

    Flex创建精美相册(HorizontalList)

    在本文中,我们将深入探讨如何使用Flex技术来创建一个精美的相册,特别是利用HorizontalList组件。Flex是一种基于ActionScript的开发框架,广泛用于构建富互联网应用程序(RIA)。HorizontalList是Flex提供的一种...

    Flex Bindable 的用法

    `[Bindable]`是Flex中最常用的元数据之一,它主要用于实现数据绑定功能。数据绑定是Flex应用中的核心概念,它允许视图组件与应用程序模型之间的数据自动同步。 元数据不是语言本身的一部分,而是为编译器设计的,...

    flex4-binding-custom-Class.rar_flex_flex4

    在Flex 4中,数据绑定是一项强大的特性,它允许开发者创建动态、响应式的用户界面,无需编写大量的事件处理代码。本教程将深入讲解如何在Flex 4中对自定义类进行数据绑定,通过一个实际的MXML文件和AS文件示例来阐述...

    Flex-Jsp-Mysql简单结合例子

    根据给定的信息,本文将详细解释“Flex-Jsp-Mysql简单结合例子”这一主题,包括Flex、JSP以及MySQL在项目中的应用与交互,并重点分析MVC架构在Flex中的实现方式。 ### Flex简介 Flex是一种用于构建跨浏览器、跨...

    flex与JS交互示例

    在本示例中,我们将深入探讨如何实现这种交互,并通过具体的步骤来理解其工作原理。 首先,Flex是一个开源的富互联网应用程序(RIA)框架,它基于ActionScript编程语言和Flex SDK,主要用于创建具有丰富用户体验的...

    Flex和java交互的示例代码

    2. **发送请求**:Flex客户端发送请求至Java服务器,请求获取数据。 3. **处理请求**:Java服务器端处理请求,执行相应的业务逻辑,如调用`getAllList`方法获取数据。 4. **返回结果**:Java服务器将数据通过AMF格式...

    Flex4 AIP 中文说明

    2. **图形渲染**:Flex4 引入了Graphical Element(GE)和Visual Element(VE)概念,使用新的图形渲染层——StageVG,提高了图形绘制的性能。开发者可以使用ActionScript直接操作像素,实现复杂的图形和动画效果。 ...

    flex中actionscript动态调用remoteobject类

    ### Flex中ActionScript动态调用RemoteObject类 在Flex中,使用ActionScript动态调用RemoteObject类是一种常见的实现客户端与服务器端交互的方式。通过这种方式,开发者可以在客户端灵活地调用服务器端的服务,并...

    Flex 2 中的元数据标签

    ### Flex 2 中的元数据标签 在Flex 2中,元数据标签是用于提供类、方法或属性的额外信息的一种特殊标记。这些标签通常位于类定义或成员声明之前,并被ActionScript编译器用来控制类的行为或者为开发工具提供有关...

    FLEX动态树 动态图表

    在Adobe Flex框架中,`Tree`控件被广泛用于展示层次结构的数据,如目录、组织结构等。本文将深入解析如何在Flex中创建并自定义动态树,以及如何通过事件处理实现更高级的功能,如动态图表的构建。 #### 一、树形...

    flex 异步加载tree

    根据给定的信息,我们可以深入探讨Flex中的异步加载Tree组件的相关知识点。 ### 一、Flex与AsyncTree组件 #### 1. Flex简介 Flex是一种开源的框架,用于构建跨平台的桌面应用程序和移动应用程序。它提供了强大的...

    Flex 3 Cookbook[中文版].pdf

    ### Flex 3 Cookbook[中文版] 关键知识点详解 #### 一、Flex 与 ActionScript 基础 - **Flex 的组成**:一个典型的 Flex 应用程序由两部分组成——ActionScript 和 MXML。从 Flex 3 开始,ActionScript 成为了一个...

    Flex图片上传实例

    此实例不仅提供了一个实际的上传图片的应用场景,而且还包含了一些实用的代码片段,这对于想要了解如何在Flex中实现图片上传功能的开发者来说非常有价值。 #### 标题解析:“Flex图片上传实例” 该标题简洁明了地...

    基于Flex的ArcGIS开发经典例子说明文档

    本案例旨在展示如何通过ArcGIS API for Flex在Flex应用程序中实现对自定义的ArcGIS.Server 9.3中发布的地图进行浏览,这是一项基础而重要的入门技能。 **准备工作:** 1. 在ArcGIS.Server 9.3中发布一个名为“usa”...

    Flex_2_中的元数据标签

    - **定义**:`[Bindable]` 是 Flex 2 中最常用的元数据标签之一,用于声明数据绑定。它可以应用于类成员变量,以便在变量值发生变化时触发事件,从而实现组件间的数据同步。 - **用途**: - **数据绑定**:通过 `...

Global site tag (gtag.js) - Google Analytics