范例一
?
| <?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>
??????? <!-- Place non-visual elements (e.g.,services,value objects) here -->
??? </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>
??????? <!-- Place non-visual elements (e.g.,value objects) here -->
??? </fx:Declarations>
??? <!--双向绑定-->
??? <s:TextInput id="txtTest1"
???????????????? text="@{txtTest2.text}"/>
??? <s:TextInput id="txtTest2"/>
??? <s:Label id="lblMsg"
???????????? text="#chars:{txtTest1.text.length}"/>
</s:Application> |
@{}方式的双向绑定,是效果如范例一
?
范例三
| <?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> ??? <!--双向绑定-->
??? <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>
