FLEX 数据绑定专题二(转)

3. 绑定到函数、对象和数组

  (1)绑定函数以响应数据绑定事件

可以把使用“不可绑定的参数”的函数作为数据绑定表达式的源。但是，必须有一种办法
能够激活这个函数以更新数据绑定的目的属性。
在下面的例子中，使用了[Bindable]元数据标记来指定Felx 调用isEnabled()函数以响应
myFlagChanged 事件。当myFlag 的 setter 方法被调用时，它就发出了一个myFlagChanged 事
件，这个事件触发任何使用isEnabled()函数作为源的数据绑定。
<?xml version="1.0"?>
<!-- binding/ASFunction.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.events.Event;
// Define a function that gets invoked
// in response to the myFlagChanged event.
[Bindable(event="myFlagChanged")]
private function isEnabled():String {
if (myFlag)
return 'true';
else
return 'false';
}
private var _myFlag:Boolean = false;
// Define a setter method that dispatches the
// myFlagChanged event to trigger the data binding.
public function set myFlag(value:Boolean):void {
_myFlag = value;
dispatchEvent(new Event("myFlagChanged"));
}
public function get myFlag():Boolean {
return _myFlag;
}
]]>
</mx:Script>
<!-- Use the function as the source of a data binding expression. -->
<mx:TextArea id="myTA" text="{isEnabled()}"/>
<!-- Modify the property, causing the setter method to
dispatch the myFlagChanged event to trigger data binding. -->
<mx:Button label="Clear MyFlag" click="myFlag=false;"/>
<mx:Button label="Set MyFlag" click="myFlag=true;"/>
</mx:Application>



(2)将对象用于数据绑定
当使用对象进行工作时，不得不考虑什么时候定义到这个对象的绑定？或者考虑什么时候
定义一个到这个对象属性的绑定？
绑定到对象
当使一个对象成为数据绑定表达式的源时，数据绑定发生在这个对象被更新之时，或者这
个对象的引用被更新之时，但不能发生在这个对象的单个（数据）域（feild）被更新之时。
下面的范例中，创建了Object 类的子类，这个子类带有两个属性，stringProp 和intProp，
但没有使这两个属性成为可绑定属性：
package myComponents
{
// binding/myComponents/NonBindableObject.as
// Make no class properties bindable.
public class NonBindableObject extends Object {
public function NonBindableObject() {
super();
}
public var stringProp:String = "String property";
public var intProp:int = 52;
}
}
因为这个类的两个属性不是可绑定属性，当它们被更新时Flex 不会发出事件去触发数据绑
定。接下来在Flex 应用中使用这个类，如下面的范例所示：
<?xml version="1.0"?>
<!-- binding/WholeObjectBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initObj();">
<mx:Script>
<![CDATA[
import myComponents.NonBindableObject;
[Bindable]
public var myObj:NonBindableObject = new NonBindableObject();
[Bindable]
public var anotherObj:NonBindableObject =
new NonBindableObject();
public function initObj():void {
anotherObj.stringProp = 'anotherObject';
anotherObj.intProp = 8;
}
]]>
</mx:Script>
<!-- Data binding updated at application startup. -->
<mx:Text id="text1" text="{myObj.stringProp}"/>
<!-- Data binding updated at application startup. -->
<mx:Text id="text2" text="{myObj.intProp}"/>
<!-- Data bindings to stringProp not updated. -->
<mx:Button label="Change myObj.stringProp"
click="myObj.stringProp = 'new string';"/>
<!-- Data bindings to intProp not updated. -->
<mx:Button label="Change myObj.intProp"
click="myObj.intProp = 10;"/>
<!-- Data bindings to myObj and to myObj properties updated. -->
<mx:Button label="Change myObj"
click="myObj = anotherObj;"/>
</mx:Application>
因为没有使NonBindableObject 类的单个数据域（fields）成为可绑定属性，所以应用在
两个Text 控件的绑定在应用启动时以及在myObj 被更新时才会被更新。在编译这个应用时，编
译器会输出警告信息，提示数据绑定机制不能检测stringProp 和intProp 属性的变化。



(3)绑定到对象的属性
为了使对象的属性可绑定，要创建新的类定义，如下面的范例所示：
package myComponents
{
// binding/myComponents/BindableObject.as
// Make all class properties bindable.
[Bindable]
public class BindableObject extends Object {
public function BindableObject() {
super();
}
public var stringProp:String = "String property";
public var intProp:int = 52;
}
}
通过在类定义之前放置[Bindable]元数据标记，就可以使得类中所有public 变量、以及所有
完全具备setter 及getter 的public 属性成为可绑定的属性。接下来就可以使用stringProp
和intProp 属性作为数据绑定的源，如下范例所示：
<?xml version="1.0"?>
<!-- binding/SimpleObjectBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initObj();">
<mx:Script>
<![CDATA[
import myComponents.BindableObject;
[Bindable]
public var myObj:BindableObject = new BindableObject();
[Bindable]
public var anotherObj:BindableObject =
new BindableObject();
public function initObj():void {
anotherObj.stringProp = 'anotherObject';
anotherObj.intProp = 8;
}
]]>
</mx:Script>
<!-- Data binding updated at application startup. -->
<mx:Text id="text1" text="{myObj.stringProp}"/>
<!-- Data binding updated at application startup. -->
<mx:Text id="text2" text="{myObj.intProp}"/>
<!-- Data bindings to stringProp updated. -->
<mx:Button label="Change myObj.stringProp"
click="myObj.stringProp = 'new string';"/>
<!-- Data bindings to intProp updated. -->
<mx:Button label="Change myObj.intProp"
click="myObj.intProp = 10;"/>
<!-- Data bindings to myObj and to myObj properties updated. -->
<mx:Button label="Change myObj"
click="myObj = anotherObj;"/>
</mx:Application>


(4)在绑定中使用数组
在使用数组进行工作时，比如Array 或者ArrayCollection 对象，可以把数组作为数据绑定
表达式的源或目的。
注意: 当使用数组作为绑定源时，应该使用ArrayCollection 类型的数组，因为
ArrayCollection 类在数组或数组元素发生变化时能够发出事件来触发数据绑定。比如，对
ArrayCollection.addItem(), ArrayCollection.addItemAt(),
ArrayCollection.removeItem(), 以及ArrayCollection.removeItemAt()方法的调用都会触发
数据绑定。
绑定到数组
通常将数组绑定给Flex 控件的dataProvider 属性，下面范例说明将数组绑定用于List 控
件：
<?xml version="1.0"?>
<!-- binding/ArrayBindingDP.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
"One", "Two", "Three", "Four"]);
[Bindable]
public var myAC2:ArrayCollection = new ArrayCollection([
"Uno", "Dos", "Tres", "Quatro"]);
]]>
</mx:Script>
<!-- Data binding updated at application startup,
when myAC is modified, and when an element of
myAC is modifed. -->
<mx:List dataProvider="{myAC}"/>
<!-- Data bindings to myAC updated. -->
<mx:Button
label="Change Element"
click="myAC[0]='mod One'"/>
<!-- Data bindings to myAC updated. -->
<mx:Button
label="Add Element"
click="myAC.addItem('new element');"/>
<!-- Data bindings to myAC updated. -->
<mx:Button
label="Remove Element 0"
click="myAC.removeItemAt(0);"/>
<!-- Data bindings to myAC updated. -->
<mx:Button
label="Change ArrayCollection"
click="myAC=myAC2"/>
</mx:Application>
这个例子定义了一个ArrayCollection 对象，然后将List 控件的dataProvider 属性设置
为对这个ArrayCollection 的数据绑定。当修改ArrayCollection 对象中的元素，或者修改对
ArrayCollection 对象的引用，都会触发数据绑定。
绑定到数组中的元素
可以使用数组中的单个元素作为数据绑定源，如下例所示：
<?xml version="1.0"?>
<!-- binding/ArrayBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
"One", "Two", "Three", "Four"]);
[Bindable]
public var myAC2:ArrayCollection = new ArrayCollection([
"Uno", "Dos", "Tres", "Quatro"]);
]]>
</mx:Script>
<!-- Data binding updated at application startup
and when myAC modified. -->
<mx:Text id="text1" text="{myAC[0]}"/>
<!-- Data binding updated at application startup,
when myAC modified, and when myAC[0] modified. -->
<mx:Text id="text2" text="{myAC.getItemAt(0)}"/>
<mx:Button id="button1"
label="Change Element"
click="myAC[0]='new One'"/>
<mx:Button id="button2"
label="Change ArrayCollection"
click="myAC=myAC2"/>
</mx:Application>
如果通过方括号语法[]来指定数组元素作为数据绑定表达式的源，那么数据绑定只在应用
启动时触发，或者在数组或其引用被更新时触发。当这个数组元素被更新的时候不会触发数据
绑定。
但数据绑定表达式中的myAC.getItemAt(0)则会在该数组元素变化时被触发更新。因此，id
为 text2 的Text 控件在点击button1 时会被更新，而id 为text1 的Text 控件则不会被更新。
当使用数组中的元素作为数据绑定表示的源时，应当在绑定表达式中使用
ArrayCollection.getItemAt()方法。

点击button2 时将myAC2 拷贝给myAC，这会触发对数组元素的所有数据绑定而不论它们是如
何实现的。