Apache Flex数据绑定的使用方法
首先
以下是Apache Flex数据绑定的简单使用方法概括:
数据绑定的字符序列
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Bindable]
private var message:String = "Hello World";
]]>
</fx:Script>
<s:Label left="10" top="15" text="{message}" />
<s:TextInput left="10" top="40" text="@{message}" />
</s:WindowedApplication>
在需要绑定的数据上添加[Bindable]注解。(本例中为message)
在画面上,通过使用{}将text=”{message}”括起来进行指定,可以实现数据绑定。
当message的值发生变化时,将实时反映在画面显示上。
如果您想将绑定设置为双向的话,可以使用@ {}来指定text = “@ {message}” ,这样可以实现双向数据绑定。
通过双向绑定,不仅可以实时反映message的值的更改,还可以通过使用TextInput等UI组件来实时更新message的值。
数值的数据绑定
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Bindable]
private var count:int = 5;
]]>
</fx:Script>
<s:Label left="10" top="15" text="{count}" />
<s:NumericStepper left="10" top="40" value="@{count}" />
</s:WindowedApplication>
关于数字也是同样的情况。
属性数据绑定
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
fontFamily="Meiryo">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
{c1: 100, c2: "aaa"},
{c1: 200, c2: "bbb"},
{c1: 300, c2: "ccc"}
]);
]]>
</fx:Script>
<s:Label left="10" top="15" text="データは{ac.length}件です" />
<s:DataGrid left="10" top="40" right="10" bottom="10" dataProvider="{ac}" >
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="列1" dataField="c1" />
<s:GridColumn headerText="列2" dataField="c2" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:WindowedApplication>
通过指定”text=”データは{ac.length}件です””,可以实现属性数据绑定。
当ArrayCollection的length值发生变化时,会实时反映在屏幕上。
个人常常使用它。