アイテムレンダラ[Flex]

Flexに詳しい人と話していて、このアイテムレンダラを
使えるかどうかでFlexを理解しているかどうかがわかると
言ってました。
個人的な感覚でいえばとっつきづらいけど、仕組みを理解
してしまえば一気に理解が深まる感じですね。
僕の理解がどこまでのものかはわかりませんが、今回は
データグリッドにチェックボックスを表示するアイテム
レンダラをサンプルにしたいと思います。

ポイント

• アイテムレンダラを定義するクラスを作成
  • アイテムレンダラを作りたいコンポーネントを継承する。（今回はCheckBox）
  • プロパティを設定する
• IFactoryクラスを作成する
  • newInstance()メソッドの戻り値に上記の定義したアイテムレンダラを設定する。

サンプル

//アイテムレンダラの定義
//CheckBoxRenderer.as
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;

public class CheckBoxRenderer extends CheckBox
{
    public function CheckBoxRenderer()
    {
        super();
    }
    override public function set data(dto:Object):void {
        super.data = dto;

        //データフィールドの値をselectedプロパティにセット
        var colData : DataGridListData = DataGridListData(listData);
        selected = super.data[colData.dataField];
    }

}

//IFactory
//CheckBoxRendererFactory.as
import mx.core.IFactory;

public class CheckBoxRendererFactory implements IFactory
{
    public function CheckBoxRendererFactory()
    {
    }
    public function newInstance() : *
    {
        var itemRenderer : CheckBoxRenderer = new CheckBoxRenderer();
        return itemRenderer;
    }
}

<!-- DataGridへの設定 ※MXMLは適当に端折ります -->
<!-- DataGridSample.mxml -->
xmlnsにCheckBoxRendererFactoryを呼び出せるようにしておく

<!-- newInstance()メソッドを実装したクラスを呼び出す -->

<renderer:CheckBoxRendererFactory id="check" />

<!-- DataGridColumnにitemRendererを設定 -->
<mx:DataGridColumn id="check" 
                   headerText="チェック"
                   dataField="checkBox"
                   textAlign="center"
                   itemRenderer="{check}" />

実行結果

※画像参照（この画像では一行目にselectedの値をtrue、二行目をfalseに設定しています）

dataFieldとかは適当に設定して試してみてください。
ではでは