태터데스크 관리자

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

태터데스크 메시지

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

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

4. itemRenderer에 여러 컴포넌트 사용

여기서는 itemRenderer의 최상위 컴포넌트로 컨테이너를 정의해놓고 여기에 여러 컴포넌트를 넣어서 사용하려고 한다.


[그림4] List, HorizontalList, TileList, DataGrid, Tree itemRenderer VBox를 넣고 그 안에 이미지와 라벨을 같이 넣은 예제를 보여준다.


[예제4]코드를 보면 itemRenderer의 상위태그는 VBox로서 MXML컴포넌트의 정의와 비슷하다.

 

[그림4] List, HorizontalList, TileList, DataGrid, Tree에 이미지와 라벨을 보여주는 itemRenderer사용

[예제4] RDExam04.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:VBox>

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

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

                           </mx:VBox>

                    </mx:Component>

             </mx:itemRenderer>

       </mx:List>

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

             <mx:itemRenderer>

                    <mx:Component>

                           <mx:VBox>

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

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

                           </mx:VBox>

                    </mx:Component>

             </mx:itemRenderer>        

       </mx:HorizontalList>

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

             <mx:itemRenderer>

                    <mx:Component>

                           <mx:VBox>

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

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

                           </mx:VBox>

                    </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:VBox>

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

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

                                        </mx:VBox>

                                 </mx:Component>

                           </mx:itemRenderer>        

                    </mx:DataGridColumn>

             </mx:columns>

       </mx:DataGrid>

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

             <mx:itemRenderer>

                    <mx:Component>

                           <mx:VBox>

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

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

                           </mx:VBox>

                    </mx:Component>

             </mx:itemRenderer>        

       </mx:Tree>  

</mx:Application>

 



Posted by okgosu