flex3] ItemRenderer 이해 및 활용

IDataRenderer인터페이스 상속한 ItemRenderer클래스는 data속성을 받을수있다.

private var _data:Object;

[Bindable("dataChange")]

public function get data():Object{
return _data;
}

public function set data(value:Object):void{
_data = value
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}

IDropInListItemRenderer 인터페이스 상속한 ItemRenderer 클래스는 listData속성을 받을수있다.

private var _listData:BaseListData;

[Bindable("dataChange")]
public function get listData():BaseListData{
  return _listData;
}

public function set listData(value:BaseListData):void{
_listData = value;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}

* FLEX 메뉴얼 참고


ItemRenderer컴포넌트 작성시 Container클래스 기반으로설계하는것은 IDataRenderer인터페이스를 구현하였기 때문에
data속성을 사용할수있다.



MyItemRenderer.mxml // 아이템렌더러 컴포넌트

<?xml version="1.0" encoding="utf-8"?>
<mx:Container xmlns:mx="http://www.adobe.com/2006/mxml"
 width="110" height="200"
 implements="mx.core.IDataRenderer"
 >
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   private var _data:Object;
   
   [Bindable("dataChange")]
   override public function get data():Object{
    return _data;
   }
   
   override public function set data(value:Object):void{
    super.data = value;
    _data = value;
    dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
   }
   
  ]]>
 </mx:Script>
 
 <mx:Label text="{data.label}:{data.index}" y="0" width="120" height="20" fontSize="12"/>
 <mx:SWFLoader id="sLoader" y="20" width="110" height="160" source="{data.url1}"/>
</mx:Container>

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical">
 <mx:Script>
  <![CDATA[
   
  [Bindable]
  [Embed(source='asserts/17.gif')]
  private var m1:Class;
  
  [Bindable][Embed(source="asserts/18.gif")]
  private var m2:Class;
  
  [Bindable][Embed(source="asserts/19.gif")]
  private var m3:Class;
  
  private function AutoIndex(m:ArrayCollection):ArrayCollection{
   var mLen:Number = m.length;
   for(var i:Number=0; i<mLen;++i){
    m[i].index = i;
   }
   return m;
  }  
  
   
  ]]>
 </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="{AutoIndex(dpd)}"
 width="160" itemRenderer="MyItemRenderer" rowCount="2"/>

</mx:Application>