la mise en œuvre UIComponent comme TileListItemRenderer

Question

J'avais un code que je travaillais dans flex. J'ai eu 16 UIComponents ajouté à un conteneur Grille.

La grille était pas de vraiment me donner ce que je voulais si insetead d'utiliser que je veux essayer d'utiliser un TileList parce que ses GOTS beaucoup de vraiment possiblités intégrées.

En ce qui concerne ma compréhension va, pour ajouter des éléments à un TileList vous devez définir un fournisseur de données et un rendu d'élément.

Je me bats prendre conceptly mon UIComponent et la mise en œuvre comme un itemRenderer. Pourrait aider quelqu'un me?

Il y a 2 problèmes principaux que je vois.

Tout d'abord dans ma mise en œuvre inital j'avais ajouté ids uniques à mes UIComponents au moment de la conception. Ces ids uniques sont très importants dans ma demande et je ne sais pas comment les affecter à un TileListItemRenderer.

En second lieu mes UIcomponets avait 3 événements personnalisés que ma grille écouta. Je ne sais pas comment affecter ces auditeurs à un TileList itemRenderer.

Voici mon code de grille d'origine

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 est mon code UIComponet que je veux maintenant être 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 assez sûr que vous devez donnez un fournisseur de données = ArrayCollection pour la grille dans le code du réseau, et dans le itemRenderer, vous devriez référenceurs à un objet « données ».

Lorsque le itemRenderer est réglé pour la grille, la variable {données} dans le itemRenderer sait rechercher les éléments du tableau dataProvider appropriés.

Bon exemple ici . (Je viens de voir où DonT définir votre youve dataprovider ou faire référence à des éléments de données dans le code ci-dessus)