Flex入門～アイテムレンダラーとアイテムエディタ編～だじぇ

久しぶりの投稿です。
これからまたしばらくFlexを勉強していきます。
早くマニアックなネタを書けるようになりたいなぁ。

アイテムレンダラーとアイテムエディタ

グリッドビュー（Excelの表みたいなやつ）を触ったことがある人は多いと思いますが、その時セルをクリックすると編集可能なテキストボックスが表示されたことがないでしょうか？
これはセルをクリックしたイベントで表示が切り替わるようになっているのですが、その際表示された編集用のコントロールをFlexでは「アイテムエディタ」と呼びます。
さらに編集用のコントロールからフォーカスをはずすと、参照状態に戻りますよね？この参照状態でデータを表示するコントロールをFlexでは「アイテムレンダラー」と呼びます。

アイテムレンダラー

アイテムレンダラーはListBaseクラスに用意されており、それから派生するコントロールにはアイテムレンダラーを設定できるそうです（プロパティはitemRenderer）。代表的なコントロールがDataGridやTreeです。
各コントロールには、それぞれデフォルトのアイテムレンダラーが用意されています。DataGridであればDataGridItemRenderer、TreeであればTreeItemRendererになります。
まずはデフォルトのアイテムレンダラーのままDataGridを表示してみます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28 },
            { userid: 2, name: "家忍正孝", age: 30 },
            { userid: 3, name: "家忍果凛", age: 32 }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}">
        <mx:columns>
            <mx:DataGridColumn dataField="userid" />
            <mx:DataGridColumn dataField="name" />
            <mx:DataGridColumn dataField="age" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

と、まあこれは今までも表示していたわけですが、実はこれがデフォルトのアイテムレンダラーで表示していた状態だったというわけです。

itemRendererプロパティをコントロールを指定して、別のコントロールをレンダラーとして表示してみます。
ちなみにitemRendererプロパティに指定されたコントロールを「ドロップインアイテムレンダラー」と呼びます。itemEditorプロパティに指定した場合は「ドロップインアイテムエディタ」です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28 },
            { userid: 2, name: "家忍正孝", age: 30 },
            { userid: 3, name: "家忍果凛", age: 32 }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}">
        <mx:columns>
            <mx:DataGridColumn dataField="userid" itemRenderer="mx.controls.Button" />
            <mx:DataGridColumn dataField="name" itemRenderer="mx.controls.TextInput" />
            <mx:DataGridColumn dataField="age" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

ちょっと変な感じがしますが、レンダラーとして指定したコントロールが表示されていますね。
ドロップインアイテムにFlexの既存コントロールを渡したのですが、ボタンのラベルに表示できないような制約があるようです。これはまず使わない気がします。

DataGridColumnタグのitemRendererタグ子要素としてコントロールを指定することもできます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var userDataList:Array = [
            { userid: 1, name: "家忍和馬", age: 28 },
            { userid: 2, name: "家忍正孝", age: 30 },
            { userid: 3, name: "家忍果凛", age: 32 }
        ];
    ]]>
    </mx:Script>
    
    <mx:DataGrid dataProvider="{userDataList}">
        <mx:columns>
            <mx:DataGridColumn dataField="userid">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Button label="{data.userid}"></mx:Button>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="name">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:TextInput></mx:TextInput>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="age" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

このように指定したコントロールを「インラインアイテムレンダラー」と呼びます。
ドロップインアイテムレンダラーとは異なり、レンダラーのコントロールのプロパティをある程度好きに設定できるようになります。上記の例だとButtonのlabelプロパティに値を設定している箇所になります。リストのデータには「data」という暗黙変数を通じてアクセスすることができます。カラムに対応したプロパティ以外のデータでもアクセス可能です。


今回はここまで。
次回はアイテムエディタのサンプルと、アイテムレンダラー・アイテムエディタを自作コンポーネントとして別MXMLファイルに分けるということをやってみようと思います。