【基礎2】ラベルに表示する内容を加工するには？
先ほどの例では、オブジェクトで定義されたレコードから任意のフィールドを指定して表示しましたが、次はフィールドの値を判定して、表示する内容を変更する方法を解説します。
例えば、性別などのデータベース上では、0または1の値で保持しているが、リスト上に表示するときには本来の意味で表示したい。というケースや、Date型で保持している値をYYYY/MMとして表示したい。といったケースです。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
リスト系コントロールには、labelFunctionというプロパティが備わっています。labelFunctionには、labelFunction(item:Object):Stringの形式で定義した関数を指定します。引数のitemには、1レコードのオブジェクトが渡されます。つまり、表示されるリストの行ごとにlabelFunctionが呼び出されることになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
また、表示する内容を文字以外の表現にすることもできます。男性・女性を文字ではなくアイコンで表現したり、画像のURLから実際の画像を表示したりすることも可能です。そのためには、itemRendererという機構を理解する必要があります。
【実践1】リストのプロパティ、itemRenderer
itemRendrerとは、リスト系コントロールが持つプロパティで、1レコードを表現する方法を定義したクラスを指定します。
例えばListコントロールでは、ListItemRendererというクラスがitemRendererにデフォルトで指定されています。これは、レコードが持つ値をLabelで表示するものです。
■ リストの項目を複数行に
まずは、これを複数行に対応できるようにしてみましょう。Flexの標準コントロールのいくつかはitemRendererに指定できるように設計されています。複数行の文字列を表示するためのTextコントロールもitemRendererに指定できます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
データ内に改行（\n）を含んだ文字列を定義します。ListコントロールのitemRendererプロパティには完全修飾子名を含むクラスを文字列で指定します。もしくは、バインディングを用いてClassFactoryのインスタンスを下記のように指定することも可能です。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
サンプルを実行すると、Listコントロールのレコード表示部分がTextで置き換えられたことにより、改行が有効になっていることが確認できます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ 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 © ITmedia, Inc. All Rights Reserved.