アーカイブ

どう書く? itemRenderer (CheckBox)

今日も、みんなが大嫌いな(?) DataGird について書きます。

ソースの可読性や管理のしやすさを考慮した個人的な「宗教」に基づき、見た目に直接関与しない MXML タグは、可能な限り AS クラスに記述したいと思っています。
DataGrid のヘルプや Tips などで見かける <mx:itemRenderer> タグも、私の「断罪対象」にカテゴライズされるので、サンプルを用意しました。

ItemRendererCheckBoxSample (画面)
http://labs.taiga.jp/flex2/ItemRendererCheckBoxSample/

ItemRendererCheckBoxSample (ソース)
http://labs.taiga.jp/flex2/ItemRendererCheckBoxSample/srcview/

まず、ItemRendererCheckBoxSample.mxml の <mx:DataGridColumn> タグに着目します。

<!-- カスタム CheckBox -->
<mx:DataGridColumn
    headerText       = "colmn01"
    dataField        = "checkBoxValue"
    itemRenderer     = "lib.SubCheckBox"
    rendererIsEditor = "true"
    editorDataField  = "selected"
    editable         = "true"
/>

<!-- 標準の CheckBox -->
<mx:DataGridColumn
    headerText       = "colmn02"
    dataField        = "hoge"
    itemRenderer     = "mx.controls.CheckBox"
    rendererIsEditor = "true"
    editorDataField  = "selected"
    editable         = "true"
/>

itemRenderer プロパティ値に、カスタム CheckBox クラスを定義しています。(ついでに 2 カラム目には、標準の CheckBox を定義しました)
他には、rendererIsEditor プロパティと、editorDataField プロパティを設定していますが、どちらも CheckBox の編集に関わる大切なプロパティです。
rendererIsEditor プロパティ値を true と定義することによって、アイテムレンダラーがアイテムエディタであることを示します。( itemEditor プロパティを使用するより良いみたいです)
editorDataField プロパティには、アイテムエディタのプロパティ名が設定できるので、今回は CheckBox のプロパティ名である slected を定義しています。

その他 itemRenderer 周りの詳しい解説は、@IT に掲載されているクラスメソッド社の成瀬氏の記事に詳しく書かれているので、興味のある方は下記リンク先を見てください。


参考: 現場で使えるFlex実践テクニック(4)
Page1
Page2
Page3

次に、SubCheckBox.as に着目します。

/**
 * commitProperties
 * @private
 * Binding しているプロパティの更新
 */
override protected function commitProperties():void
{
    selected = mValue;
    super.commitProperties();
}
/**
 * updateDisplayList
 * @param aUnscaledWidth 親コンテナにより決定されるコンポーネントの幅
 * @param aUnscaledHeight 親コンテナにより決定されるコンポーネントの高さ
 * @private
 * CheckBox の再描画と再配置
 */
override protected function updateDisplayList(aUnscaledWidth:Number, aUnscaledHeight:Number):void
{
    super.updateDisplayList(aUnscaledWidth, aUnscaledHeight);
    var lObject:IFlexDisplayObject = mx_internal::currentIcon;
    if(lObject)
    {
        var lIconWidth :uint = lObject.width;
        var lIndent    :uint = (width - lIconWidth) / 2;
        lObject.x = lIndent;
    }
}

itemRenderer のコーディングお作法という趣旨から若干脱線しますが、commitProperties() メソッドと updateDisplayList() メソッドをオーバーライドして、dataProvider の内容を更新させたり再描画させたりしています。
この処理を記述しないと、2 カラム目に表示させている標準 CheckBox のような状態になってしまいます。

commitProperties() メソッドと updateDisplayList() メソッドについての詳しい解説は、仲間内で神ブログと呼ばれている前回よりは成長したブログさんの記事に詳しく書かれているので、興味のある方は下記リンク先を見てください。


参考:前回よりは成長したブログ
[Flex]asでカスタムコンポーネント(3)