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
データをバインディングしよう
まとめ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間