Flex itemRenderers에 대한 이해(Understanding Flex itemRenderers)

Flex는 대용량 데이터를 여러가지 방법으로 나타내는 다양한 컨트롤들을 제공합니다. 예를들면 List, DataGrid, Tree, Charts, AdvancedDataGrid 등이 있죠. 기본적으로는 List콘트롤은 간단한 텍스트만 뿌려주게 되어있습니다.  하지만 itemRenderers을 이용하면 더욱 다양한 방법으로 List를 나타낼 수 있습니다. 즉, 데이터를 뿌려주는 컨트롤들을 커스터마이징하기위해서는 itemRenderers을 사용해야 합니다.  itemRenderers를 이용하는 리스트들의 각각의 열(row)의 컨텐츠들에 더욱 완성더 높은 콘트롤들을 제공함으로써, 더욱 매력있고 창의적이고 실용적인 어플리케이션을 만들 수 있습니다.

아래 모든 예제들은 똑같은 데이터를 사용할 것입니다. : 책에 대한 정보 - 저자, 제목, 발행일, 썸네일이미지 등.  각 레코드는 아래와 같이 XML 노드들입니다.

 

<?xml version="1.0" encoding="UTF-8"?>

<root>

      <book>

            <author>이헌세</author>

            <title>공포의 외인구단</title>

            <image>assets/공포의외인구단.jpg</image>

            <date>Dec 3, 2004</date>

      </book>

      <book>

            <author>이헌세</author>

            <title>버디</title>

            <image>assets/버디.jpg</image>

            <date>Feb 28, 2006</date>

      </book>

</root>

*source code : BookInfo.xml

 

 

 

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx">

     

      <fx:Declarations>

            <fx:XML id="testData" source="BookInfo.xml"/>

      </fx:Declarations>

     

      <mx:List dataProvider="{testData.book}" width="100%" height="100%">

            <mx:itemRenderer>

                  <fx:Component>

                        <mx:Label text="{data.author}: {data.title}" />

                  </fx:Component>

            </mx:itemRenderer>

      </mx:List>

</s:Application>

*source :InlineItemRendererExample1.fxp

 위 예제는 매우 간단한 itemRenderer의 예제입니다. 이 예제에서 중요한 두가지 중요한 포인트는 첫째, inline itemRender는 <mx:itemRenderer>태그를 사용해서 정의합니다. <fx:Component>태그는 그안에 위치하여야 합니다. 그래야 Flex 컴파일러가 inline 컴포넌트임을 알 수 있습니다.  둘째, <mx:Label>태그에서의 데이터바인딩 하는 방식은 {data.author}: {data.title} 이런식으로 합니다.

 

리스트 컨트롤의 itemRenderer Data 속성에 정의되어 있는 레코드를 각각의 itemRenderer객체에 주어야 합니다. 코드를 보시면 주어진 리스트의 열들을 보시면, inline itemRenderer객체는 <book>이라는 XML 노드로 정의된 자신만의 Data 속성을 가질 것 입니다. 리스트를 스크롤 하면, 새로운 열에대한 itemRenderers를 재사용 함으로써 Data 속성은 바뀔 것입니다. 쉽게말해 10개의 Data가 있다고 하면, <mx:itemRenderer>를  10번 쓸 필요가 없다는 말입니다.

 

 

 

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx">

     

      <fx:Declarations>

            <fx:XML id="testData" source="BookInfo.xml"/>

      </fx:Declarations>

     

      <mx:DataGrid width="100%" height="100%" dataProvider="{testData.book}" variableRowHeight="true">

            <mx:columns>

                  <mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" />

                  <mx:DataGridColumn headerText="Author" dataField="author" width="125"/>

                  <mx:DataGridColumn headerText="Title" dataField="title">

                        <mx:itemRenderer>

                             <fx:Component>

                                   <mx:HBox paddingLeft="2">

                                         <fx:Script>

                                               <![CDATA[

                                                     override public function set data( value:Object ) : void {

                                                           super.data = value;

                                                           var today:Number = (new Date()).time;

                                                           var pubDate:Number = Date.parse(data.date);

                                                           if( pubDate > today ) setStyle("backgroundColor",0xff99ff);

                                                           else setStyle("backgroundColor",0xffffff);

                                                     }

                                               ]]>

                                         </fx:Script>

                                         <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />

                                         <mx:Text width="100%" text="{data.title}" />

                                   </mx:HBox>

                             </fx:Component>

                        </mx:itemRenderer>

                  </mx:DataGridColumn>

            </mx:columns>

      </mx:DataGrid>

</s:Application>

*source code :InlineItemRendererExample2.fxp

 

위 예제는 조금 더 복잡한 <mx:List>를 이용한 inline itemRenderer예제입니다. 처음예제와 크게 다르지 않습니다.

 

 

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx"

                     creationComplete="initApp();"

                     >

     

      <fx:Declarations>

            <fx:XML id="testData" source="BookInfo.xml"/>

      </fx:Declarations>

     

      <fx:Script>

            <![CDATA[

                  import events.BuyBookEvent;

                  import mx.controls.Alert;

                 

                  private function initApp() : void

                  {

                        addEventListener( BuyBookEvent.BUY_BOOK, handleBuyBook );

                  }

                 

                  private function handleBuyBook( event:BuyBookEvent ) : void

                  {

                        Alert.show("You have selected '"+event.bookData.title+"' by "+event.bookData.author, "Buy This Book");

                  }

            ]]>

      </fx:Script>

      <mx:TileList width="100%" height="100%"

                         dataProvider="{testData.book}" columnWidth="275" rowHeight="135">

            <mx:itemRenderer>

                  <fx:Component>

                        <mx:HBox verticalAlign="top">

                             <fx:Script>

                                   <![CDATA[

                                         import events.BuyBookEvent;

                                         import mx.core.FlexGlobals;

                                        

                                         public function buyBookEventHandler():void

                                         {

                                               var e:BuyBookEvent = new BuyBookEvent();

                                               e.bookData = data;

                                               dispatchEvent(e);

                                         }

                                   ]]>

                             </fx:Script>

                             <mx:Image source="{data.image}" width="70" height="70" />

                             <mx:VBox height="115" verticalAlign="top" verticalGap="0">

                                   <mx:Text text="{data.title}" fontWeight="bold" width="100%"/>

                                   <mx:Spacer height="20" />

                                   <mx:Label text="{data.author}" />

                                   <mx:Label text="Available {data.date}" />

                                   <mx:Spacer height="100%" />

                                   <mx:HBox width="100%" horizontalAlign="right">

                                         <s:Button label="Buy" click="buyBookEventHandler();" />

                                   </mx:HBox>

                             </mx:VBox>

                        </mx:HBox>

                  </fx:Component>

            </mx:itemRenderer>

      </mx:TileList>

</s:Application>

*source :InlineItemRendererExample3.fxp

 

위 예제는 조금 더 복잡한 예제이지만, <mx:itemRenderer>태그안에 <fx:Component>태그를 갖는 똑같은 구조입니다. <fx:Component>의 목적은 코드상의 ActionScript 클래스 권한을 생성하기위한  MXML 구문을 제공하기 위한것입니다.

 

 

 Example1

 

*source : http://blog.flexdevelopers.com/2009/06/flex-examples-item-renderers-in.html

*source code :ItemRenderersExample.fxp