三、<mx:Binding>标签
<mx:Binding>标签也是使用非常频繁的数据绑定方式。到底怎么个用法呢?下面以两个小示例使用不同的数据源来进行数据绑定演示。首先用<mx:Model>标签定义一个数据源(<mx:Model>标签就相当于的定义一个临时数据,这里不做详细介绍,不清楚它的作用的朋友请查阅相关资料学习)。<mx:Model>标签定义数据源如下:
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 >
10 </ Book >
11 </ Books >
12 </ mx:Model >
如上定义的数据源,通过<mx:Binding>标签来进行数据绑定是很简单的,如下代码段:
2 < mx:Binding source = " books.Book[1].Name " destination = " txtAuthor.text " />
3
4 < mx:TextInput x = " 95 " y = " 71 " id = " txtName " fontSize = " 12 " />
5 < mx:TextInput x = " 95 " y = " 115 " id = " txtAuthor " fontSize = " 12 " />
<mx:Model>标签可以用来定义XML式的数据源,另外还可以通过编程的方式定义数据源或从数据库、文件或各种数据服务接口来获取数据源,下面是使用xml的数据源定义:
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 >
10 </ Books >
绑定xml对象的数据和通过<mx:Model>标签定义的数据源没什么区别,详细如下代码块:
2 < mx:Binding source = " xml.Book[1].Name " destination = " txtXmlAuthor.text " />
3 < mx:TextInput x = " 95 " y = " 177 " id = " txtXmlName " fontSize = " 12 " />
4 < mx:TextInput x = " 95 " y = " 225 " id = " txtXmlAuthor " fontSize = " 12 " />
四、BindingUtils与动态绑定
在Flex中,动态绑定主要是通过BindingUtils类提供的两个静态方法来实现。该类位于包mx.binding.utils下,它提供了bindProperty()和bindSetter()两个静态方法来实现数据的动态绑定。
bindProperty()方法根据名称就可以看出大概意思,绑定属性。那实际开发中我们应该怎么应用他呢?其实很简单,一句话概括就是:将xx的YY属性绑定到AA的BB属性。更清楚的理解这句话的意思见下面代码片段:
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
10 {
11 BindingUtils.bindProperty(nameText, " text " ,btn, " label " );
12 }
13 ]] >
14 </ mx:Script >
15 < mx:TextInput x = " 84 " y = " 83 " id = " nameText " text = "" />
16 < mx:Button x = " 102 " y = " 153 " label = " 动态绑定 " id = " btn " click = " onClick() " />
17 </ mx:Application >
这段代码很简单,在界面上分别放置了输入组件和一个按扭组件,然后定义了一个字符串(String)类型的变量myName,最后通过按扭的单击事件将按扭的"label"属性绑定到输入组件的"text"属性上。其实onClick()方法里的代码和下面这一句代码是完全等价的:
bindSetter()方法的使用也很简单,该方法绑定数据需要与setter类似的方法结合,将外部传递进去的参数进行方法委托实现数据的动态绑定,拿上面将按扭显示值绑定到文本输入组件的值的示例来说,只需要定义一个setter的方法,该bindProperty()方法为bindSetter()方法既可,详细见下面代码片段:
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
10 {
11 // BindingUtils.bindProperty(nameText,"text",btn,"label");
12 BindingUtils.bindSetter(bindText,btn, " label " );
13 }
14
15 internal function bindText(text:String): void
16 {
17 this .nameText.text = text;
18 }
19 ]] >
20 </ mx:Script >
21 < mx:TextInput x = " 84 " y = " 83 " id = " nameText " text = "" />
22 < mx:Button x = " 102 " y = " 153 " label = " 动态绑定 " id = " btn " click = " onClick() " />
23 </ mx:Application >