ActionScript 3.0 Step By Step系列(八)：动态的数据展现源于灵活的数据绑定

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

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

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

一、"{}"绑定表达式

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

      <mx:Script>
          <![CDATA[
              [Bindable]
                  internal var text: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，已经学到手了，那下面继续看看另一种绑定使用方式--绑定方法返回值。例如需要将一个方法的返回值通过"{}"绑定表达式进行数据绑定，让其在UI组件上呈现该怎么做呢？如下方法定义：

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

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

     <mx:Label x="114" y="277" text="{BindText()}" fontSize="12"/>

     如上便完成了对方法的绑定，既将BindText()方法的值绑定在了Label组件上。
          

二、[Bindable]绑定符号

      [Bindable]绑定符号在上面就已经出现过了，他的使用和作用也很容易掌握。如上示例，我们的目的是将定义的变量值绑定在UI组件上，如果要实现这个功能，直接将定义的变量通过"{}"绑定表达式进行数据绑定是不能完成功能的，我们必须为所定义的变量标记[Bindable]。在Flex中，只有标记有[Bindable]的数据源才能进行数据绑定（函数除外，上面示例中也证实了这一点），当然也可以是其他的数据源（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>标签也是使用非常频繁的数据绑定方式。到底怎么个用法呢？下面以两个小示例使用不同的数据源来进行数据绑定演示。首先用<mx:Model>标签定义一个数据源（<mx:Model>标签就相当于的定义一个临时数据，这里不做详细介绍，不清楚它的作用的朋友请查阅相关资料学习）。<mx:Model>标签定义数据源如下：

 1     <mx:Model id="books">
 2         <Books>
 3             <Book>
 4                 <Name>ActionScript 3.0</Name>
 5                 <Author>张三</Author>
 6             </Book>
 7             <Book>
 8                 <Name>Flash CS 3</Name>
 9                 <Author>李四</Author>
             </Book>
         </Books>
     </mx:Model>

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

     <mx:Binding source="books.Book[0].Name" destination="txtName.text" />
     <mx:Binding source="books.Book[1].Name" destination="txtAuthor.text" />
     
     <mx:TextInput x="95" y="71" id="txtName" fontSize="12"/>
     <mx:TextInput x="95" y="115" id="txtAuthor" fontSize="12"/>

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

 1     private var xml:XML=<Books>
 2                             <Book>
 3                                 <Name>ActionScript 3.0</Name>
 4                                 <Author>张三</Author>
 5                             </Book>
 6                             <Book>
 7                                 <Name>Flash CS 3</Name>
 8                                 <Author>李四</Author>
 9                             </Book>
                         </Books>

     绑定xml对象的数据和通过<mx:Model>标签定义的数据源没什么区别，详细如下代码块：

     <mx:Binding source="xml.Book[0].Name" destination="txtXmlName.text" />
     <mx:Binding source="xml.Book[1].Name" destination="txtXmlAuthor.text" />
     <mx:TextInput x="95" y="177" id="txtXmlName" fontSize="12"/>
     <mx:TextInput x="95" y="225" id="txtXmlAuthor" fontSize="12"/>

四、BindingUtils与动态绑定 

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

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

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 3     <mx:Script>
 4         <![CDATA[
 5             import mx.binding.utils.BindingUtils;
 6             
 7             private var myName:String = "张 三"; 
 8             
 9             internal function onClick():void
             {
                 BindingUtils.bindProperty(nameText,"text",btn,"label");
             }
         ]]>
     </mx:Script>
     <mx:TextInput x="84" y="83" id="nameText" text=""/>
     <mx:Button x="102" y="153" label="动态绑定"  id="btn" click="onClick()"/>    
 </mx:Application>

     这段代码很简单，在界面上分别放置了输入组件和一个按扭组件，然后定义了一个字符串(String)类型的变量myName，最后通过按扭的单击事件将按扭的"label"属性绑定到输入组件的"text"属性上。其实onClick()方法里的代码和下面这一句代码是完全等价的：

 this.nameText.text = this.btn.label;

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

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 3     <mx:Script>
 4         <![CDATA[
 5             import mx.binding.utils.BindingUtils;
 6             
 7             private var myName:String = "张 三"; 
 8             
 9             internal function onClick():void
             {
                 //BindingUtils.bindProperty(nameText,"text",btn,"label");
                 BindingUtils.bindSetter(bindText,btn,"label");
             }
             
             internal function bindText(text:String):void
             {
                 this.nameText.text = text;
             }
         ]]>
     </mx:Script>
     <mx:TextInput x="84" y="83" id="nameText" text=""/>
     <mx:Button x="102" y="153" label="动态绑定"  id="btn" click="onClick()"/>    
 </mx:Application>

五、自定义数据绑定

     自定义数据绑定这里只是提出，不作详细介绍，我将放在后续组件相关文章里去介绍。

     关于数据绑定主要的几种绑定方式就介绍于此，实际项目开发中无外也是使用这些方式来进行数据绑定，在后续的文章里也将会用到这些技术点，有兴趣的请关注后续文章。

注：原创文章欢迎转载，本文版权归作者和博客园共有，转载务必注明文章出处。  

     作     者：Beniao

     文章出处：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/