태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
김대중 전 대통령 서거 추모글 남기기

예제로 배우는 Flex2009.04.20 02:01

5. itemRenderer MXML컴포넌트로 정의

여기서는 [예제4] itemRenderer MXML컴포넌트로 따로 빼내어서 정의한 것이다. <mx:VBox>로 시작하는 부분을 따로MXML컴포넌트로 정의하여 그 컴포넌트 이름을 각 태그의 itemRenderer의 속성에 써주면 되겠다


여기서는 itemRenderer로 사용할 MXML컴포넌트를 RDExam05RD.mxml로 저장하였고 itemRenderer="{RDExam05RD}의 형식으로 사용하고 있다.


itemRenderer MXML컴포넌트로 사용하면 소스가 보다 간결해지므로 itemRenderer의 코드가 길어질 경우에 사용하면 편리하며반대로 코드에 그대로 사용할 경우(inline itemRenderer)는 소스가 간단할 경우에 사용하는 것이 좋다.

itemRenderer MXML컴포넌트로 정의하여 사용한 결과 화면은 [그림4]와 같다.

 

[예제5] RDExam05.mxml

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

       <mx:Script>

             <![CDATA[

                    import mx.collections.ArrayCollection;

                    [Bindable] private var data_ac:ArrayCollection = new ArrayCollection([

                           {no:1, label:'한국', data:'K'},

                           {no:2, label:'미국', data:'A'},

                           {no:3, label:'중국', data:'C'},

                           {no:4, label:'일본', data:'J'}                       

                    ]);

             ]]>

       </mx:Script>

       <mx:List dataProvider="{data_ac}" width="450" height="100%" itemRenderer="RDExam05RD"/>

       <mx:HorizontalList dataProvider="{data_ac}" width="450" height="100%" itemRenderer="RDExam05RD"/>

       <mx:TileList dataProvider="{data_ac}" width="450" height="100%" itemRenderer="RDExam05RD"/>

       <mx:DataGrid dataProvider="{data_ac}" width="450" height="100%">

             <mx:columns>

                    <mx:DataGridColumn dataField="no" headerText="번호"/>

                    <mx:DataGridColumn dataField="label" headerText="국가"/>

                    <mx:DataGridColumn dataField="data" headerText="국기" itemRenderer="RDExam05RD"/>

             </mx:columns>

       </mx:DataGrid>

       <mx:Tree dataProvider="{data_ac}" width="450" height="100%" itemRenderer="RDExam05RD"/>

</mx:Application>

  

[예제5-1] RDExam05RD.mxml(itemRenderer)

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

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">

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

       <mx:Image source="{data.data}.gif" width="100" height="60"/>

</mx:VBox>

 

Posted by okgosu