Flex数据绑定(一)
2010-03-21 17:15
190 查看
范例一
大括号{}中所括的属性名就是绑定表达式中的源属性。当源属性的值放生变化时,Flex 把源属性
myTI.text 的当前值拷贝到目的属性 如源属性:txTest1.text 目的属性:txtTest2.Test
范例二
@{}方式的双向绑定,是效果如范例一
范例三
可以用<mx:Binding>标记 作为大括号语法的替代方法。在使用<mx:Binding>时,要为
<mx:Binding>标记提供一个源属性作为标记的source 属性以及提供一个目的属性作为标记的
destination 属性。
范例四
大括号语法和<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: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> |
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., services, 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>标记提供一个源属性作为标记的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> |
可以在运行期定义数据绑定!
在这个例子中,使用静态方法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> |
相关文章推荐
- Flex中在Tree绑定数据后自动展开树节点的方法
- Flex数据绑定陷阱(一)
- Flex控件ComboBox绑定数据
- FLex数据绑定
- FLEX学习笔记----数据绑定
- flex数据绑定
- Flex中的数据绑定(Data Binding)1:数据绑定的原理
- FLex数据绑定
- Flex: 数据绑定将无法检测对“***”的指定
- flex---->数据绑定、数据列表
- Flex中DataGrid绑定ComboBox ,自动显示行号,增加行,删除行,保存数据
- Flex中数据绑定
- Flex 数据绑定不出数
- Flex4 用AS实现数据绑定
- ArcGIS for Java_Flex入门学习_数据绑定功能
- Flex对象与组件的数据动态双向绑定
- flex数据绑定
- Flex学习笔记(六)——数据的绑定(Binding)
- Flex访问数据——将服务操作绑定到用户界面控件
- Flex中实现Tree绑定数据后自动展开节点