Problem creating a TileList with Canvases which are drag-able - apache-flex

Question

I want to create a tilelist in which there would be different canvas or vbox etc, and i want to make them drag able.
I wrote a code to do this, but the output does not shows anything in a list.
<mx:TileList width="1500" height="1000" dragMoveEnabled="true"
selectable="true" selectionColor="#FFFFFF"
dragEnabled="true" dropEnabled="true"
columnCount="1" rowHeight="160">
<mx:dataProvider>
<mx:Array>
<mx:Canvas width="1450" height="100">
<mx:Button label="Testin the buttong"/>
</mx:Canvas>
<mx:Canvas width="1450" height="100">
<mx:Button label="Testin"/>
</mx:Canvas>
</mx:Array>
</mx:dataProvider>
</mx:TileList>
How can I fix this? Or let me know what m i doing wrong here?
Thanks and Regards
Zeeshan

Answer 1

Your dataProvider should have objects of some sort. In theory they could be instance of a Canvas, but that would be highly unusual to use a visual component as the dataProvider. What you want to do is read up on itemRenderers. an itemRenderer is a component that will be used to renderer each instance of your dataProvider.
Try something like this:
<mx:script><[[
public var mydb : Array = [
{label: 'Testin the buttong'},
{label: 'Testin'}
]
]]></mx:script>
<mx:TileList width="1500" height="1000" dragMoveEnabled="true"
selectable="true" selectionColor="#FFFFFF"
dragEnabled="true" dropEnabled="true"
columnCount="1" rowHeight="160" dataProvider="{mydp}">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="1450" height="100">
<mx:Button label="{data.label}"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
In short I Defined the dataProvider in script with generic objects. And I defined an itemRenderer in-line. Something like this should at least have something show up.
I'm not sure if a Canvas can be draggable, as it doesn't usually have anything to click on to start the drag. You may want to consider a TitleWindow.
I wrote the code in browser, so standard disclaimers apply.