現場で使えるFlex実践テクニック（4）
Flexでリストの中にチェックボックスや画像を表示!?

クラスメソッド
成瀬　勉
2007/9/25

リストの中にチェックボックスや画像を表示できます

　GUIアプリケーションで必ずといっていいほど登場するListやTree、DataGridなどの「リスト系」のコントロールですが、RIA開発において、単にこれらのコントロールを標準の状態のまま配置すればOKということはあまりありません。

　例えば、itemRendererという機構を利用することで、リスト内にチェックボックスや画像を表示するなど、内容を別のものに置き換えることができます。これによって、利用範囲が劇的に広がり、ユーザーが直感的に操作できます。

　今回は、リスト系コントロールについての基本から、実践、応用活用例を解説します。

【入門】そもそも、リスト系コントロールって何だろう？

　まず、リスト系コントロールとは、そもそもどういったものでしょうか？

■ Flexにおけるリストの種類

　Flexにおいてリスト系コントロールとは、ListBaseをスーパークラスに持つクラスが、それに当たります。具体的には、List、Menu、Tree、TileList、HorizontalList、DataGridです。

図1　クラス図

■ Flexにおけるリスト系コントロールの裏側

　リスト系コントロールは、多数のデータを一覧表示するために利用されます。ところが、FlashPlayerは大量の描画オブジェクトを生成して表示するのは、実はあまり得意ではありません。そのためFlexでは、スクロールで見えない分のオブジェクトの生成は行わず、画面内に表示されるレコードの分だけオブジェクトを生成します。

　スクロールが行われると、新たに表示されるレコードと、スクロール外へ移動し見えなくなるレコードが発生します。このとき、表示するデータの内容を入れ替えるケースと、オブジェクトの位置をずらすケースを適宜利用することで、スクロール動作を実現しています。この機構により、FlashPlayer上で大量のレコードデータを含んだリストを、高速に扱うことができるようになっています。

【基礎1】リストにデータを表示する

　まずは、リストにデータを表示する方法を解説します。

サンプル1

ListSample1.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     layout="vertical">     <mx:Script>     <![CDATA[         [Bindable]         private var dataList:Array             = new Array("aaa", "bbb", "ccc", "ddd", "eee", "fff");     ]]>     </mx:Script>     <mx:List width="200" height="200"         dataProvider="{dataList}"     /> </mx:Application>

　リスト系コンポーネントにはdataProviderというプロパティがあります。dataProviderに配列を指定することで、配列の1要素が1レコードとして一覧で表示されます。

■ リストの選択項目をラベルに表示

　dataProviderに設定する配列にはオブジェクトを含むことができます。オブジェクトにlabelというフィールドを設定すると、その値がリストに表示されます。オブジェクトの内容はリストのselectedItemなどからいつでも取り出すことが可能です。

ListSample2.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     layout="vertical">     <mx:Script>     <![CDATA[     [Bindable]         private var dataList:Array = new Array(             {label:"aaa", data:"AAA"},             {label:"bbb", data:"BBB"},             {label:"ccc", data:"CCC"},             {label:"ddd", data:"DDD"},             {label:"eee", data:"EEE"},             {label:"fff", data:"FFF"}         );     ]]>     </mx:Script>     <mx:List id="list" width="200" height="200"         dataProvider="{dataList}"     />     <mx:Label text="label:{list.selectedItem.label}" />     <mx:Label text="data:{list.selectedItem.data}" /> </mx:Application>

サンプル2

■ オブジェクトにnameフィールドを設定すると……

　では、オブジェクトにlabelフィールドを設定しないとどうなるでしょう。

　次の例では、labelではなくnameというフィールドを定義します。

ListSample3_a.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 layout="horizontal">     <mx:Script>     <![CDATA[         [Bindable]         private var dataList:Array = new Array(             {name:"aaa", data:"AAA"},             {name:"bbb", data:"BBB"},             {name:"ccc", data:"CCC"},             {name:"ddd", data:"DDD"},             {name:"eee", data:"EEE"},             {name:"fff", data:"FFF"}         );     ]]>     </mx:Script>     <mx:List id="list" width="200" height="200"         dataProvider="{dataList}"     />     <mx:Label text="label:{list.selectedItem.name}" />     <mx:Label text="data:{list.selectedItem.data}" /> </mx:Application>

　実行すると、[object Object]とリストには表示されます。これはObjectインスタンスのストリング表現です。

サンプル3

　正しく表示するためには、リストのlabelFieldというプロパティに、表示したいフィールド名をストリングで指定します。

ListSample3_b.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 layout="vertical">     <mx:Script>     <![CDATA[         [Bindable]         private var dataList:Array = new Array(             {name:"aaa", data:"AAA"},             {name:"bbb", data:"BBB"},             {name:"ccc", data:"CCC"},             {name:"ddd", data:"DDD"},             {name:"eee", data:"EEE"},             {name:"fff", data:"FFF"}         );     ]]>     </mx:Script>     <mx:List id="list" width="200" height="200"         dataProvider="{dataList}"         labelField="name"     />     <mx:Label text="label:{list.selectedItem.name}" />     <mx:Label text="data:{list.selectedItem.data}" /> </mx:Application>

サンプル4

　続いて次ページでは、ラベルに表示する内容を加工する方法やitemRendererを使った実践テクニックを解説します。

1-2-3

INDEX
現場で使えるFlex実践テクニック（4） Flexでリストの中にチェックボックスや画像を表示!?
	Page1 リストの中にチェックボックスや画像を表示できます 【入門】そもそも、リスト系コントロールって何だろう？ 【基礎1】リストにデータを表示する
	Page2 【基礎2】ラベルに表示する内容を加工するには？ 【実践1】リストのプロパティ、itemRenderer
	Page3 【実践2】リストの内容を編集する、itemEditor 【応用】リストをカラーピッカーにする

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