`
lorry1113
  • 浏览: 262350 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex数据绑定

    博客分类:
  • flex
阅读更多
在Flex中,Flex数据绑定主要有四种方式,分别为:"{}"绑定表达式、[Bindable]绑定符号、<mx:Binding>标签和BindingUtils动态绑定,下面一一对这四种Flex数据绑定方式进行详细介绍。

Flex数据绑定

现在数据库或是某个文件里有一些数据需要显示在界面上该怎么办呢?我们的目的就是将这些数据设法放到界面上去可以显示出来,这个将数据放到界面上去的过程可以叫住Flex数据绑定。

在Flex应用中程序中,Flex数据绑定的实际是借助事件机制来完成的,当目标使用Flex数据绑定的时候,目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时,数据源会派发改变事件通知目标对象更新数据。实际开发中我们不需要去关注具体的实现过程,这个过程Flash/Flex会自动去完成。

在Flex中,Flex数据绑定主要有四种方式,分别为:"{}"绑定表达式、[Bindable]绑定符号、<mx:Binding>标签和BindingUtils动态绑定,下面一一对这四种Flex数据绑定方式进行详细介绍。

一、"{}"绑定表达式

Flex开发中,"{}"绑定表达式的应用是最为常见的,简单、方便。好比ASP.NET中的"<%%>"一样的功效。这里我就简单介绍下,在Flex下怎么使用"{}"绑定表达式来绑定数据。如有这样一个简单的需求,我们定义一个变量,通过"{}"绑定表达式将变量的值绑定到文本框或是按扭等类似的UI组件上,变量定义如下:

<mx:Script>  
<![CDATA[   
   [Bindable]   
    internalvartext:String="嗨,这是通过\"{}\"表达式绑定的!";   
]]>  
</mx:Script> 

如上定义了一个字符串的变量text,我们通过"{}"绑定表达式将其绑定在UI组件上呢?如下:
<mx:Button x="97" y="122" label="{this.text}" fontSize="12"/>  
<mx:Label x="97" y="152" text="{this.text}" fontSize="12"/>
<mx:Text x="97" y="178" text="{this.text}" fontSize="12"/>  
简洁、简单、方便且适用。OK,已经学到手了,那下面继续看看另一种绑定使用方式--绑定方法返回值。例如需要将一个方法的返回值通过"{}"绑定表达式进行Flex数据绑定,让其在UI组件上呈现该怎么做呢?如下方法定义:

private function BindText():String   
{   
      return "通过\"{}\"表达式绑定方法!";   
} 

其实和上面一样,直接将"{}"里的变量改为方法便OK,如下代码段:

<mx:Label x="114" y="277" text="{BindText()}" fontSize="12"/>
如上便完成了对方法的绑定,既将BindText()方法的值绑定在了Label组件上。


二、[Bindable]绑定符号

[Bindable]绑定符号在上面就已经出现过了,他的使用和作用也很容易掌握。如上示例,我们的目的是将定义的变量值绑定在UI组件上,如果要实现这个功能,直接将定义的变量通过"{}"绑定表达式进行Flex数据绑定是不能完成功能的,我们必须为所定义的变量标记[Bindable]。在Flex中,只有标记有[Bindable]的数据源才能进行Flex数据绑定(函数除外,上面示例中也证实了这一点),当然也可以是其他的数据源(xml,数据库,文件等不同地方不同类型的数据源)。

上面这样使用确实很简单,但还是需要更加深入的了解[Bindable]。当指定了[Bindable]的数据源发生改变的时候,仍然是通过所监听的事件方法来处理的“通知”,默认为"propertyChange"事件。如之前定义的变量text,那么完整的定义应该如下所示:

[Bindable(event="propertyChange")]
internal var text:String="嗨,这是通过\"{}\"表达式绑定的!";
“propertyChange”事件为默认事件,通常我们只需要使用简写形式[Bindable]就OK了。除此之外还需要注意两点(这里就不做介绍,在后续文章里我会详细介绍):

1、[Bindable]标签用于函数时,只能在setter和getter方式定义的函数前使用,这种绑定称之为函数级绑定。

2、[Bindable]标签用于公有类时,这个类的所有公共变量,setter和getter方式定义的函数都可以用于绑定。这种绑定称为对象级绑定。

三、<mx:Binding>标签

<mx:Binding>标签也是使用非常频繁的Flex数据绑定方式。到底怎么个用法呢?下面以两个小示例使用不同的数据源来进行Flex数据绑定演示。首先用<mx:Model>标签定义一个数据源(<mx:Model>标签就相当于的定义一个临时数据,这里不做详细介绍,不清楚它的作用的朋友请查阅相关资料学习)。<mx:Model>标签定义数据源如下:

<mx:Modelidmx:Modelid="books">  
  <Books>  
    <Book>  
      <Name>ActionScript3.0</Name>  
      <Author>张三</Author>  
    </Book>  
    <Book>  
      <Name>FlashCS3</Name>  
      <Author>李四</Author>  
    </Book>  
  </Books>  
</mx:Model> 

如上定义的数据源,通过<mx:Binding>标签来进行Flex数据绑定是很简单的,如下代码段:

<mx:Bindingsourcemx:Bindingsource="books.Book[0].Name"destination="txtName.text"/>  
<mx:Bindingsourcemx:Bindingsource="books.Book[1].Name"destination="txtAuthor.text"/>  
   
<mx:TextInputxmx:TextInputx="95"y="71"id="txtName"fontSize="12"/>  
<mx:TextInputxmx:TextInputx="95"y="115"id="txtAuthor"fontSize="12"/> 

<mx:Model>标签可以用来定义XML式的数据源,另外还可以通过编程的方式定义数据源或从数据库、文件或各种数据服务接口来获取数据源,下面是使用xml的数据源定义:

privatevarxml:XML=<Books>  
<Book>  
<Name>ActionScript3.0</Name>  
<Author>张三</Author>  
</Book>  
<Book>  
<Name>FlashCS3</Name>  
<Author>李四</Author>  
</Book>  
</Books> 
绑定xml对象的数据和通过<mx:Model>标签定义的数据源没什么区别,详细如下代码块:

<mx:Bindingsourcemx:Bindingsource="xml.Book[0].Name"destination="txtXmlName.text"/>  
<mx:Bindingsourcemx:Bindingsource="xml.Book[1].Name"destination="txtXmlAuthor.text"/>  
<mx:TextInputxmx:TextInputx="95"y="177"id="txtXmlName"fontSize="12"/>  
<mx:TextInputxmx:TextInputx="95"y="225"id="txtXmlAuthor"fontSize="12"/>  
四、BindingUtils与动态绑定

在Flex数据绑定中,动态绑定主要是通过BindingUtils类提供的两个静态方法来实现。该类位于包mx.binding.utils下,它提供了bindProperty()和bindSetter()两个静态方法来实现数据的动态绑定。

bindProperty()方法根据名称就可以看出大概意思,绑定属性。那实际开发中我们应该怎么应用他呢?其实很简单,一句话概括就是:将xx的YY属性绑定到AA的BB属性。更清楚的理解这句话的意思见下面代码片段:

<?xmlversionxmlversion="1.0"encoding="utf-8"?>  
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">  
<mx:Script>  
<![CDATA[   
importmx.binding.utils.BindingUtils;   
   
privatevarmyName:String="张三";   
   
internalfunctiononClick():void   
{   
BindingUtils.bindProperty(nameText,"text",btn,"label");   
}   
]]>  
</mx:Script>  
<mx:TextInputxmx:TextInputx="84"y="83"id="nameText"text=""/>  
<mx:Buttonxmx:Buttonx="102"y="153"label="动态绑定"id="btn"click="onClick()"/>  
</mx:Application>  
这段代码很简单,在界面上分别放置了输入组件和一个按扭组件,然后定义了一个字符串(String)类型的变量myName,最后通过按扭的单击事件将按扭的"label"属性绑定到输入组件的"text"属性上。其实onClick()方法里的代码和下面这一句代码是完全等价的:

this.nameText.text=this.btn.label; 
bindSetter()方法的使用也很简单,该Flex数据绑定方法绑定数据需要与setter类似的方法结合,将外部传递进去的参数进行方法委托实现数据的动态绑定,拿上面将按扭显示值绑定到文本输入组件的值的示例来说,只需要定义一个setter的方法,该bindProperty()方法为bindSetter()方法既可,详细见下面代码片段:

<?xmlversionxmlversion="1.0"encoding="utf-8"?>  
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">  
<mx:Script>  
<![CDATA[   
importmx.binding.utils.BindingUtils;   
   
privatevarmyName:String="张三";   
   
internalfunctiononClick():void   
{   
//BindingUtils.bindProperty(nameText,"text",btn,"label");   
BindingUtils.bindSetter(bindText,btn,"label");   
}   
   
internalfunctionbindText(text:String):void   
{   
this.nameText.text=text;   
}   
]]>  
</mx:Script>  
<mx:TextInputxmx:TextInputx="84"y="83"id="nameText"text=""/>  
<mx:Buttonxmx:Buttonx="102"y="153"label="动态绑定"id="btn"click="onClick()"/>  
</mx:Application>  
分享到:
评论
1 楼 shuai0420 2012-02-19  

相关推荐

    flex数据绑定的原理

    6. **性能优化**:Flex数据绑定系统还包含了一些性能优化,比如变化传播的限制和缓存机制,以避免不必要的更新和提高效率。 7. **表达式绑定**:除了简单的变量绑定,Flex还支持复杂的表达式绑定,可以连接多个数据...

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

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

    FLEX数据绑定四种方式

    ### FLEX数据绑定四种方式详解 #### 一、概述 数据绑定是现代应用程序开发中一个重要的概念和技术。在Flex框架中,数据绑定被广泛应用来连接数据源与用户界面(UI)元素,使得数据能够实时更新并反映到界面上。本文将...

    flex数据绑定 pdf

    Flex数据绑定是Adobe Flex框架中的核心特性之一,它允许开发者将UI组件的显示状态与应用程序的数据模型紧密关联,实现数据的动态更新。这份名为“FLEX数据绑定专题”的PDF文档,很可能深入探讨了这一主题,提供了...

    flex 数据绑定 dataGrid.rar

    Flex数据绑定是Adobe Flex开发中的核心特性之一,它允许开发者将UI组件的属性与应用程序的数据模型直接关联。在本示例中,我们关注的是如何在Flex中使用数据绑定技术来操作DataGrid组件,这是一个用于展示表格数据的...

    Flex数据绑定专题

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

    FLEX数据绑定专题

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

    FLEX 数据绑定专题一(转)

    本文将深入探讨“FLEX数据绑定”这一专题,它是一种强大的机制,允许视图与模型之间的自动同步,使得开发者能够更加专注于业务逻辑而不是繁琐的同步操作。本文是系列文章的第一部分,主要介绍数据绑定的基本概念、...

    Flex数据绑定[收集].pdf

    Flex数据绑定是软件开发中Adobe Flex或Adobe AIR应用程序的核心特性,它允许数据在不同对象之间自动同步。数据绑定简化了用户界面(UI)组件与数据源之间的交互,减少了手动更新的需要。然而,如果不理解其工作原理...

    Flex 数据绑定

    在本文中,我们将深入探讨Flex数据绑定的原理、使用方式以及它在实际开发中的应用。 1. 数据绑定概念 数据绑定是将UI组件(视图)的状态与应用程序数据(模型)关联起来的技术。在Flex中,数据绑定是一种声明性编程...

    flex3 数据绑定 总结

    总的来说,Flex 3 的数据绑定是一种强大的机制,它简化了应用程序中数据流的管理。通过 MXML 或 ActionScript,开发者可以选择最适合其需求的方式来实现数据绑定,从而提高代码的可读性和可维护性。无论是简单的属性...

    Flex Bind数据绑定实例代码

    Flex Bind数据绑定是Adobe Flex应用程序开发中的核心特性,它允许开发者在用户界面组件和应用程序模型之间建立动态连接,实现数据的自动同步。这种强大的功能极大地简化了编程逻辑,特别是处理用户交互和数据更新时...

    Flex初级数据绑定代码

    ### Flex初级数据绑定代码解析 #### 一、概述 本文将详细介绍一个Flex应用程序中的初级数据绑定实例。通过分析HelloWorld2.mxml文件,我们将深入了解Flex中的数据绑定机制及其基本用法。 #### 二、Flex与数据绑定...

    flex页面跳转及数据绑定

    在Flex开发中,页面跳转和数据绑定是两个核心概念,它们对于构建动态且交互性强的应用至关重要。让我们分别深入探讨这两个主题。 首先,Flex页面跳转。在Flex中,有多种方式来实现场景间的切换: 1. **ViewStack...

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

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

    Flex高级数据绑定实例(界面语言切换)

    ### Flex高级数据绑定实例——界面语言切换 #### 概述 在Flex开发中,实现界面的多语言切换是一项常见的需求。本示例通过一个具体的代码片段来展示如何使用Flex中的高级数据绑定技术来实现这一功能。该示例不仅...

    Flex常用教程及库

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

Global site tag (gtag.js) - Google Analytics