uicomponentをtilelistitemrendererとして実装します

Question

Flexで取り組んでいたコードがいくつかありました。グリッドコンテナに16個のuicomponentsを追加しました。

グリッドは、私が望んでいたものを本当に与えていませんでした。それを使ってティルリストを使ってみたいと思っています。

私の理解に関する限り、ティレリストにアイテムを追加するには、データプロバイダーとアイテムレンダラーを定義する必要があります。

私は概念的に私のuiComponentを取り、それをitemrendererとして実装しているのに苦労しています。誰かが私を助けることができますか？

私が見る2つの主な問題があります。

まず、私の無効の実装では、設計時に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>

ここでは、私が今ティレリステムレンダーになりたい私のuicomponetコードです

<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

Grid CodeのグリッドのDataProvider = arrayCollectionを設定する必要があります。ItemRendererでは、「データ」オブジェクトを参照する必要があります。

ItemRendererがグリッドに設定されている場合、ItemRendererの{データ}変数は、適切なDataProvider Array要素を探すことを知っています。

良い手本 ここ. 。 （DataProviderを設定した場所がわかりません。上記のコードのデータ項目を参照してください）