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组件上，变量定义如下：

1<mx:Script>
2<![CDATA[
3[Bindable]
4internalvartext:String="嗨，这是通过\"{}\"表达式绑定的!";
5]]>
6</mx:Script>

如上定义了一个字符串的变量text，我们通过"{}"绑定表达式将其绑定在UI组件上呢？如下：

1<mx:Buttonxmx:Buttonx="97"y="122"label="{this.text}"fontSize="12"/>
2<mx:Labelxmx:Labelx="97"y="152"text="{this.text}"fontSize="12"/>
3<mx:Textxmx:Textx="97"y="178"text="{this.text}"fontSize="12"/>

简洁、简单、方便且适用。OK，已经学到手了，那下面继续看看另一种绑定使用方式--绑定方法返回值。例如需要将一个方法的返回值通过"{}"绑定表达式进行Flex数据绑定，让其在UI组件上呈现该怎么做呢？如下方法定义：

1privatefunctionBindText():String
2{
3return"通过\"{}\"表达式绑定方法！";
4}

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

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

二、[Bindable]绑定符号

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

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

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

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

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

三、<mx:Binding>标签

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

1<mx:Modelidmx:Modelid="books">
2<Books>
3<Book>
4<Name>ActionScript3.0</Name>
5<Author>张三</Author>
6</Book>
7<Book>
8<Name>FlashCS3</Name>
9<Author>李四</Author>
10</Book>
11</Books>
12</mx:Model>

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

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

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

1privatevarxml:XML=<Books>
2<Book>
3<Name>ActionScript3.0</Name>
4<Author>张三</Author>
5color: #00

  


  
    
    分享到：
      
      
    
  

  
    
      Flex数据绑定基础介绍
      |
      Flex effect 归纳
    
  
  
    
      2011-04-25 16:56
      浏览 707
      评论(0)
      
      
      分类:Web前端      
      查看更多