태터데스크 관리자

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

태터데스크 메시지

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

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

3. itemRenderer의 사용

여기서는 itemRenderer를 사용하여 나라명과 함께 국기 이미지를 보여주려고 한다.  예제가 있는 폴더에 K.gif, A.gif, C.gif, J.gif가 있는데 이는 각기 그 나라의 국기 이미지에 해당한다그래서 데이터로 사용하는 data_ac라는 ArrayCollectiondata속성에 '.gif'를 붙이면 이미지 경로가 된다는 것을 알 수 있다.


[그림3] Image컴포넌트를 사용하여 화면에 국기 이미지를 같이 보여주는 예제 화면이다.

 

[그림3] List, HorizontalList, TileList, DataGrid, Tree에 이미지를 보여주는 itemRender사용

[예제3] RDExam03.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%">

             <mx:itemRenderer>

                    <mx:Component>

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

                    </mx:Component>

             </mx:itemRenderer>

       </mx:List>

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

             <mx:itemRenderer>

                    <mx:Component>

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

                    </mx:Component>

             </mx:itemRenderer>        

       </mx:HorizontalList>

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

             <mx:itemRenderer>

                    <mx:Component>

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

                    </mx:Component>

             </mx:itemRenderer>        

       </mx:TileList>

       <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="국기">

                           <mx:itemRenderer>

                                 <mx:Component>

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

                                 </mx:Component>

                           </mx:itemRenderer>                           

                    </mx:DataGridColumn>

             </mx:columns>

       </mx:DataGrid>

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

             <mx:itemRenderer>

                    <mx:Component>

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

                    </mx:Component>

             </mx:itemRenderer>        

       </mx:Tree>  

</mx:Application>

 

 


[예제3] 소스코드를 보면 List, HorizontalList, TileList, DataGrid, Tree 모두 itemRenderer라는 속성에 <mx:Image>태그를 사용하여 화면에 국기의 이미지를 보여주고 있다여기서 주의 할 점은 다음과 같다.


 1) itemRenderer의 하위 태그는 반드시 <mx:Component>이어야 한다.

 2) itemRenderer로 전달 되는 객체는 'data'라는 객체로 접근한다여기서는 no, label, data등이 'data'라는 객체로 넘어오므

 data.no, data.label, data.data식으로 사용한다이는 set data()라는 인터페이스 함수를 List, HorizontalList, TileList, DataGrid, Tree 들이 구현하고 있기 때문에 사용이 가능하다.

 3) <mx:Component>의 하위 태그는 하나이어야 한다이는 itemRenderer의 루트태그이기때문이다.

             틀린 예)

             <mx:Component>

                          <mx:HBox .../>

                           <mx:Image .../>

             </mx:Component>

             바른 예)

             <mx:Component>

                           <mx:HBox ...>

                                        <mx:Image .../>

                           </mx:HBox>

             </mx:Component>

 4) itemRenderer의 루트태그는 컨테이너로 시작하는 것이 좋다그래야 레이아웃을 정의할 수가 있다.

 5) itemRenderer의 루트태그에는 <mx:Script>블락을 비롯하여 MXML컴포넌트에서 사용할 수 있는 태그를 넣을 수 있다.

Posted by okgosu

티스토리 툴바