參考:ADOBE FLEX 3 DEVELOPER GUIDE
1.什么是數(shù)據(jù)綁定?
Data binding is the process of tying the data in one object to another object.
數(shù)據(jù)綁定是一個對象的數(shù)據(jù)捆綁到另一個對象上的進(jìn)程。
2.數(shù)據(jù)綁定的作用
It provides a convenient way to pass data between the different layers of the application.
數(shù)據(jù)綁定提供了一個在程序的各個層面之間傳遞數(shù)據(jù)的便利方法
3.數(shù)據(jù)綁定的機(jī)制
Data binding requires a source property, a destination property, and a triggering
event that indicates when to copy the data from the source to the destination. An
object dispatches the triggering event when the source property changes.
數(shù)據(jù)綁定要求一個源屬性,一個目的屬性和一個觸發(fā)事件。這個觸發(fā)事件指示從源屬性復(fù)制數(shù)據(jù)到目的屬性上。當(dāng)源屬性改變時一個對象派發(fā)這個觸發(fā)事件。
4.數(shù)據(jù)綁定的定義方式
1)句法:大括號{}
2)MXML標(biāo)簽:<mx:Binding>
3)AS類: mx.binding.utils.BindingUtils
5.數(shù)據(jù)綁定的發(fā)生時機(jī)
1) The binding source dispatches an event because the source has been modified.
綁定源改變后派發(fā)事件
This event can occur at any time during application execution.
這個事件在程序運(yùn)行的任何時間都可發(fā)生。
2)At application startup when the source object dispatches the initialize event.
程序啟動時源對象派發(fā)初始化事件
All data bindings are triggered once at application startup to initialize the
所有的數(shù)據(jù)綁定在程序啟動初始化目的屬性時都會被觸發(fā)一次。
6.綁定屬性
1)Using data binding with data models
綁定數(shù)據(jù)model
2) Binding a source property to more than one destination property
一對多綁定
3)Binding more than one source property to a destination property
多對一綁定
4)Defining bidirectional bindings
雙向綁定
eg:
7.綁定函數(shù)
1)Using functions that take bindable properties as arguments
2) Binding to functions in response to a data-binding event
8.綁定對象
1) Binding to Objects
2) Binding to properties of Objects
綁定對象的屬性,可使用元素標(biāo)簽[Bindable]在對象所在的類的定義前。則這個對象的所有
公有屬性都被綁定。
9.綁定數(shù)組
1) Binding to arrays
2) Binding to array elements
10.綁定元素標(biāo)簽
句法:[Bindable] 或 [Bindable(event="eventname")]
[Bindable]是[Bindable(event="propertyChange")]的簡寫。當(dāng)被綁定的屬性發(fā)生改變時,F(xiàn)lex
會派發(fā)事件觸發(fā)綁定。
主要有三種使用情況:
1) 在屬性定義前 2) 類定義前 3)getter 或 setter 方法前
可以使用MX標(biāo)簽綁定,也可以使用BindUtil來進(jìn)行綁定,下面是我做的一個例子,實(shí)現(xiàn)BO與頁面空間的自動雙向綁定:
BO定義:
package com.bankcomm.icms.domain.migrate
{
[Bindable]
public class Bo {
private var _property0:String = "";
private var _property1:int = 0;
private var _property2:String = "";
public var className:String = "Bo";
public var propertyNames:Array = ["property0", "property1", "property2"];
public function Bo() {}
public function set property0(value:String):void{
this._property0 = value;
}
public function get property0():String{
return this._property0;
}
public function set property1(value:int):void{
this._property1 = value;
}
public function get property1():int{
return this._property1;
}
public function set property2(value:String):void{
this._property2 = value;
}
public function get property2():String{
return this._property2;
}
}
}
下面是應(yīng)用代碼:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script>
<![CDATA[
import com.bankcomm.icms.domain.migrate.Bo;
import com.bankcomm.icms.common.DataDict;
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
private var bo:Bo = new Bo();
function init():void {
autowireBindObject(bo);
}
function autowireBindCollection(arr:ArrayCollection):void {
}
function autowireBindObject(bo:Object) {
for each(var propertyName:String in bo.propertyNames) {
var elem:Object = this[bo.className + "_" + propertyName];
if(elem==null) continue;
var value = bo[propertyName];
if(elem instanceof ComboBox) {
ComboBox(elem).dataProvider = DataDict.dictYesNo;
BindingUtils.bindProperty(elem, "selectedIndex", bo, propertyName, false);
BindingUtils.bindProperty(bo, propertyName, ComboBox(elem), "selectedIndex",false);
} else if(elem instanceof TextInput) {
BindingUtils.bindProperty(elem, "text", bo, propertyName, false);
BindingUtils.bindProperty(bo, propertyName, TextInput(elem), "text", false);
} else if(elem instanceof DateField) {
BindingUtils.bindProperty(elem, "text", bo, propertyName, false);
BindingUtils.bindProperty(bo, propertyName, DateField(elem), "text", false);
} else {
}
}
}
function chageModelAndUpdateUI() {
bo.property0 = "xxx";
bo.property1 = 1;
bo.property2 = "2009-02-10";
}
function chageUIAndUpdateModel():void {
var a = bo.property1;
}
]]>
</mx:Script>
<mx:TextInput id="Bo_property0" x="65" y="10"/>
<mx:ComboBox id="Bo_property1" x="65" y="51" width="160"/>
<mx:DateField id="Bo_property2" x="65" y="92" width="160"/>
<mx:Button x="65" y="133" label="模型改變更新UI" click="chageModelAndUpdateUI();" />
<mx:Button x="179" y="133" label="UI改變更新模型" click="chageUIAndUpdateModel();" />
</mx:Application>