UIComponent를 TileListItemRenderer로 구현합니다.

Question

플렉스에서 작업중인 코드가 있습니다. 16 개의 UIComponent가 Grid Container에 추가되었습니다.

그리드는 실제로 내가 원한 것을 내게주지 않았기 때문에, 필자는 타일리스트를 사용하려고 애 쓰고 있었다.

타일리스트에 항목을 추가하려면 dataprovider와 item renderer를 정의해야합니다.

개념적으로 UIComponent를 가져 와서 itemrenderer로 구현하는 데 어려움을 겪고 있습니다. 누군가 나를 도울 수 있습니까?

내가 보는 2 가지 주요 문제점이 있습니다.

처음에는 처음 구현시 디자인 타임에 고유 UID를 UIComponents에 추가했습니다. 이러한 고유 ID는 응용 프로그램에서 매우 중요하며 tilelistitemrenderer에 할당하는 방법을 잘 모르겠습니다.

두 번째로 내 UIcomponets에는 그리드가 수신 한 3 개의 맞춤 이벤트가 있습니다. 나는이 청취자를 tilelist itemrenderer에 할당하는 방법을 모른다. 여기

내 원래 그리드 코드

GRID 코드

<mx:GridRow id="row0"> 
    <mx:GridItem width="100%" 
     height="100%"> 
    <PadDisplay:Pad id="channel_0_pad_0" 
     channelNumber="0" 
     padNumber="0" 
     currentPadState="{PalletteCode.EMPTY}" 
     verify="verifyItemOnPad(event)" 
     requestplay="requestPlayHandler(event)" 
     requeststop="requestStopHandler(event)"/> 
    </mx:GridItem> 
    <mx:GridItem width="100%" 
     height="100%"> 
    <PadDisplay:Pad id="channel_0_pad_1" 
     channelNumber="0" 
     padNumber="1" 
     currentPadState="{PalletteCode.EMPTY}" 
     verify="verifyItemOnPad(event)" 
     requestplay="requestPlayHandler(event)" 
     requeststop="requestStopHandler(event)"/> 
    </mx:GridItem> 
    <mx:GridItem width="100%" 
     height="100%"> 
    <PadDisplay:Pad id="channel_0_pad_2" 
     channelNumber="0" 
     padNumber="2" 
     currentPadState="{PalletteCode.EMPTY}" 
     verify="verifyItemOnPad(event)" 
     requestplay="requestPlayHandler(event)" 
     requeststop="requestStopHandler(event)"/> 
    </mx:GridItem> 
    <mx:GridItem width="100%" 
     height="100%"> 
    <PadDisplay:Pad id="channel_0_pad_3" 
     width="{padwidth}" 
     height="36" 
     currentPadState="{PalletteCode.EMPTY}" 
     verify="verifyItemOnPad(event)" 
     requestplay="requestPlayHandler(event)" 
     requeststop="requestStopHandler(event)"/> 
    </mx:GridItem> 
</mx:GridRow> 

Heres는 내가 지금 당신이 설정되어야한다

<mx:UIComponent xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="init(event)" 
    dragEnter="input_dragEnterHandler(event)" 
    dragDrop="input_dragDropHandler(event)"> 
<mx:Script> 
    <![CDATA[ 
    import components.remix.events.PadEvent; 
    import mx.binding.utils.BindingUtils; 
    import components.remix.events.PadContentEvent; 
    import mx.core.DragSource; 
    import mx.core.IUIComponent; 
    import fl.data.DataProvider; 
    import mx.managers.DragManager; 
    import mx.events.DragEvent; 
    import mx.collections.IList; 
    import mx.events.FlexEvent; 
    public var _padCode:PadCode 
    public var pad:pad_v1_0_1 
    [Bindable] 
    public var padNumber:int; 
    [Bindable] 
    public var channelNumber:int 
    [Bindable] 
    public var currentPadState:String= PalletteCode.EMPTY; 


    private function init(e:FlexEvent):void 
    { 
    _padCode=new PadCode() 
    pad=new pad_v1_0_1() 
    pad.cacheAsBitmap=true; 
    pad.spinnymc.visible=false 
    pad.gotoAndStop("empty") 
    addChild(pad) 
    _padCode._targetComponent=this; 
    this.buttonMode=true 
    setInitialState() 
    addEventListener(MouseEvent.MOUSE_UP,padClicked) 
    } 

    private function input_dragEnterHandler(event:DragEvent):void 
    { 

    if (event.dragSource.hasFormat(PadContent.LOOP_FORMAT)) 
    DragManager.acceptDragDrop(this) 


    } 

    private function input_dragDropHandler(event:DragEvent):void 
    { 
    var dropTarget:IUIComponent=event.currentTarget as IUIComponent; 
    var dragSource:DragSource=event.dragSource; 
    var padContent:PadContent=new PadContent() 
    padContent.channelNumber=channelNumber 
    padContent.padNumber=padNumber 


    if (dragSource.hasFormat(PadContent.LOOP_FORMAT)) 
    { 
    var data:Object=event.dragSource.dataForFormat(PadContent.LOOP_FORMAT); 

    padContent.format=PadContent.LOOP_FORMAT 
    padContent.parseContent(data) 
    dispatchEvent(new PadContentEvent(PadContentEvent.VERIFY, padContent)) 
    } 
    } 

    public function setInitialState():void 
    { 
    /**switch (currentPadState) 
    { 
    case (PalletteCode.EMPTY): 

     pad.gotoAndStop("empty"); 
     pad.visible=false; 
     this.buttonMode=false; 
     break; 


    case (PalletteCode.IDLE): 

     pad.gotoAndStop("grey"); 
     pad.addEventListener(MouseEvent.CLICK, padClicked) 
     //pad.addEventListener(MouseEvent.MOUSE_OVER, padover) 
     //pad.addEventListener(MouseEvent.MOUSE_OUT, padout) 
     pad.alpha=.5; 

     this.buttonMode=true; 
     break; 

    }**/ 
    } 


    private function padClicked(e:MouseEvent=null):void 
    { 
    //var p:pad_v1_0_1=e.currentTarget as pad_v1_0_1; 

    //var pc:PadContainer=p.holder; 
    trace("pad clicked") 

    switch (currentPadState) 
    { 
    case (PalletteCode.IDLE): 
     // send play command 
     dispatchEvent(new PadEvent(PadEvent.REQUEST_PLAY, channelNumber, padNumber)) 
     currentPadState=PalletteCode.QUEUEING; 
     pad.gotoAndStop("amber"); 

     break; 

    case (PalletteCode.PLAYING): 

     // send stop command 
     dispatchEvent(new PadEvent(PadEvent.REQUEST_STOP, channelNumber, padNumber)) 
     currentPadState=PalletteCode.STOPPING; 
     pad.gotoAndStop("red"); 
     break; 

    } 


    } 
    ]]> 
</mx:Script> 

<mx:Metadata> 
     [Event(name="verify", type="components.remix.events.PadContentEvent")] 
     [Event(name="requestplay", type="components.remix.events.PadEvent")] 
     [Event(name="requeststop", type="components.remix.events.PadEvent")] 


    </mx:Metadata> 



</mx:UIComponent> 

Answer 1

임 꽤 확실히 TileListItemRender되고 싶어 내 UIComponet 코드입니다 그리드 코드의 그리드에 대한 dataProvider = arrayCollection이고 itemRenderer에서 '데이터'객체를 참조해야합니다.

itemRenderer가 Grid로 설정되면 itemRenderer의 {data} 변수가 적절한 dataProvider 배열 요소를 찾습니다.

좋은 예 here. (당신이 dataprovider를 설정했거나 위의 코드에서 데이터 항목을 참조하는 곳을 보지 못했습니다.)