[SOLVED] implementing UIComponent as TileListItemRenderer

I had some code I was working on in flex. I had 16 UIComponents added to a Grid Container.

The grid wasnt really giving me what I wanted so insetead of using that I want to try and use a tilelist because its gots lots of really nice built in features.

As far as my understanding goes, to add items to a tilelist you need to define a dataprovider and an item renderer.

I'm struggling conceptly taking my UIComponent and implementing it as an itemrenderer. Could somebody help me?

There are 2 main problems that I see.

Firstly in my inital implementation I had added unique ids to my UIComponents at design time. These unique ids are very important in my application and I'm not sure how to assign them to a tilelistitemrenderer.

Secondly my UIcomponets had 3 custom events that my grid listened for. I dont know how to assign these listeners to a tilelist itemrenderer.

Here is my original grid code

GRID CODE

<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 is my UIComponet code that I now want to be a 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>