Flex企业应用开发实战学习笔记（二）

使用Bindable元数据标记

         

1. 在public类定义之前使用

在这个地方使用[Bindable]元数据标记使得类中定义的全部public变量以及同时具有setter和getter方法的public属性能成为数据绑定表达式的源。这种情况下，[Bindable]不使用任何参数，如下代码所示。

[Bindable]
public class TextAreaFontControl extends TextArea {}

Flex编译器自动为所有public属性生成名为propertyChange，类型为PropertyChangeEvent的事件，以使这些属性可以作为数据绑定表达式的源。

注意  在public class定义之前使用[Bindable]元数据标记只是将绑定作用于public属性，它不会作用于private和protected属性以及那些定义在其他namespace中的属性，必须在非public属性前插入[Bindable]元数据标记才能使之成为数据绑定表达式的源。

2. 在public、protected或private属性之前使用

在public、protected或private属性之前使用[Bindable]标记可以将这个特定的属性定义为支持数据绑定的，如下代码所示。

[Bindable]
public var foo:String;
[Bindable]
protected var foo3:String;
[Bindable]
private var foo2:String;

Flex编译器自动为那个属性产生名为propertyChange，类型为PropertyChangeEvent的事件。如果写入的属性值不变，Flex不会发出事件或更新属性。也可以在[Bindable]元数据标记中指定事件名，如下代码所示。

[Bindable(event="fooChanged")]
public var foo:String;

在这种情况下，开发者要自己负责创建和发出事件才能触发数据绑定，通常在类的其他方法中完成这些工作。尽管在类的级别上指定了[Bindable]标记，如果想要为触发数据绑定的事件命名，仍然可以在[Bindable]中包含指定名称的事件。

3. 在由getter或setter方法所定义的public、protected或private属性之前使用

在由getter或setter方法所定义的public、protected或private属性之前使用该标记。在这种情况下，要使用[Bindable]标记必须同时为属性定义setter和getter方法。

绑定到函数、对象和数组

1. 绑定函数

在Flex中，可将函数作为数据绑定表达式中的一部分。在数据绑定表达式中使用函数的两种常见用法如下所示。

将“可绑定的”属性作为函数的参数，如下所示。

<?xml version="1.0"?>
<!-- binding/ASInBraces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:CurrencyFormatter id="usdFormatter" precision="2"
        currencySymbol="$" alignSymbol="left"/>
    <mx:TextInput id="myTI" text="Enter number here"/>
    <mx:TextArea text="{usdFormatter.format(myTI.text)}"/>
</mx:Application>

以函数作为绑定表达式的源。

可以把有返回值的函数作为数据绑定表达式的源。但是，必须有一种办法能够激活这个函数以更新目的属性，那就是使用[Bindable]元数据标记。在代码清单2-14中，使用了[Bindable]元数据标记指示Flex在myFlagChanged事件被派发时调用isEnabled()函数。当myFlag的 setter方法被调用时会派发一个myFlagChanged事件，这个事件触发任何使用isEnabled()函数作为源的数据绑定。

代码清单2-14   以函数作为绑定表达式的源

<?xml version="1.0"?>
<!-- binding/ASFunction.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import flash.events.Event;
            // 定义一个能够响应myFlagChanged事件的，可以作为绑定源的函数。
            [Bindable(event="myFlagChanged")]
            private function isEnabled():String {
                if (myFlag)
                    return 'true';
                else
                    return 'false';
            }
            private var _myFlag:Boolean = false;
            // 定义一个能够派发myFlagChanged事件以触发数据绑定的setter方法。
            public function set myFlag(value:Boolean):void {
                _myFlag = value;
                dispatchEvent(new Event("myFlagChanged"));
            }
            public function get myFlag():Boolean {
                return _myFlag;
            }
        ]]>
    </mx:Script>
    <!-使用函数作为数据绑定表达式的源 -->
    <mx:TextArea id="myTA" text="{isEnabled()}"/>
    <!--更改属性使得setter方法被调用，从而派发myFlagChanged事件，以触发数据绑定。
    -->
    <mx:Button label="Clear MyFlag" click="myFlag=false;"/>
    <mx:Button label="Set MyFlag" click="myFlag=true;"/>
</mx:Application>

2. 绑定对象

在项目中，我们会大量使用对象作为绑定表达式的源。在运行过程中，对象绑定失效的原因一般有如下两种。

尽管绑定的对象属性是可绑定的，但声明的对象引用不是可绑定的，如下代码所示。

//忘记声明该引用可绑定属性,即没有放置[Bindable]元数据标记
private var  foo:MyObject=null;
...
//尽管MyObject类的name属性是可绑定的，但由于foo是 不可绑定的，所以绑定表达式不会起作用。
<mx:TextArea id="myTA" text="{foo.name}"/>

尽管声明的对象引用是可绑定的绑定，但绑定的对象属性是不可绑定的，如下代码所示。

// MyObject实例的引用foo是可绑定的. 但MyObject类的name属性是不可绑定的。
[Bindable]
private var  foo:MyObject=null;
...
//尽管foo是可绑定的，但由于MyObject的name属性是 不可绑定的，所以绑定表达式不会起作用。
<mx:TextArea id="myTA" text="{foo.name}"/>

3. 绑定数组

在使用数组进行工作时，比如Array或ArrayCollection对象，可以把数组作为数据绑定表达式的源或目的。

注意   当使用数组作为绑定源时，应该使用ArrayCollection类型的数组，因为ArrayCollection类在数组或数组元素发生变化时能够发出事件来触发数据绑定。比如，对ArrayCollection.addItem()、ArrayCollection.addItemAt()、ArrayCollection.removeItem(),以及ArrayCollection.removeItemAt()方法的调用都会触发数据绑定。

绑定数组时主要应考虑两种情况：以数组作为数据绑定源和以数组元素作为数据源。以数组为数据源是我们最常用的一种情况，这时应当使用ArrayCollection，上面已经重点提示过，下面我们主要考虑以数组中的元素作为数据绑定源，如代码清单2-15所示。

代码清单2-15   以数组中的元素作为数据绑定源

<?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>
    <!-应用启动时或当myAC被改变时，数据绑定会被更新-->
    <mx:Text id="text1" text="{myAC[0]}"/>
<!-应用启动时或当myAC被改变时或当myAC[0]被改变时，数据绑定会被更新   -->
    <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控件则不会被更新。点击button2时将myAC2复制给myAC，这会触发所有对数组元素的绑定而不论是使用方括号[]语法还是使用getItemAt()函数。

注意   绑定数组元素最好使用getItemAt()函数，而不是方括号[]语法。