Apache Flex数据绑定的使用方法

首先

以下是Apache Flex数据绑定的简单使用方法概括:

数据绑定的字符序列

tmp.png
<?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的值。

数值的数据绑定

tmp2.png
<?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>

关于数字也是同样的情况。

属性数据绑定

tmp3.png
<?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值发生变化时,会实时反映在屏幕上。
个人常常使用它。

广告
将在 10 秒后关闭
bannerAds