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

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

[成瀬勉,クラスメソッド]
前のページへ 1|2|3       

【実践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による実装を検討してみるのもいいでしょう。

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

プロフィール

成瀬 勉(なるせ つとむ)
クラスメソッド株式会社 エンタープライズサービス部門アーキテクト

Macromedia FLASH MX 2004 Developer認定技術者
FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。

クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。
ブログ(C:\narun)も更新中。



前のページへ 1|2|3       

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

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

Focus

- PR -

RSSについて

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

メールマガジン登録

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