將UIComponent實現爲TileListItemRenderer

Question

我有一些代碼是在flex中工作的。我有16個UIComponent添加到Grid Container。

網格並不真的給我想要的東西，所以我不想使用它，我想嘗試使用一個tilelist，因爲它的gots有很多非常好的特性。

據我瞭解，要將項目添加到tilelist，您需要定義一個數據提供者和一個項目渲染器。

我努力從概念上把我的UIComponent和它作爲一個itemrenderer實現。 有人可以幫我嗎？

我看到有兩個主要問題。

首先在我的初始實現中，我在設計時爲我的UIComponents添加了唯一的ID。這些獨特的ID在我的應用程序中非常重要，我不確定如何將它們分配給tilelistitemrenderer。

其次我的UIcomponets有3個自定義事件，我的網格收聽。我不知道如何將這些監聽器分配給tilelist itemrenderer。

這是我原來的電網代碼

電網規範

<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> 

繼承人是我現在想成爲一名TileListItemRender

<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

Im相當肯定，你應該設置我UIComponet代碼一個dataProvider = arrayCollection用於網格代碼中的網格，在itemRenderer中，你應該引用一個'data'對象。

當爲網格設置itemRenderer時，itemRenderer中的{data}變量知道要查找適當的dataProvider數組元素。

好的例子here。 （我只是沒有看到你在哪裏設置你的數據提供者或參考上面的代碼中的數據項）