flex 数据绑定
2009-11-07 11:53
253 查看
本文来自:http://www.airia.cn/FLEX_Directory/using_data_binding/
数据绑定是连接一个对象中数据到另一个对象的处理过程。它提供了在应用程序中传递数据的方便的途径。
Adobe Flex 3提供几个途径来指定数据绑定:
使用大括号({})语法。
使用在大括号中ActionScript表达式
在MXML中使用<mx:Binding>标签
在ActionScript中使用绑定
使用大括号({})语法。
数据绑定需要源属性,目标属性,触发事件。触发事件表名了合适需要从源向目标拷贝数据。下边的例子展示了一个Text控件获得Hslider控件值属性的数据。在大括号中的属性名是绑定表达式的源属性。当原属性的值发生变化,Flex复制源属性的当前值mySlider.value到目标属性,Text控件的text属性。
连接:要查看使用大括号语法更复杂的关于数据绑定的例子,查看Defining data models
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingSimple/index.html"
width="250" height="150"
>
<mx:Panel
title="Simple data binding"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:HSlider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>
</mx:Panel>
</mx:Application>
使用在大括号中ActionScript表达式
大括号中的绑定表达式能够被包含在ActionScript表达式中用来发回一个结果。例如你能够使用大括号语法用于下边类型的绑定:
在大括号中一个单独的可绑定属性
在大括号中使用字符串串联,其中报站一个可绑定的属性
在大括号中基于可绑定属性的计算
在大括号中使用条件运算来判断一个可绑定属性
下边的例子中这事了用户界面中使用了每一种类型的绑定表达式
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html"
width="420" height="350"
>
<mx:Model id="myModel">
<myModel>
<!-- Perform simple property binding. -->
<a>{nameInput.text}</a>
<!-- Perform string concatenation. -->
<b>This is {nameInput.text}</b>
<!-- Perform a calculation. -->
<c>{(Number(numberInput.text) as Number) * 6 / 7}</c>
<!-- Perform a conditional operation using a ternary operator;
the person object contains a Boolean variable called isMale. -->
<d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d>
</myModel>
</mx:Model>
<mx:Panel
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
width="100%" height="100%"
title="Binding expressions"
>
<mx:Form>
<mx:FormItem label="Last Name:">
<mx:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Select sex:">
<mx:RadioButton
id="isMale"
label="Male"
groupName="gender"
selected="true"
/>
<mx:RadioButton
id="isFemale"
label="Female"
groupName="gender"
/>
</mx:FormItem>
<mx:FormItem label="Enter a number:">
<mx:TextInput id="numberInput" text="0"/>
</mx:FormItem>
</mx:Form>
<mx:Text text="{'Simple binding: '+myModel.a}"/>
<mx:Text text="{'String concatenation: '+myModel.b}"/>
<mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>
<mx:Text text="{'Conditional: '+myModel.d}"/>
</mx:Panel>
</mx:Application>
运行结果
在MXML中使用<mx:Binding>标签
可以使用<mx:Binding>标记作为大括号语法的大体方案。当你使用<mx:Binding>标记时,你需要将源属性赋给<mx:Binding>标记的source属性,并且目标属性赋给detination属性。这与使用大括号语法是等同的。
在一个MCV架构中,与大括号语法相比,使用<mx:Binding>标记完全的从Model中分离了View(用户界面)。在这个架构中,binging标记扮演了Controller。<mx:Binding>标记也使得不同的源属性可以绑定到相同的目标属性上,因为你可以使用多个<mx:Binding>标记指向同一个目标。
下边的例子中,通过<mx:Binding>标记,用户界面的控件属性被绑定在wormModel数据模型中。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingBindingTag/index.html"
width="400" height="200"
>
<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>
<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
<!--
Controller: Properties of user interface controls are bound
to the data model using <mx:Binding> tags.
-->
<mx:Binding
source="mySlider.value"
destination="wormModel.length"
/>
<mx:Binding
source="wormModel.length"
destination="statusText.text"
/>
</mx:Application>
注意: <mx:Binding>标记的source属性能够包含大括号。当包含大括号,source属性的值被作为一个单独的ActionScript表达式来处理。当有大括号在source属性中时,它的值被当作关联的ActionScript表达式来处理,下边的表达式都是有效的。
<mx:Binding
source="'The worm is ' + wormModel.length + 'cm long.'"
destination="statusText.text"
/>
<mx:Binding
source="{'The worm is ' + wormModel.length + 'cm long.'}"
destination="statusText.text"
/>
<mx:Binding
source="'The worm is ' + {wormModel.length} + 'cm long.'"
destination="statusText.text"
/>
在ActionScript中使用绑定
一般在MXML中使用大括号({})或<mx:Binding>标记来定义数据绑定。你也可以在ActionScript中定义数据绑定,通过使用mx.binding.utils.BindingUtils类来实现。这个类的静态方法bindProperty()方法使你创建一个基于变量的绑定,bindSetter()方法显示一个基于setter方法的绑定。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingActionScript/index.html"
width="400" height="200"
initialize="initializeHandler();"
>
<!--
Controller: Properties of user interface controls are bound
to the data model using ActionScript.
-->
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private function initializeHandler():void
{
// Updates the model
BindingUtils.bindProperty(wormModel, "length", mySlider, "value");
// Reads from the model to update the status text
BindingUtils.bindProperty(statusText, "text", wormModel, "length");
}
]]>
</mx:Script>
<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>
<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
</mx:Application>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lihe111/archive/2009/10/13/4664806.aspx
数据绑定是连接一个对象中数据到另一个对象的处理过程。它提供了在应用程序中传递数据的方便的途径。
Adobe Flex 3提供几个途径来指定数据绑定:
使用大括号({})语法。
使用在大括号中ActionScript表达式
在MXML中使用<mx:Binding>标签
在ActionScript中使用绑定
使用大括号({})语法。
数据绑定需要源属性,目标属性,触发事件。触发事件表名了合适需要从源向目标拷贝数据。下边的例子展示了一个Text控件获得Hslider控件值属性的数据。在大括号中的属性名是绑定表达式的源属性。当原属性的值发生变化,Flex复制源属性的当前值mySlider.value到目标属性,Text控件的text属性。
连接:要查看使用大括号语法更复杂的关于数据绑定的例子,查看Defining data models
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingSimple/index.html"
width="250" height="150"
>
<mx:Panel
title="Simple data binding"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:HSlider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>
</mx:Panel>
</mx:Application>
使用在大括号中ActionScript表达式
大括号中的绑定表达式能够被包含在ActionScript表达式中用来发回一个结果。例如你能够使用大括号语法用于下边类型的绑定:
在大括号中一个单独的可绑定属性
在大括号中使用字符串串联,其中报站一个可绑定的属性
在大括号中基于可绑定属性的计算
在大括号中使用条件运算来判断一个可绑定属性
下边的例子中这事了用户界面中使用了每一种类型的绑定表达式
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html"
width="420" height="350"
>
<mx:Model id="myModel">
<myModel>
<!-- Perform simple property binding. -->
<a>{nameInput.text}</a>
<!-- Perform string concatenation. -->
<b>This is {nameInput.text}</b>
<!-- Perform a calculation. -->
<c>{(Number(numberInput.text) as Number) * 6 / 7}</c>
<!-- Perform a conditional operation using a ternary operator;
the person object contains a Boolean variable called isMale. -->
<d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d>
</myModel>
</mx:Model>
<mx:Panel
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
width="100%" height="100%"
title="Binding expressions"
>
<mx:Form>
<mx:FormItem label="Last Name:">
<mx:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Select sex:">
<mx:RadioButton
id="isMale"
label="Male"
groupName="gender"
selected="true"
/>
<mx:RadioButton
id="isFemale"
label="Female"
groupName="gender"
/>
</mx:FormItem>
<mx:FormItem label="Enter a number:">
<mx:TextInput id="numberInput" text="0"/>
</mx:FormItem>
</mx:Form>
<mx:Text text="{'Simple binding: '+myModel.a}"/>
<mx:Text text="{'String concatenation: '+myModel.b}"/>
<mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>
<mx:Text text="{'Conditional: '+myModel.d}"/>
</mx:Panel>
</mx:Application>
运行结果
在MXML中使用<mx:Binding>标签
可以使用<mx:Binding>标记作为大括号语法的大体方案。当你使用<mx:Binding>标记时,你需要将源属性赋给<mx:Binding>标记的source属性,并且目标属性赋给detination属性。这与使用大括号语法是等同的。
在一个MCV架构中,与大括号语法相比,使用<mx:Binding>标记完全的从Model中分离了View(用户界面)。在这个架构中,binging标记扮演了Controller。<mx:Binding>标记也使得不同的源属性可以绑定到相同的目标属性上,因为你可以使用多个<mx:Binding>标记指向同一个目标。
下边的例子中,通过<mx:Binding>标记,用户界面的控件属性被绑定在wormModel数据模型中。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingBindingTag/index.html"
width="400" height="200"
>
<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>
<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
<!--
Controller: Properties of user interface controls are bound
to the data model using <mx:Binding> tags.
-->
<mx:Binding
source="mySlider.value"
destination="wormModel.length"
/>
<mx:Binding
source="wormModel.length"
destination="statusText.text"
/>
</mx:Application>
注意: <mx:Binding>标记的source属性能够包含大括号。当包含大括号,source属性的值被作为一个单独的ActionScript表达式来处理。当有大括号在source属性中时,它的值被当作关联的ActionScript表达式来处理,下边的表达式都是有效的。
<mx:Binding
source="'The worm is ' + wormModel.length + 'cm long.'"
destination="statusText.text"
/>
<mx:Binding
source="{'The worm is ' + wormModel.length + 'cm long.'}"
destination="statusText.text"
/>
<mx:Binding
source="'The worm is ' + {wormModel.length} + 'cm long.'"
destination="statusText.text"
/>
在ActionScript中使用绑定
一般在MXML中使用大括号({})或<mx:Binding>标记来定义数据绑定。你也可以在ActionScript中定义数据绑定,通过使用mx.binding.utils.BindingUtils类来实现。这个类的静态方法bindProperty()方法使你创建一个基于变量的绑定,bindSetter()方法显示一个基于setter方法的绑定。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataBindingActionScript/index.html"
width="400" height="200"
initialize="initializeHandler();"
>
<!--
Controller: Properties of user interface controls are bound
to the data model using ActionScript.
-->
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private function initializeHandler():void
{
// Updates the model
BindingUtils.bindProperty(wormModel, "length", mySlider, "value");
// Reads from the model to update the status text
BindingUtils.bindProperty(statusText, "text", wormModel, "length");
}
]]>
</mx:Script>
<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>
<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
</mx:Application>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lihe111/archive/2009/10/13/4664806.aspx
相关文章推荐
- Flex数据绑定陷阱(一)
- Flex中在Tree绑定数据后自动展开树节点的方法
- Flex 数据绑定不出数
- Flex控件ComboBox绑定数据
- flex数据绑定
- Flex中的数据绑定(Data Binding)1:数据绑定的原理
- Flex中DataGrid绑定ComboBox ,自动显示行号,增加行,删除行,保存数据
- Flex: 数据绑定将无法检测对“***”的指定
- flex---->数据绑定、数据列表
- FLex数据绑定
- Flex中数据绑定
- Flex4 用AS实现数据绑定
- ArcGIS for Java_Flex入门学习_数据绑定功能
- Flex对象与组件的数据动态双向绑定
- flex数据绑定
- Flex学习笔记(六)——数据的绑定(Binding)
- Flex访问数据——将服务操作绑定到用户界面控件
- Flex中实现Tree绑定数据后自动展开节点
- flex数据绑定
- Flex 数据绑定易犯的错误:普遍的误用和错误