DataGrid 의 아이템 랜더러에 ColorPicker 컴포넌트 사용하기

편집 가능한 데이터 그리드는 다음과 같이 만든다.


 기본적으로 TextInput 컴포넌트가 Editor로 제공된다. 따라서 DataGridColumn 노드는 editable = true로 값을 설정 할때 itemEditor="{new ClassFactory(mx.controls.TextInput)}" editorDataField="text" 구문이 함께 초기 세팅 된다고 봐도 무방할 것 같다. 참고로 DataGridColumn에는 itemEditor, itemRenderer 속성이 있고 두 속성 모두 IFactory 를 구현하도록 되어 있다. 위에서 ClassFactory 클래스를 사용한 이유이다. rendererIsEditor 속성은 아이템 렌더러를 에디터로 사용할 것인지 정하는 속성이다.

ColorPicker를 렌더러로 사용하기 위해서 위와 같이 itemEditor="{new ClassFactory(mx.controls.ColorPicker)}" 이렇게 사용하면 될 것 같으나 잘 되지 않는다. 이유를 알아보자.

일단, itemEditor=ColorPicker 로 설정하면 ColorPicker를 mx.controls.listClasses.IListItemRenderer로 변환할 수 없다는 에러가 발생한다. 아마도 데이터 그리드의 렌더러는 모두 IListItemRenderer 를 구현해야 하는 것 같다. IListItemRenderer 인터페이스를 찾아보니 대충 이런 내용이 있다.

• 리스트 컴퍼넌트용의 아이템 렌더러와 아이템 에디터는, IListItemRenderer 인터페이스를 Implements할 필요가 있다.
• IListItemRenderer 인터페이스는 다른 몇 개의 인터페이스들의 조합으로 구성되어 있는데 UIComponent는 IDataRenderer 인터페이스만 빼고 이미 모두 구현 되어 있기 때문에 UIComponent를 상속받은 객체를 렌더로로 사용하려면 IDataRenderer 인터페이스만 추가로 구현해 주면 된다.
• 아이템 렌더러 및 아이템 에디터에 대해서는, IDataRenderer 인터페이스를 사용해 리스트 클래스의 dataProvider부터 데이터를 전달 받는다  

IListItemRenderer 를 구현한 컴포넌트에는 Button , ComboBox , Container , DataGridItemRenderer , DateField , Image , Label , ListBase , ListItemRenderer , MenuBarItem , MenuItemRenderer , NumericStepper , TextArea , TextInput , TileListItemRenderer , TreeItemRenderer 이런 것들이 있는데 ColorPicker는 없었다. 따라서 ColorPicker를 에디터로 사용하기 위해선 has-a, is-a 상속으로 IDataRenderer만 구현해 주면 될 것 같다. 다행히도 구현은 복잡하지 않다. dataProvider로부터 전달받는 데이터를 저장할 data 변수만 생성해 주면 된다.


private var _data:Object;

[Bindable("dataChange")]
public function get data() :Object {
	return _data;
}
public function set data(value:Object) :void{
	_data = value;
	dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}

http://philflash.inway.fr/flex/dgRendererSimple/dgRendererSimple.html 에서 샘플과 소스를 참고할 수 있다.