Apache Flexのデータバインディングの使い方

はじめに

Apache Flexのデータバインディングの使い方を簡単にまとめます。

文字列のデータバインディング

mxml

<?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の値をリアルタイムに更新することが可能となります。

数値のデータバインディング

mxml

<?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>

数値についても同様です。

プロパティのデータバインディング

mxml

<?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="列１" dataField="c1" />
				<s:GridColumn headerText="列２" dataField="c2" />
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
</s:WindowedApplication>

text="データは{ac.length}件です"のように指定することで、プロパティのデータバインディングができます。
ArrayCollectionのlengthの値が変わった場合、リアルタイムに画面に反映されます。
個人的にはよく使います。