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

8481 ワード
AIR ActionScript Flex ActionScript テキストリンク

はじめに

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の値が変わった場合、リアルタイムに画面に反映されます。
個人的にはよく使います。