Flex3.0&AS3 2009. 2. 2. 23:16

ListBase기반 콤포넌트 이해


ListBase기반의 콤포넌트중 List 콤포넌트의 대한 간단한 예제이다.
아래 내용중에 참고해야될 부분이 빨간색부분 event.itemRenderer.data.url1  이다.
List콤포넌트에 dataProvider 로 ArrayCollection을 바인딩시킨후 ListEvent이벤트를 통해서
List콤포넌트에 바인딩된 dataProvider의 데이타 접근할수가 있다.
ListBase계열을 상속받은 콤포넌트들은 ListBase의 data라는 프로퍼티를통해서 원시데이타에 접근할수있기때문이다.
따라서 itemRednderer.data 는 하나의 item을 가르키게 되고 원하는값을 뽑아낼수있다.

Datagrid나 Tree역시 비슷하다..


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="500">
<mx:Script>
        <![CDATA[                    
            [Bindable]
            [Embed(source='assets/m2.jpg')]
            private var m1:Class; 
            
            [Bindable]
            [Embed(source='assets/m2.jpg')]
            private var m2:Class;
            
            [Bindable]
            [Embed(source='assets/m3.jpg')]
            private var m3:Class;
     
            import mx.events.ListEvent;            
            private function fnRollOver(event:ListEvent):void {
             sLoader.source= event.itemRenderer.data.url1;
            }

            private function fnRollOut(event:ListEvent):void {
                sLoader.source=""
            }  
                            
       ]]>
</mx:Script>

<mx:ArrayCollection id="dpd">
    <mx:source>  
       <mx:Object label="오만과 편견" icon="{m1}" url1="http://imgmovie.naver.com/mdi/mit500/0447/D4728-00.jpg" />
       <mx:Object label="캐리비안의 해적" icon="{m2}" url1="http://imgmovie.naver.com/mdi/mit500/0436/D3679-01.jpg"/>
       <mx:Object label="러브 액츄얼리" icon="{m3}" url1="http://imgmovie.naver.com/mdi/mit500/0368/C6843-00.jpg"/>   
     </mx:source>
</mx:ArrayCollection>

<mx:List id="lData"
 dataProvider="{dpd}"
 width="230"
 itemRollOut="fnRollOut(event);"
 itemRollOver="fnRollOver(event);"
 fontSize="12"
  height="71"/>
<mx:SWFLoader id="sLoader" width="230" height="330"/> 
</mx:Application>