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

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

【基礎2】ラベルに表示する内容を加工するには？

　先ほどの例では、オブジェクトで定義されたレコードから任意のフィールドを指定して表示しましたが、次はフィールドの値を判定して、表示する内容を変更する方法を解説します。

　例えば、性別などのデータベース上では、0または1の値で保持しているが、リスト上に表示するときには本来の意味で表示したい。というケースや、Date型で保持している値をYYYY/MMとして表示したい。といったケースです。

サンプル5

　リスト系コントロールには、labelFunctionというプロパティが備わっています。labelFunctionには、labelFunction(item:Object):Stringの形式で定義した関数を指定します。引数のitemには、1レコードのオブジェクトが渡されます。つまり、表示されるリストの行ごとにlabelFunctionが呼び出されることになります。

ListSample4.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:"A太郎", data:0},             {name:"B四郎", data:0},             {name:"C江", data:1},             {name:"D雄", data:0},             {name:"E美子", data:1},             {name:"F代", data:1}         );         private function dataLabelFunction(item:Object):String{             return item.data == 0 ? "男性":"女性";         }     ]]>     </mx:Script>     <mx:List id="list" width="200" height="200"         dataProvider="{dataList}"         labelFunction="{dataLabelFunction}"     />     <mx:Label text="label:{list.selectedItem.name}" />     <mx:Label text="data:{list.selectedItem.data}" /> </mx:Application>

　

　また、表示する内容を文字以外の表現にすることもできます。男性・女性を文字ではなくアイコンで表現したり、画像のURLから実際の画像を表示したりすることも可能です。そのためには、itemRendererという機構を理解する必要があります。

　

【実践1】リストのプロパティ、itemRenderer

　itemRendrerとは、リスト系コントロールが持つプロパティで、1レコードを表現する方法を定義したクラスを指定します。

　例えばListコントロールでは、ListItemRendererというクラスがitemRendererにデフォルトで指定されています。これは、レコードが持つ値をLabelで表示するものです。

■ リストの項目を複数行に

　まずは、これを複数行に対応できるようにしてみましょう。Flexの標準コントロールのいくつかはitemRendererに指定できるように設計されています。複数行の文字列を表示するためのTextコントロールもitemRendererに指定できます。

ListSample5.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 layout="vertical">     <mx:Script>     <![CDATA[         import mx.controls.Text;         [Bindable]         private var dataList:Array = new Array(             {name:"A太郎\n改行", data:0},             {name:"B四郎\n改行", data:0},             {name:"C江\n改行", data:1},             {name:"D雄\n改行", data:0},             {name:"E美子\n改行", data:1},             {name:"F代\n改行", data:1}         );     ]]>     </mx:Script>     <mx:List id="list" width="200" height="200"         dataProvider="{dataList}" labelField="name"         itemRenderer="mx.controls.Text"     /> </mx:Application>

　データ内に改行（\n）を含んだ文字列を定義します。ListコントロールのitemRendererプロパティには完全修飾子名を含むクラスを文字列で指定します。もしくは、バインディングを用いてClassFactoryのインスタンスを下記のように指定することも可能です。

｛new ClassFactory(Text)｝

　サンプルを実行すると、Listコントロールのレコード表示部分がTextで置き換えられたことにより、改行が有効になっていることが確認できます。

サンプル6

■ dataプロパティを必ず持たせるIDataRendererインターフェイス

　コンポーネントをitemRendeterに指定するためには、コンポーネントがIDataRendererインターフェイスを実装している必要があります。

　IDataRendererインターフェイスは、単にdata:Objectというプロパティを必ず持つように設計されたインターフェイスです。itemRendererに指定されたコンポーネントは、このdataプロパティを通してListのレコードデータを受け取ります。

　Textコントロールでは、dataが渡されると、その値を自身のtextプロパティに設定するように実装されているため、レコードの値がTextコントロールに表示される仕組みとなります。ImageやCheckBoxなども同様に、各コントロールに適したプロパティへdataの値が設定されます。

　詳しくは、オンラインドキュメントの「ドロップインアイテムレンダラーとドロップインアイテムエディタの使用」を参照してください。

■ itemRendererを使う際の注意点

　CheckBoxやNumericStepperなどの、データの表示と編集の機能を同時に持つコントロールをitemRendererに指定した場合には、注意が必要です。itemRenderer上に表示されたCheckBoxをクリックすると、一見チェックされたように表示が切り替わりますが、レコードデータは実際には更新されません。これはitemRendererがデータの表示に関してのみ働くからです。

　編集結果を正しく動作させるにはitemEditorを使用する必要があります。itemEditorについては、次ページで解説し、応用としてリストをカラーピッカーにする例を示します。

1-2-3

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

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