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

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

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

　　、"{}"绑定表达式

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

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

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

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

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

1　　privatefunctionBindText:String
2　　{
3　　　　"通过"{}"表达式绑定思路方法！";
4　　}

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

　　<mx:Labelx="114"y="277"text="{BindText}"fontSize="12"/>

　　如上便完成了对思路方法绑定既将BindText思路方法值绑定在了Label组件上

　　 2、[Bindable]绑定符号

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

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

　　1　　[Bindable(event="propertyChange")]

　　2　　ernalvartext:String="嗨这是通过"{}"表达式绑定!";

　　“propertyChange”事件为默认事件通常我们只需要使用简写形式[Bindable]就OK了除此的外还需要注意两点(这里就不做介绍在后续文章里我会详细介绍):

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

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

　　 3、<mx:Binding>标签

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

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

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

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

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

1　　privatevarxml:XML=<Books>
2　　　　　　　　　　　　　　<Book>
3　　　　　　　　　　　　　　　　<Name>ActionScript3.0</Name>
4　　　　　　　　　　　　　　　　<Author>张 3</Author>
5　　　　　　　　　　　　　　</Book>
6　　　　　　　　　　　　　　<Book>
7　　　　　　　　　　　　　　　　<Name>FlashCS3</Name>
8　　　　　　　　　　　　　　　　<Author>李 4</Author>
9　　　　　　　　　　　　　　</Book>
10　　　　　　　　　　　　</Books>

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

1　　<mx:Bindingsource="xml.Book[0].Name"destination="txtXmlName.text"/>
2　　<mx:Bindingsource="xml.Book[1].Name"destination="txtXmlAuthor.text"/>
3　　<mx:TextInputx="95"y="177"id="txtXmlName"fontSize="12"/>
4　　<mx:TextInputx="95"y="225"id="txtXmlAuthor"fontSize="12"/>

　　 4、BindingUtils和动态绑定

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

　　bindProperty()思路方法根据名称就可以看出大概意思绑定属性那实际开发中我们应该如何应用他呢？其实很简单句话概括就是:将xxYY属性绑定到AABB属性更清楚理解这句话意思见下面代码片段:

1<?xmlversion="1.0"encoding="utf-8"?>
2<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
3　　<mx:Script>
4　　　　<![CDATA[
5　　　　　　importmx.binding.utils.BindingUtils;
6　　　　　　
7　　　　　　privatevarmyName:String="张 3";
8　　　　　　
9　　　　　　ernalfunctiononClick:void
10　　　　　　{
11　　　　　　　　BindingUtils.bindProperty(nameText,"text",btn,"label");
12　　　　　　}
13　　　　]]>
14　　</mx:Script>
15　　<mx:TextInputx="84"y="83"id="nameText"text=""/>
16　　<mx:Buttonx="102"y="153"label="动态绑定"　id="btn"click="onClick"/>　　
17</mx:Application>

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

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

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

1<?xmlversion="1.0"encoding="utf-8"?>
2<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
3　　<mx:Script>
4　　　　<![CDATA[
5　　　　　　importmx.binding.utils.BindingUtils;
6　　　　　　
7　　　　　　privatevarmyName:String="张 3";
8　　　　　　
9　　　　　　ernalfunctiononClick:void
10　　　　　　{
11　　　　　　　　//BindingUtils.bindProperty(nameText,"text",btn,"label");
12　　　　　　　　BindingUtils.bindSetter(bindText,btn,"label");
13　　　　　　}
14　　　　　　
15　　　　　　ernalfunctionbindText(text:String):void
16　　　　　　{
17　　　　　　　　this.nameText.text=text;
18　　　　　　}
19　　　　]]>
20　　</mx:Script>
21　　<mx:TextInputx="84"y="83"id="nameText"text=""/>
22　　<mx:Buttonx="102"y="153"label="动态绑定"　id="btn"click="onClick"/>　　
23</mx:Application>

　　 5、自定义数据绑定

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

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

　　文章出处:http://beniao.cnblogs.com/

　　相关文章:

　　ActionScript 3.0 Step By Step系列( 9):使用样式(style)和皮肤(Skin)两大画笔为应用界面画妆　　　

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

　　ActionScript 3.0 Step By Step系列( 7):使用XML和XMLList类处理XML数据　　　

　　ActionScript 3.0 Step By Step系列( 6):学对象事件模型从点击按扭开始　　

　　ActionScript 3.0 Step By Step系列( 5):走在面向对象开发路上,以类为基础去研究编程问题 　　

　　ActionScript 3.0 Step By Step系列( 4):来自面向对象开发的前呐喊:“学会写可重用代码”　　　

　　ActionScript 3.0 Step By Step系列( 3):学学流程控制编编- & switch & while & for　　　



　　ActionScript 3.0 Step By Step系列( 2):建立扎实ActionScript 3.0语法基础　　　

　　ActionScript 3.0 Step By Step系列():工欲其善,先利其器(Flex Builder)　　

　　相关资源 :

　　Flash ActionScript 3.0(1) - 数据类型、操作符和流程控制语句

　　Flash ActionScript 3.0(2) - 包、类、包外类、命名空间、属性、思路方法、接口和继承

　　Flash ActionScript 3.0(3) - 以文本形式、XML形式和JSON形式和ASP.NET通信