連載
» 2007年09月25日 00時00分 UPDATE

現場で使えるFlex実践テクニック(4):Flexでリストの中にチェックボックスや画像を表示!? (2/3)

[成瀬勉,クラスメソッド]

【基礎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については、次ページで解説し、応用としてリストをカラーピッカーにする例を示します。

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。