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

» 2007年09月25日 00時00分公開

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

【実践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>