attuazione UIComponent TileListItemRenderer

Question

ho avuto un po 'di codice su cui stavo lavorando in Flex. Avevo 16 Chimp aggiunti a un contenitore di tabelle.

L'intrattenimento non era griglia veramente mi dà quello che volevo quindi insetead di utilizzare che voglio provare e utilizzare un TileList perché i suoi GOTS un sacco di veramente bello costruito in caratteristiche.

Per quanto riguarda la mia comprensione va, per aggiungere elementi a un TileList è necessario definire un DataProvider e un renderer di voci.

Sto lottando conceptly prendere il mio UIComponent e attuare come un itemRenderer. Qualcuno potrebbe aiutarmi?

Ci sono 2 problemi principali che vedo.

In primo luogo nella mia implementazione iniziale che mi aveva aggiunto ID univoci ai miei Chimp in fase di progettazione. Questi ID univoci sono molto importanti nella mia domanda e io non sono sicuro di come assegnarli a un tilelistitemrenderer.

In secondo luogo i miei UIcomponets aveva 3 eventi personalizzati che la mia griglia di ascolto per. Non so come assegnare questi ascoltatori ad un TileList itemRenderer.

Ecco il mio codice di rete originale

GRID codice

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

Ecco il mio codice UIComponet che ora voglio essere 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 abbastanza sicuro che si dovrebbe essere imposta una dataProvider = ArrayCollection per la griglia nel Codice di rete, e nel itemRenderer, si dovrebbe essere riferendo a un oggetto 'data'.

Quando l'itemRenderer è impostata per la griglia, la variabile {dati} nel itemRenderer sa a cercare gli elementi dell'array dataProvider appropriate.

Il buon esempio qui . (Ho appena non vedo dove avete impostato il vostro dataprovider o consultare gli elementi di dati nel codice sopra)