la implementación de UIComponent como TileListItemRenderer

Question

Yo tenía algo de código que estaba trabajando en flexión. Tenía 16 UIComponents añaden a un contenedor de cuadrícula.

La rejilla no era realmente que me da lo que quería por lo insetead de utilizar que quiero tratar de utilizar un TileList porque sus gots un montón de muy agradable construido en características.

Por lo que va mi entendimiento, para añadir elementos a un TileList es necesario definir un DataProvider y un procesador de elementos.

estoy luchando conceptly tomando mi UIComponent e implementarlo como un itemRenderer. ¿Podría alguien me ayuda?

Hay 2 principales problemas que veo.

En primer lugar en mi aplicación inital me había añadido identificadores únicos a mis UIComponents en tiempo de diseño. Estos identificadores únicos son muy importantes en mi solicitud y no estoy seguro de cómo asignar a un tilelistitemrenderer.

En segundo lugar mis UIcomponets tenía 3 eventos personalizados que mi rejilla escuchó. No sé cómo asignar estos oyentes a un TileList itemRenderer.

Aquí está mi código original de la rejilla

Cuadrícula CÓDIGO

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

Aquí está mi código es UIComponet que ahora quiero ser un 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 bastante seguro de que debe estar fijándose una dataProvider = ArrayCollection para la cuadrícula en el Código de la Red, y en el itemRenderer, usted debe estar refiriendo a un objeto '' de datos.

Cuando el itemRenderer se establece para la cuadrícula, el {} de datos variable en el itemRenderer sabe que buscar los elementos de la matriz dataProvider apropiadas.

El buen ejemplo aquí . (Apenas no veo donde usted ha ajustado su DataProvider o hacer referencia a los elementos de datos en el código anterior)