Flex数据绑定(一)

范例一

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="1024"
               minHeight="768">
    <s:layout>
        <s:VerticalLayout paddingTop="50"
                          paddingLeft="20"/>
    </s:layout>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:TextInput id="txtTest1"
                 text="{txtTest2.text}"/>
    <s:TextInput id="txtTest2"
                 text="{txtTest1.text}"/>
    <s:Label id="lblMsg"
             text="#chars:{txtTest1.text.length}"/>
</s:Application>

大括号{}中所括的属性名就是绑定表达式中的源属性。当源属性的值放生变化时，Flex 把源属性
myTI.text 的当前值拷贝到目的属性如源属性:txTest1.text 目的属性:txtTest2.Test

范例二

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="1024"
               minHeight="768">
    <s:layout>
        <s:VerticalLayout paddingTop="50"
                          paddingLeft="20"/>
    </s:layout>
    <fx:Declarations>
        
    </fx:Declarations>
    
    <s:TextInput id="txtTest1"
                 text="@{txtTest2.text}"/>
    <s:TextInput id="txtTest2"/>
    <s:Label id="lblMsg"
             text="#chars:{txtTest1.text.length}"/>
</s:Application>

@{}方式的双向绑定,是效果如范例一

范例三

<s:TextInput id="txtTest1"/>
    <s:TextInput id="txtTest2"/>
    <s:Label id="lblMsg"
             text="#chars:{txtTest1.text.length}"/>
<fx:Binding source="txtTest1.text"
                destination="txtTest2.text"/>
</s:Application>

可以用<mx:Binding>标记作为大括号语法的替代方法。在使用<mx:Binding>时，要为
<mx:Binding>标记提供一个源属性作为标记的source 属性以及提供一个目的属性作为标记的
destination 属性。

范例四

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="1024"
               minHeight="768">
    <s:layout>
        <s:VerticalLayout paddingTop="50"
                          paddingLeft="20"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.binding.utils.*;
            public function InitBindHandler():void
            {
                 BindingUtils.bindProperty(txtTest1,"text",txtTest2,"text");
            }
        ]]>
    </fx:Script>

    <s:TextInput id="txtTest1"/>
    <s:TextInput id="txtTest2" preinitialize="InitBindHandler()"/>
    <s:Label id="lblMsg"
             text="#chars:{txtTest1.text.length}"/>

</s:Application>

大括号语法和<mx:Binding>标记都能在编译期定义数据绑定，而使用ActionScript 代码则
可以在运行期定义数据绑定!

在这个例子中，使用静态方法BindingUtils.bindProperty()来定义数据绑定，也可以使用
BindingUtils.bindSetter()方法定义一个到函数的绑定。

注意，在这个例中使用preinitialize 事件去定义数据绑定。这是必须的，因为Flex 在应
用启动过程中，当源对象发出initialize 事件时触发所有的数据绑定,显然preinitialize

事件在initialize 事件之前执行三

关键字：BindingUtils.bindProperty

需导入：import mx.binding.utils.BindingUtils;

/**
    * 动态绑定
    * @params site:Object 被绑定对象
    * @params prop:String 被绑定对象的属性,如textInput的text属性
    * @params host:Object 监视者对象
    * @params chain:Object 监视者对象的属性
    * @return ChangeWatcher
    * **/

BindingUtils.bindProperty(site:Object,prop:String,host:Object,chain:Object)；

支持数据绑定的属性

可以把对象的所有属性都作为数据绑定表达式的目的属性，但要想使一个属性成为数据绑
定表达式的源，那么源对象必须被实现为支持数据绑定。这意味着这个对象在属性值发生变化
时要发出一个事件以触发绑定。在本文中，可以被用来作为数据绑定源的属性被称为“可绑定
的(bindable)”属性。

使用只读属性与静态属性作为数据绑定源

通过定义一个只有getter 方法而没有setter 方法来定义个一个只读属性作为数据绑定表
达式的源时，Flex 只在应用启动时执行一次数据绑定。

可以自动用一个静态常量作为数据绑定表达式的源。Flex 只在应用启动时执行一次数据绑
定。

创建用作数据绑定源的属性

当创建一个用于绑定表达式源的属性，那么在源属性值发生变化时Flex 就能自动将值拷贝
到所有的目的属性。为了让Flex 执行拷贝，必须使用[Bindable]标记来向Flex 注册这个属性。
The [Bindable] 元数据标记

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="1024"
               minHeight="768">
    <s:layout>
        <s:VerticalLayout paddingTop="50"
                          paddingLeft="20"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            [Bindable]
            var Test1Value:String="我是输入框一";
            [Bindable]
            var Test2Value:String="输入入框二";

            protected function btnTest_clickHandler(event:MouseEvent):void
            {
                Test1Value="输入框已改变";
                Test2Value="改变输入框二";
            }

]]>
</fx:Script>

    <s:TextInput id="txtTest1" text="{Test1Value}"/>
    <s:TextInput id="txtTest2" text="{Test2Value}"/>
    <s:Button id="btnTest" label="更改输入框的值" click="btnTest_clickHandler(event)" />

</s:Application>