Flashベースのリッチクライアントを体験（5）　3/3

Flexならデータ・バインディングもカンタン


電通国際情報サービス
公門 和也
2005/11/8

■データをバインディングしよう

　Flexでデータをバインディングするには、データ名「id」を中カッコ「{ }」で囲みます。例えば、リスト4のように記述することで「strData」というidの文字列型データ「abcd」をLabelの「text」属性にバインディングできます（図8）。

 

 

 

 

 

<mx:String id="strData">abcd</mx:String> <mx:Label text="{strData}">

リスト4　データのバインディング指定

図8　文字列データがLabel上に表示される

　このように、UIコンポーネントの表示用データを表す属性にデータをバインディングすることで、そのデータを表示させることができます。

　それでは、先ほど作成したDataGridに定義したデータをバインディングさせてみましょう。DataGridはdataProviderという属性が表示用データを表します。リスト5のようにDataGridの開始タグで「dataProvider」属性にデータをバインディングします。

<mx:DataGrid id="datagrid1" dataProvider="{arrData}">

リスト5　DataGridに定義したデータのバインディング指定

　これだけでバインディングは完了です。実行して図9のようになることを確認してみましょう。

図9　バインディング後のDataGrid

　続いて、元データが変更されたらすぐに反映されることを確認するサンプルを作成してみましょう。先ほどのDataGridの下にTextInputコンポーネントを配置します（図10）。リスト6のように「id」属性を「arg1」にしておきます。

図10　TextInputコンポーネントの配置（クリックすると拡大します）

<mx:TextInput id="arg1" />

リスト6　DataGridに定義したデータのバインディング指定

　次にTextInputの下にLabelコンポーネントを配置します（図11）。

図11　Labelコンポーネントの配置（クリックすると拡大します）

　Labelの「text」属性に対して、リスト7のように記述することで先ほど配置したTextInputの内容をバインディングします。これでTextInputの内容がLabelに結び付けられました。

<mx:Label text="{arg1.text}">

リスト7　Labelの「text」属性にTextInputの内容をバインディング

　実行して確認してみましょう（図12）。

図12　TextInputの内容がLabelに反映される

■まとめ

　Flexにはこのようにデータを扱いやすい仕組みが用意されています。これらを用いることでページ全体をリフレッシュすることなく、リアルタイムに表示データを更新することができます。今回扱ったUIコンポーネント以外のコンポーネント、あるいは表示データ以外にwidthなどの属性にもバインディングは使えるので、いろいろ実際に試してみてその便利さを体感してください。（次回に続く）

今回のシリーズをより詳細に説明した本『Flexでさわっておぼえるリッチクライアント』が発売されています。こちらの方もよろしくお願いします。

3/3

INDEX
Flashベースのリッチクライアントを体験 第5回 Flexならデータ・バインディングもカンタン
	Page 1 Flexでのバインディングの概要
	Page 2 バインディングの準備として、データを定義しよう
	Page 3 データをバインディングしよう まとめ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）