Flex DataGrid ItemRenderer #1 Enjoy/FLEX2013. 1. 10. 10:03
출처 : http://igna84.blogspot.kr/2010/03/flex-datagrid-itemrenderer-1-%EC%A0%84%EC%B4%88%EC%A0%84.html
Flex DataGrid ItemRenderer #1 - 전초전
사실 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() 에서드를 호출하면 실행되는 메서드로 이때 자식객체의 프로퍼티를 지정하고 변경값을 적용하는 역할을 합니다.
이정도만 알고 있으면 어느정도 아이템렌더러를 만들 수 있는 구색은 갖춰졌습니다.
다음시간에 본격적으로 시작해 보도록 할까요?
