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

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

【実践2】リストの内容を編集する、itemEditor

　itemEditorとは、リスト系コントロールのeditableプロパティをtrueに設定した際の、レコードの内容を編集する方法を定義したクラスです。デフォルトでは、TextInputコントロールが割り当てられています。

　itemEditorを指定する代わりにrendererIsEditorプロパティをtrueにすることで、itemRendererに指定したコントロールがitemEditorとしても機能するようになります。

　また、itemEditorで編集した値を反映するには、editorDataFieldプロパティに、itemEditorが持つ編集後のデータが格納されているプロパティ名を指定する必要があります。itemEditorがCheckBoxであれば“selected”、NumericStepperであれば“value”を指定します。

ListSample6_a.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:false},             {name:"B四郎", data:false},             {name:"C江", data:true},             {name:"D雄", data:false},             {name:"E美子", data:true},             {name:"F代", data:true}         );     ]]>     </mx:Script>     <mx:List id="list" width="200" height="200"         dataProvider="{dataList}" labelField="data"         itemRenderer="mx.controls.CheckBox" editable="true"         rendererIsEditor="true"         editorDataField="selected"     /> </mx:Application>

　ところが、例えばCheckBoxは初期値がtrueかfalseかによって明示的にCheckBoxの状態を定義しない限り、チェックされない状態でしか表示されません。

サンプル7

　この例を実行すると、設定された初期値がtrueかfalseかにかかわらずチェックボックスは未チェックの状態になってしまいます。

■ itemRendererの状態を完全に定義する

　これを回避するためには、dataプロパティに値が渡されたタイミングで、itemRendererの状態を完全に定義する必要があります。

サンプル8

ListSample6_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:"A太郎", data:false},             {name:"B四郎", data:false},             {name:"C江", data:true},             {name:"D雄", data:false},             {name:"E美子", data:true},             {name:"F代", data:true}         );     ]]>     </mx:Script>     <mx:List id="list" width="200" height="200"         dataProvider="{dataList}" labelField="data"         rendererIsEditor="true" editable="true"         editorDataField="checkBoxSelected"     >         <mx:itemRenderer>             <mx:Component>                 <mx:Box>                 <mx:Script>                 <![CDATA[                     [Bindable]                     public var checkBoxSelected:Boolean;                     override public function set data(                         value:Object):void{                         checkBoxSelected = value.data;                     }                 ]]>                 </mx:Script>                 <mx:CheckBox id="checkBox"                     label="{checkBoxSelected}"                     selected="{checkBoxSelected}"                     click="checkBoxSelected = checkBox.selected"                 />                 </mx:Box>             </mx:Component>         </mx:itemRenderer>     </mx:List> </mx:Application>

　この例では、「checkBoxSelected:Boolean」というプロパティを定義したCheckBoxを包括するBoxを、itemRendererおよびitemEditorに設定しています。

　Listからdataが渡されるたびにcheckBoxSelectedの値が変更され、バインディングによってCheckBoxのチェック状態が連動して変更されます。これにより、初期値を正しく表示できます。ListのeditorDataFieldにはcheckBoxSelectedを指定しています。

　直接CheckBoxのselectedを指定しない理由は、editorDataFieldの値が、itemEditorの最上位に定義されたプロパティにしかアクセスできないためです。

　このあたりの詳細に関しては、「アイテムレンダラーとアイテムエディタのライフサイクルについて」を参照してください。

【応用】リストをカラーピッカーにする

　最後に、応用例としてカラーピッカーをitemRendererで実現する方法を紹介します。この例では、レコードのカラーコードをそのまま、色で表現しています。ListではなくTileListを用いると、よりカラーピッカーらしくなります。

サンプル9

ListSample7.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 layout="vertical">     <mx:Script>     <![CDATA[         [Bindable]         public var colors:Array = [0x000000, 0x333333, 0x666666             , 0x999999, 0xCCCCCC, 0xFFFFFF];     ]]>     </mx:Script>     <mx:List id="colorList" width="200"         rowCount="{colors.length}" dataProvider="{colors}"         change="setStyle('backgroundColor',colorList.selectedItem)">         <mx:itemRenderer>             <mx:Component>                 <mx:Box backgroundColor="{uint(data)}"                     width="100%" height="100%"                 />             </mx:Component>         </mx:itemRenderer>     </mx:List> </mx:Application>

■ itemRendererでリストの利用範囲が広がり、直感的に操作できる

　冒頭でも述べましたが、itemRendererは応用範囲が非常に広いため、「複数の選択肢から選択させるコントロール」に当たるものであれば、itemRendererによる実装を検討してみるのもいいでしょう。

　次回はバリデータとフォーマッターについて解説します。

■＠IT関連記事

Flex／AIRの開発環境Flex Builder 3を使ってみよう 現場で使えるFlex実践テクニック（特別編）　今秋に機能確定版がリリース予定のFlex Builder 3。EclipseベースのFlex／AIR開発環境のインストール方法と新機能を紹介 「リッチクライアント ＆ 帳票」フ ォーラム 2007/9/6

Eclipseで開発可能になったAdobe Flex 2 リッチクライアント・プロダクトレビュー　今年登場するAdobe Flex 2はEclipseプラグインを開発環境とするリッチクライアントフレームワークに生まれ変わった 「リッチクライアント ＆ 帳票」フォーラム 2006/4/8

プロフィール：成瀬　勉（なるせ つとむ） クラスメソッド株式会社　エンタープライズサービス部門アーキテクト Macromedia FLASH MX 2004 Developer認定技術者 FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。 クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。 ブログ（C:\narun）も更新中。

1-2-3

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

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