지난 시간 제기한 문제점은 아래와 같았습니다.

1. "Y", "N" 값으로만 작동하게 되어있다.

2. CheckBox를 클릭하면 뭔가 다른 행동을 하고 싶을땐 어떻게 하나.

외부에서 들어오는 데이터가 "0"이나 "1"이면 어떻한다?(혹은 true 나 false일지도..)

CheckBox를 클릭하면 Alert 창이 떠야한다면?

이럴때마다 ItemRenderer를 열어서 수정해야한다면 말이 안되겠지요.

일단 2번 같은 경우는 제가 알기로는 두가지 방법이 있습니다만 그중 하나는 Bubbles라는 이벤트 속성을 이용하는 방법입니다만 ItemRenderer에서 이벤트를 발생시키면서 bubbles 속성을 true로 지정해주면 DataGrid 밖에서 이벤트를 받아올 수 있지요.

다만.. bubbles라는 녀석의 특성상 데이터가 많이 꼬일 염려가 있다는게 문제입니다.

(꼬인다는건 "디버깅"이 어려워질 수 있다는 말을 쉽게 풀어 쓴 말입니다.)

그래서 저는 가장 확실한 방법으로 CallBack 함수를 지정해 놓는 방법을 선택했습니다.

아래의 코드를 봐주세요.

Main.mxml
[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:renderers="classes.controls.renderers.*">
<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.controls.Alert;

    [Bindable]
    private var ac:ArrayCollection = new ArrayCollection([
                                        {index:1, description:"test1", toggle:"Y"},
                                        {index:2, description:"test2", toggle:"N"},
                                        {index:3, description:"test3", toggle:"N"},
                                        {index:4, description:"test4", toggle:"Y"},
                                        {index:5, description:"test5", toggle:"N"},
                                        {index:6, description:"test6", toggle:"N"},
                                        {index:7, description:"test7", toggle:"Y"},
                                        {index:8, description:"test8", toggle:"N"},
                                        {index:9, description:"test9", toggle:"N"},
                                        {index:10, description:"test10", toggle:"N"},
                                        {index:11, description:"test11", toggle:"N"},
                                        {index:12, description:"test12", toggle:"N"}
                                        ]);

    public function checkBoxRendererClickHandler(data:Object):void
    {
        Alert.show("click by " + data.description);
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
    <mx:columns>
        <mx:DataGridColumn headerText="index" dataField="index" />
        <mx:DataGridColumn headerText="description" dataField="description" />
        <mx:DataGridColumn headerText="radio" dataField="toggle">
            <mx:itemRenderer>
                <mx:Component>
                    <renderers:CheckBoxRenderer onClickFunction="{outerDocument.checkBoxRendererClickHandler}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

CheckBoxRenderer.as
[code as3]
package classes.controls.renderers
{
//-----------------------------------------------------------------------------
//
//  Import
//
//-----------------------------------------------------------------------------
import flash.events.MouseEvent;

import mx.core.IDataRenderer;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
import mx.events.FlexEvent;

use namespace mx_internal;

public class CheckBoxRenderer extends CheckBox
{
    //-----------------------------------------------------------------------------
    //
    //  Constructor
    //
    //-----------------------------------------------------------------------------
    /**
     *  Constructor.
     */
    public function CheckBoxRenderer()
    {
        super();
    }

    //-----------------------------------------------------------------------------
    //
    //  Variables
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  데이터 변경 확인 플래그
     */
    private var dataChanged:Boolean = false;

    //-----------------------------------------------------------------------------
    //
    //  Properties
    //
    //-----------------------------------------------------------------------------
    //-------------------------------------
    //  onClickFunction
    //-------------------------------------
    /**
     *  @private
     */    
    private var _onClickFunction:Function;
    /**
     *  클릭시 실행할 콜백함수 속성
     */
    public function set onClickFunction(value:Function):void
    {
        _onClickFunction = value;
    }
    /**
     *  @private
     */    
    public function get onClickFunction():Function
    {
        return onClickFunction;
    }
    //-----------------------------------------------------------------------------
    //
    //  Override Properties
    //
    //-----------------------------------------------------------------------------
    override public function set data(value:Object):void
    {
        super.data = value;

        dataChanged = true;
        invalidateProperties();
    }

    //-----------------------------------------------------------------------------
    //
    //  Override Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function createChildren():void
    {
        super.createChildren();
    }

    /**
     *  @private
     */
    override protected function commitProperties():void
    {
        super.commitProperties();

        if(dataChanged)
        {
            dataChanged = false;
            updateProperties();
        }
    }

    /**
     *  @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        currentIcon.x = (unscaledWidth - currentIcon.width) / 2;
    }

    //-----------------------------------------------------------------------------
    //
    //  Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  CheckBox의 속성을 변경
     */
    private function updateProperties():void
    {
        if(listData.label == "Y")
        {
            selected = true;
        }
        else
        {
            selected = false;
        }

        invalidateDisplayList();
    }

    //-----------------------------------------------------------------------------
    //
    //  Override EventHandler
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function clickHandler(event:MouseEvent):void
    {
        super.clickHandler(event);

        //data[DataGridListData(listData).dataField] = selected ? "Y" : "N";

        if(selected)
        {
            data[DataGridListData(listData).dataField] = "Y";
        }
        else
        {
            data[DataGridListData(listData).dataField] = "N";
        }

        if(_onClickFunction != null)
        {
            _onClickFunction(data);
        }
    }
}
}
[/code]

위와같이 코딩하게 되면 아래와 같은 산출물이 나오게 됩니다.

CheckBoxRenderer를 클릭해보세요. Alert창이 뜨는걸 볼 수 있지요.

그럼 2번 문제는 해결된것 같습니다. 그럼 1번 문제인 "Y", "N" 이외의 다른 문자열이 들어올땐 어떻게 할까요? 라는 문제는 방금 2번 문제를 해결한것과 같이 해결하면 될것 같습니다.

아래 처럼요.

[code as3]
package classes.controls.renderers
{
//-----------------------------------------------------------------------------
//
//  Import
//
//-----------------------------------------------------------------------------
import flash.events.MouseEvent;

import mx.core.IDataRenderer;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
import mx.events.FlexEvent;

use namespace mx_internal;

public class CheckBoxRenderer extends CheckBox
{
    //-----------------------------------------------------------------------------
    //
    //  Constructor
    //
    //-----------------------------------------------------------------------------
    /**
     *  Constructor.
     */
    public function CheckBoxRenderer()
    {
        super();
    }

    //-----------------------------------------------------------------------------
    //
    //  Variables
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  데이터 변경 확인 플래그
     */
    private var dataChanged:Boolean = false;
    //-----------------------------------------------------------------------------
    //
    //  Properties
    //
    //-----------------------------------------------------------------------------
    //-------------------------------------
    //  onClickFunction
    //-------------------------------------
    /**
     *  @private
     */    
    private var _onClickFunction:Function;

    /**
     *  클릭시 실행할 콜백함수 속성
     */
    public function set onClickFunction(value:Function):void
    {
        _onClickFunction = value;
    }

    /**
     *  @private
     */    
    public function get onClickFunction():Function
    {
        return onClickFunction;
    }

    //-------------------------------------
    //  selectedFlag
    //-------------------------------------
    /**
     *  @private
     */    
    private var _selectedFlag:Array = ["Y", "N"];

    /**
     *  <p>true, false를 처리할 flag를 Array형태로 받아 처리.</p>
     *  <p>이때 selectedFlag의 length는 2를 초과할 수 없음.</p>
     *  @default    ["Y", "N"]
     */    
    public function set selectedFlag(value:Array):void
    {
        if(value.length > 2)
        {
            throw(new Error("selectedFlag:Array의 값은 두개를 초과할 수 없습니다."));
        }
        _selectedFlag = value;
    }

    /**
     *  @private
     */    
    public function get selectedFlag():Array
    {
        return _selectedFlag;
    }
    //-----------------------------------------------------------------------------
    //
    //  Override Properties
    //
    //-----------------------------------------------------------------------------
    override public function set data(value:Object):void
    {
        super.data = value;
        dataChanged = true;
        invalidateProperties();
    }
    //-----------------------------------------------------------------------------
    //
    //  Override Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function createChildren():void
    {
        super.createChildren();
    }

    /**
     *  @private
     */
    override protected function commitProperties():void
    {
        super.commitProperties();

        if(dataChanged)
        {
            dataChanged = false;

            updateProperties();
        }
    }

    /**
     *  @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        currentIcon.x = (unscaledWidth - currentIcon.width) / 2;
    }

    //-----------------------------------------------------------------------------
    //
    //  Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  CheckBox의 속성을 변경
     */
    private function updateProperties():void
    {
        if(data[DataGridListData(listData).dataField] == _selectedFlag[0])
        {
            selected = true;
        }
        else
        {
            selected = false;
        }

        invalidateDisplayList();
    }

    //-----------------------------------------------------------------------------
    //
    //  Override EventHandler
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function clickHandler(event:MouseEvent):void
    {
        super.clickHandler(event);

        //data[DataGridListData(listData).dataField] = selected ? _selectedFlag[0] : _selectedFlag[1];

        if(selected)
        {
            data[DataGridListData(listData).dataField] = _selectedFlag[0];
        }
        else
        {
            data[DataGridListData(listData).dataField] = _selectedFlag[1];
        }

        if(_onClickFunction != null)
        {
            _onClickFunction(data);
        }
    }
}
}
[/code]

이렇게 수정하고 나면 눈으로 보기엔 아무 바뀐게 없어 보일지 모르겠지만 데이터가 "Y", "N"이 아니라 true나 false로 들어온다 하더라도 selectedFlag를 변경해주면 바로 적용할 수 있게 된다.

(163번째 줄 확인 꼭 하셔야합니다. label로 되어있던걸 data에서 바로 값을 뽑아서 비교하게끔 했어요. 이유는 true나 false같은 경우는 String이 아니기때문에 비교식 성립이 안되거든요.)

아래와 같이 Main.mxml 파일을 수정해보면 알 수 있다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:renderers="classes.controls.renderers.*">
<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.controls.Alert;

    [Bindable]
    private var ac:ArrayCollection = new ArrayCollection([
                               {index:1, description:"test1", toggle:true},
                               {index:2, description:"test2", toggle:false},
                               {index:3, description:"test3", toggle:false},
                               {index:4, description:"test4", toggle:true},
                               {index:5, description:"test5", toggle:false},
                               {index:6, description:"test6", toggle:false},
                               {index:7, description:"test7", toggle:true},
                               {index:8, description:"test8", toggle:false},
                               {index:9, description:"test9", toggle:false},
                               {index:10, description:"test10", toggle:false},
                               {index:11, description:"test11", toggle:false},
                               {index:12, description:"test12", toggle:false}
                               ]);

    public function checkBoxRendererClickHandler(data:Object):void
    {
        Alert.show("click by " + data.description);
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
    <mx:columns>
        <mx:DataGridColumn headerText="index" dataField="index" />
        <mx:DataGridColumn headerText="description" dataField="description" />
        <mx:DataGridColumn headerText="radio" dataField="toggle">
            <mx:itemRenderer>
                <mx:Component>
                    <renderers:CheckBoxRenderer
                        selectedFlag="{[true, false]}"
                        onClickFunction="{outerDocument.checkBoxRendererClickHandler}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

</mx:Application>
[/code]

이제 대충 감이 오시나요?

Renderer에 대해서 감이 오셨다면 다행입니다.

하지만 "CheckBox"는 대충 알겠는데 "ComboBox"는? "ComboBoxRenderer"는 어떻게 만드나요? 라고 하신다면 1, 2, 3회에 걸쳐 Renderer에 대해 설명한 이유가 없어요. 다시 한번 훑어보시고 연구하시면 될거 같아요.

답은 스스로 만들어가는 것.

다음 시간엔... HeaderRenderer를 해볼까 하다가 좀 다른게 만져보고 싶어져서.. 기대하세요.

경력사원임에도 불구하고 나이가 어려서 그런지 신입사원 연수를 다녀오라는 지시에 지난 목요일 금요일 다녀오는 바람에 ItemRenderer 이야기가 늦어졌습니다. 기다리신 분 계신가요?? 죄송합니다. 본의아니게;;

아무튼 DataGrid ItemRenderer 라는 뜨거운 감자를 삼키기위해 어떤 모양의 ItemRenderer를 만들지 한번 생각해보도록 할까요.

처음이니 간단하게 CheckBox 아이템 렌더러를 만들도록 해봅시다.

일단 메인 어플리케이션을 만들어 놓습니다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;

    [Bindable]
    private var ac:ArrayCollection = new ArrayCollection([
                                     {index:1, description:"test1", toggle:"Y"},
                                     {index:2, description:"test2", toggle:"N"},
                                     {index:3, description:"test3", toggle:"N"},
                                     {index:4, description:"test4", toggle:"Y"},
                                     {index:5, description:"test5", toggle:"N"},
                                     {index:6, description:"test6", toggle:"N"},
                                     {index:7, description:"test7", toggle:"Y"},
                                     {index:8, description:"test8", toggle:"N"},
                                     {index:9, description:"test9", toggle:"N"},
                                     {index:10, description:"test10", toggle:"N"},
                                     {index:11, description:"test11", toggle:"N"},
                                     {index:12, description:"test12", toggle:"N"}
                                     ]);
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
    <mx:columns>
        <mx:DataGridColumn headerText="index" dataField="index" />
        <mx:DataGridColumn headerText="description" dataField="description" />
        <mx:DataGridColumn headerText="check" dataField="toggle" />
    </mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

위와같이 코딩하고 컴파일하게되면 아래와 같이 산출물이 나오게 됩니다.

그럼 우리는 ratio라고 적혀있는 곳에 ItemRenderer를 적용할겁니다.

CheckBox를 상속받아 작업할겁니다. 왜 "UIComponent 안쓰고!"라고 말씀하신다면

그 이유는 UIComponent를 상속받은 클래스이기도 하고 지난시간 말했던 IDataRenderer, IDropInListitemRenderer, IListItemRenderer 이렇게 세 인터페이스가 이미 구현되어있으며 우리가 원하는 아이템 렌더러는 CheckBox아이템 렌더러이기 때문이지요.

[code as3]
package classes.controls.renderers
{
//-----------------------------------------------------------------------------
//
//  Import
//
//-----------------------------------------------------------------------------
import mx.core.IDataRenderer;
import mx.controls.CheckBox;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.events.FlexEvent;
public class CheckBoxRenderer extends CheckBox
{
    //-----------------------------------------------------------------------------
    //
    //  Constructor
    //
    //-----------------------------------------------------------------------------
    /**
     *  Constructor.
     */
    public function CheckBoxRenderer()
    {
        super();
    }

    //-----------------------------------------------------------------------------
    //
    //  Variables
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  데이터 변경 확인 플래그
     */
    private var dataChanged:Boolean = false;

    //-----------------------------------------------------------------------------
    //
    //  Override Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function createChildren():void
    {
        super.createChildren();
    }

    /**
     *  @private
     */
    override protected function commitProperties():void
    {
        super.commitProperties();
    }

    /**
     *  @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }
}
}
[/code]

초벌로 createChildren, commitProperties, updateDisplayList도 확장해 두고 아이템 랜더러로 사용하기 위한 준비를 마쳤습니다.

그리고 메인 어플리케이션은 아래와 같이 수정하고 컴파일 합니다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;

    [Bindable]
    private var ac:ArrayCollection = new ArrayCollection([
                                        {index:1, description:"test1", toggle:"Y"},
                                        {index:2, description:"test2", toggle:"N"},
                                        {index:3, description:"test3", toggle:"N"},
                                        {index:4, description:"test4", toggle:"Y"},
                                        {index:5, description:"test5", toggle:"N"},
                                        {index:6, description:"test6", toggle:"N"},
                                        {index:7, description:"test7", toggle:"Y"},
                                        {index:8, description:"test8", toggle:"N"},
                                        {index:9, description:"test9", toggle:"N"},
                                        {index:10, description:"test10", toggle:"N"},
                                        {index:11, description:"test11", toggle:"N"},
                                        {index:12, description:"test12", toggle:"N"}
                                        ]);
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
    <mx:columns>
        <mx:DataGridColumn headerText="index" dataField="index" />
        <mx:DataGridColumn headerText="description" dataField="description" />
        <mx:DataGridColumn headerText="radio" dataField="toggle" itemRenderer="classes.controls.renderers.CheckBoxRenderer" />
    </mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

일단 아래와 같은 결과가 나오면 성공입니다.

CheckBox 가 "Y"냐 "N"이냐에 따라 selected가 처리되는 로직이 필요합니다. 그러기 위해서는 그 코드를 어디에 넣는것이 좋을지 고민해봐야하는데 아까도 말했듯 모든 속성처리는 commitProperties에서 하게 됩니다. commitProperties를 호출하기 위해서는 저번에 이야기 했었던 대로 invalidateProperties() 메서드를 호출하면 됩니다. 그렇다면 코드를 아래와 같이 수정합니다.

[code as3]
package classes.controls.renderers
{
//-----------------------------------------------------------------------------
//
//  Import
//
//-----------------------------------------------------------------------------
import mx.core.IDataRenderer;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.events.FlexEvent;
public class CheckBoxRenderer extends CheckBox
{
    //-----------------------------------------------------------------------------
    //
    //  Constructor
    //
    //-----------------------------------------------------------------------------
    /**
     *  Constructor.
     */
    public function CheckBoxRenderer()
    {
        super();
    }

    //-----------------------------------------------------------------------------
    //
    //  Variables
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  데이터 변경 확인 플래그
     */
    private var dataChanged:Boolean = false;
    //-----------------------------------------------------------------------------
    //
    //  Override Properties
    //
    //-----------------------------------------------------------------------------
    override public function set data(value:Object):void
    {
        super.data = value;

        dataChanged = true;

        invalidateProperties();
    }

    //-----------------------------------------------------------------------------
    //
    //  Override Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function createChildren():void
    {
        super.createChildren();
    }

    /**
     *  @private
     */
    override protected function commitProperties():void
    {
        super.commitProperties();
        if(dataChanged)
        {
            dataChanged = false;
            updateProperties();
        }
    }

    /**
     *  @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    //-----------------------------------------------------------------------------
    //
    //  Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  CheckBox의 속성을 변경
     */
    private function updateProperties():void
    {
        if(listData.label == "Y")
        {
            selected = true;
        }
        else
        {
            selected = false;
        }

        invalidateDisplayList();
    }
}
}
[/code]

위와 같이 코딩하게 되면 아래와 같은 산출물이 나오게 됩니다.

썩 잘나오는거 같습니다. 몇가지 마음에 안 드는 것이 있는데 일단 CheckBox가 셀의 중앙에 갔으면 좋겠고 CheckBox를 클릭하고 휠을 돌려보면 Check가 풀려버리는 버그가 있다는 것이지요.

CheckBox를 중앙에 놓으려면 CheckBox의 너비를 알아야하는데 그것은 CheckBox는 기본적으로 14픽셀의 넓이를 갖습니다. 그것을 어떻게 아냐구요?

measuredWidth를 trace 해보면 간단하게 알 수 있습니다. 아, measuredWidth는 컨포넌트 객체의 기본 너비를 이야기 합니다.

위의 두가지 문제점을 해결하기 위해 아래와 같이 코드를 수정합니다.

[code as3]
package classes.controls.renderers
{
//-----------------------------------------------------------------------------
//
//  Import
//
//-----------------------------------------------------------------------------
import flash.events.MouseEvent;

import mx.core.IDataRenderer;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
import mx.events.FlexEvent;

use namespace mx_internal;

public class CheckBoxRenderer extends CheckBox
{
    //-----------------------------------------------------------------------------
    //
    //  Constructor
    //
    //-----------------------------------------------------------------------------
    /**
     *  Constructor.
     */
    public function CheckBoxRenderer()
    {
        super();
    }

    //-----------------------------------------------------------------------------
    //
    //  Variables
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  데이터 변경 확인 플래그
     */
    private var dataChanged:Boolean = false;

    //-----------------------------------------------------------------------------
    //
    //  Override Properties
    //
    //-----------------------------------------------------------------------------
    override public function set data(value:Object):void
    {
        super.data = value;

        dataChanged = true;

        invalidateProperties();
    }

    //-----------------------------------------------------------------------------
    //
    //  Override Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function createChildren():void
    {
        super.createChildren();
    }

    /**
     *  @private
     */
    override protected function commitProperties():void
    {
        super.commitProperties();
        if(dataChanged)
        {
            dataChanged = false;

            updateProperties();
        }
    }

    /**
     *  @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        currentIcon.x = (unscaledWidth - currentIcon.width) / 2;
    }

    //-----------------------------------------------------------------------------
    //
    //  Methods
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     *  CheckBox의 속성을 변경
     */
    private function updateProperties():void
    {
        if(listData.label == "Y")
        {
            selected = true;
        }
        else
        {
            selected = false;
        }

        invalidateDisplayList();
    }

    //-----------------------------------------------------------------------------
    //
    //  Override EventHandler
    //
    //-----------------------------------------------------------------------------
    /**
     *  @private
     */
    override protected function clickHandler(event:MouseEvent):void
    {
        super.clickHandler(event);

        //data[DataGridListData(listData).dataField] = selected ? "Y" : "N";

        if(selected)
        {
            data[DataGridListData(listData).dataField] = "Y";
        }
        else
        {
            data[DataGridListData(listData).dataField] = "N";
        }
    }
}
}
[/code]

currentIcon이라는 생소한 속성을 위에서 보실 수 있습니다. 그것은 체크박스에서 체크되는 아이콘을 지칭합니다. 그 currentIcon이란 녀석은 mx_internal이라는 접근자를 이용하고 있고 LanguageReference에는 표시되지 않고 있어서 그 존재를 모르는 사람이 많습니다.

예전에 저도 그것을 몰라서 HBox에다가 넣고 horizontalAlign="center"를 주는 바보같은 짓을 일삼았는데 이 사실을 알고 난뒤에 Container를 사용하지 않고 좀더 가볍게 itemRenderer를 만들어 낼 수 있었지요.

그래서 updateDisplayList() 메서드에서 좌표를 잡아서 셀의 중앙에 놓고 clickHandler라는 메서드를 확장하여 변경된 값을 data에 반영하게 합니다. 그렇게 되면 아래와 같은 결과물이 나오게 되지요.

오. 그럴싸하게 작동하는 것 같습니다만 몇가지 아쉬운점이 있습니다.

1. "Y", "N" 값으로만 작동하게 되어있다.

2. CheckBox를 클릭하면 뭔가 다른 행동을 하고 싶을땐 어떻게 하나.

이렇게 두가지 사항인데요.

이 부분에 대해서는 다음시간에 알아보도록 해요~

사실 Flex를 개발하다보면 DataGrid를 밥먹듯이 사용하는 경우가 많지요.

하지만 모두가 알다시피 DataGrid를 이용하는데 있어서 가장 큰일이 바로 아이템렌더러를 만드는 것일지도 모르겠습니다.(모르는게 아니에요. 당연할거라고 생각하고 있습니다.)

하지만 아이템렌더러.. 만들기 쉽지 않습니다.

저는 심지어 이런 코드도 봤지요.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
    import mx.collection.ArrayCollection;

    [Bindable]
    private var ac:ArrayCollection = new ArrayCollection([
                        {check: true, description: "test1"},
                        {check: true, description: "test1"},
                        {check: true, description: "test1"},
                        {check: true, description: "test1"},
                        {check: true, description: "test1"}]);
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
    <mx:columns>
        <mx:DataGridColumn dataField="check">
             <mx:itemRenderer>
                 <mx:Component>
                     <mx:CheckBox />
                 </mx:Component>
             </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="description" />
    </mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

이렇게 하면 아래처럼 나오긴 하겠지요.

하지만 문제는 아다시피 저기서 아무리 체크박스를 눌러대도 실데이터는 바뀌지 않는다는 사실입니다.

그 다음에 밀려오는 문제는 "데이터가 변하지 않아요? 어쩌죠?" 하는 질문을 올려서 답변을 받아보거나 책을 찾아보거나 뭐.. 여러가지 행동들을 할 수 있을테지만 문제는 늘 그렇듯 근본적인 해결이 되지 않는 다는 사실입니다.

Flex 프로젝트를 1년간 11개나 해치워보니 알 수 있는건 당연하게도 매번 아이템 렌더러를 그때 그때마다 새로 만든다는게 엄청나게 귀찮은 일이었고 화면설계서를 받아보면 경악하여 기획자와 디자이너를 닥달하며 "구현이 불가능한 기능"이라는 사실을 강조하고 화면설계를 수정하자 요구 했었습니다.

사실 뭐.. 프로젝트에 투입되고 본격적인 개발이 시작되고 난뒤 약 40%정도의 시간을 그렇게 설득하고 우회하는 방법을 찾느라 소비했지요.

그렇다면 근본적인 해결점을 찾아보는 것이 어떻지 고민해보는 것이 좋겠다 싶었습니다.

괜찮은 아이템 렌더러를 만들어 놓고 앞으로 계속해서 이용하는 것이지요. 일단 그런 아이템 렌더러를 만들기 위해서는 데이터 그리드가 어떻게 만들어졌는지 알아야 합니다.

데이터 그리드의 구조 입니다.

전체적으로 각 객체의 컨트롤을 맡고 있는 DataGrid 상위 객체 안에 DataGridColumn들이 Array형태로 들어가 있고 DataGridColumn 안에 Header와 ItemRenderer가 같이 들어있습니다.

(단순하게 표현하면 그렇다는 거지요.. 실제로는 더 까다롭고 복잡한 구조입니다..)

일단 저정도만 알고 있으면 우리가 만들려는 DataGridItemRenderer가 어떤 놈인지 mx 패키지에서 확인해볼 필요가 있습니다.

TextField군요.. DataGridRenderer를 확장해서는 버튼이나 콤보박스같은건 넣을 수가 없겠다고 판단됩니다. 그럼 결국 DataGridItemRenderer에서 몇가지 인터페이스 클래스를 구현하여 아이템 렌더러를 만들어 내지요. 뭐. 저것도 사람이 만든건데 우리라고 만들지 말란법은 없으니까요.

일단 구현해야할 인터페이스 클래스는 IDataRenderer, IDropInListItemRenderer, IListItemRenderer 이렇게 3가지면 괜찮습니다. ILayoutManagerClient나 IStyleClient는 왜 구현하지 않냐고 물어보시면  우리는 UIComponent를 상속받아 아이템 렌더러를 만들것이기 때문이라고 말씀드리고 싶습니다.

왜냐하면 UIComponent는 ILayoutManagerClient나 IStyleClient를 구현하고 있기 때문이지요.

이러한 연유로 IDataRenderer, IDropInListItemRenderer, IListItemRenderer 이렇게 3가지 인터페이스만 구현해 볼까 합니다.

중요한 첫번째 내용이 끝이 났어요.

두번째 내용은 Flex의 UIComponent의 라이프 사이클(Life Cycle)에 대해 알아야할 순서입니다.

UIComponent의 Protect 접근자 클래스를 잘 이해해야하는데요.

그 중에서도 특히 updateDisplayList() 메서드와 createChildren()메서드. 그리고 commitProperties() 메서드를 잘 이해해야합니다.

이 updateDisplayList라는 메서드는 자식객체를 그리거나 혹은 자식객체의 사이즈나 위치를 변경할 때 사용됩니다. 그리고 Flex에서 이 메서드를 호출하기 위해서는 invalidateDisplayList()라는 메서드를 호출하거나 자식객체를 addChild할때 실행되게 되어있는 메서드입니다.

한마디로 자식객체에 변경이 생겨서 새로 화면을 그려내야할때 사용되는 녀석인데요.

자칫 잘못하면 본의아니게 계속해서 호출해 시스템을 다운시키는 원인이 될 수 있으니 조심히 사용해야합니다.

자식객체를 생성할때 호출하는 녀석으로 컨포넌트를 최초에 생성시킬때 한번 호출되고 다음부터는 고의로 호출하지 않는이상 호출되지 않는 메서드입니다.

commitProperties 메서드는 자식객체를 addChild()하거나 invalidateProperties() 에서드를 호출하면 실행되는 메서드로 이때 자식객체의 프로퍼티를 지정하고 변경값을 적용하는 역할을 합니다.

이정도만 알고 있으면 어느정도 아이템렌더러를 만들 수 있는 구색은 갖춰졌습니다.

다음시간에 본격적으로 시작해 보도록 할까요?