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

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


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

■バインディングの準備として、データを定義しよう

　バインディングを行う前に、まずはバインディングされるデータを定義します。Flexでは表1のような種類のデータを定義できます。

データ型	説明
Number	数値型
String	文字列型
Boolean	論理値型
Object	オブジェクト型
Array	配列型
表1　Flexで定義できるデータ型

　データの定義は、MXMLとActionScriptのどちらでもできます。

MXMLでデータを定義する方法

　MXMLでデータを定義するときは、リスト1のような形式で記述します。また、具体的な定義例を表2に示します。

<mx:データ型 id="名前">値</mx:データ型>

リスト1　MXMLでのデータ定義

データ型	定義例
Number	<mx:Number id="numData">1234</mx:Number>
String	<mx:String id="strData">abcd</mx:String>
Boolean	<mx:Boolean id="boolData">true</mx:Boolean>
Object	<mx:Object id="objData"> 　<name>USB Watch</name> 　<price>129.99</price> </mx:Object>
Array	<mx:Array id="arrData"> 　<mx:Object> 　　<name>USB Watch</name> 　　<price>129.99</price> 　</mx:Object> 　<mx:Object> 　　<name>007 Digital Camera</name> 　　<price>99.99</price> 　</mx:Object> </mx:Array>
表2　MXMLでのデータの定義例

ActionScriptでデータを定義する方法

　ActionScriptでデータを定義するときは、リスト2のような形式で記述します。ただし、以下のような方法で定義した変数はローカル変数となります。グローバル変数として定義するには異なる方法を使用しますが、ここでは割愛します。また、具体的な定義例を表3に示します。

var 名前:データ型 = 値; もしくは var 名前:データ型; 名前 = 値;

リスト2　ActionScriptでのデータ定義

データ型	定義例
Number	var numData:Number = 1234;
String	var strData:String = "abcd";
Boolean	var booldata:Boolean = true;
Object	var objData:Object = {name:"USB Watch", price:129.99};
Array	var arrData :Array = [{name:"USB Watch", price:129.99}, 　　　　　　　　{name:"007 Digital Camera", price:99.99}];
表3　ActionScriptでのデータ定義例

　FlexBuilderを立ち上げて、前回までの要領で「dataBindingApp.mxml」という新しいファイルをflex-exampleサイトの直下に作成します。

　次にインサートバーで「controls」を選び、DataGridコンポーネントをアプリケーションにドラッグ＆ドロップしてください。

図5　インサートバーのDataGridコンポーネント（クリックすると拡大します）

　すると図6のようにダイアログが出るので、IDはそのままで「Header text」と「Column name」を指定します。OKをクリックすることで、空のDataGridが作成されます。

図6　DataGridダイアログでの詳細を指定

　続いて、データを定義していきましょう。図7のようにリスト3の配列データ「arrData」を定義します。

<mx:Array id="arrData">   <mx:Object>     <name>USB Watch</name>     <price>129.99</price>   </mx:Object>   <mx:Object>     <name>007 Digital Camera</name>     <price>99.99</price>   </mx:Object> </mx:Array>

リスト3　配列データ「arrData」の定義

図7　データの定義（クリックすると拡大します）

　以上までで、空のDataGridを配置し、表示用のデータを定義しました。続いてこれらをバインディングします。（次ページに続く）

2/3

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

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