Problem creating a TileList with Canvases which are drag-able

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

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.