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