数据绑定定义：
幻灯片 2
当数据源对象的数据发生变化时，目标对象的数据会自动更新，而不需要我们再编写代码去强制更新
绑定实际也是借助事件机制来完成的，当目标使用了数据绑定的时候，目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时，数据源会派发改变事件（ChangeEvent），通知目标对象更新数据。这个过程由Flex完成，不用我们手动干预。
绑定的前提条件：
源对象的数据和目标对象的数据格式相同。
方法：
1 在对象的属性标签中,使用{ }把数据源直接绑定到对象的某个属性上。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HSlider x="47" y="170" width="283" id="fsize" minimum="10" maximum="50" />
<mx:Label x="47" y="34" text="Bingo" fontSize="{fsize.value}" width="306" height="91" id="msg" color="#F15906" fontWeight="bold"/>
</mx:Application>
2 在对象的属性标签中,使用{ }把某个函数的返回值作为数据源绑定到对象属性上。函数的参数要使用[Bindable]绑定符号
[Bindable]，[Bindable(event=“eventname”)]Event表示当数据源发生变化时，数据源所在对象派发的事件类型，它是可选项，默认的事件名是“propertyChange”，一般情况下只需要使用[Bindable]标签
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4 <mx:Script>
5 <![CDATA[
6
7 [Bindable]
8 private var n:int;
9
10 internal function square(num:int):int{
11 return num*num;
12 }
13 ]]>
14 </mx:Script>
15
16
17 <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
18 snapInterval="1" id="s_num" change="{n=s_num.value}"/>
19 <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(n)}"/>
20 <mx:Label x="66" y="53" text="结果" width="48" fontSize="12" fontWeight="bold"/>
21
22 </mx:Application>
23
仿Java Getters&Setters
package com.classes
{
[Bindable]
public class BindClass
{
public var n:int;
public function BindClass()
{
}
//[Bindable]
public function get N():int{
return n;
}
public function set N(x:int):void{
n=x;
}
}
}
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4 <mx:Script>
5 <![CDATA[
6
7 import com.classes.BindClass;
8 internal var bc:BindClass=new BindClass();
9
10
11 internal function square(num:int):int{
12 return num*num;
13 }
14 ]]>
15 </mx:Script>
16
17
18 <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
19 snapInterval="1" id="s_num" change="{bc.n=s_num.value}"/>
20 <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(bc.n)}"/>
21 <mx:Label x="66" y="53" text="结果" width="48" fontSize="12" fontWeight="bold"/>
22
23 </mx:Application>
24
3 使用标签
<mx:Binding>
source=“…” destination=“…”
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()">
<mx:Model id="books">
<books>
<book>
<name>城市</name>
<author>张悬</author>
</book>
<book>
<name>鱼</name>
<author>陈绮贞</author>
</book>
</books>
</mx:Model>
<mx:Binding source="books.book[0].name" destination="txt_name.text"/>
<mx:Binding source="books.book[0].author" destination="txt_author.text"/>
<mx:Panel x="44" y="24" width="379" height="178" layout="absolute" title="专辑信息" fontSize="12">
<mx:Label x="58" y="36" text="专辑" fontSize="12" fontWeight="bold"/>
<mx:Label x="58" y="71" text="作者" fontSize="12" fontWeight="bold"/>
<mx:TextInput x="111" y="36" id="txt_name" fontSize="12"/>
<mx:TextInput x="111" y="71" id="txt_author" fontSize="12"/>
</mx:Panel>
</mx:Application>
posted on 2010-03-06 14:48
Ying-er 阅读(414)
评论(0) 编辑 收藏 所属分类:
Flex3.0