<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    xmlns:ns="alterlogic.common.components.*"
    width="800" height="600"
    backgroundColor="0xffffff"
    applicationComplete="init()" 
    viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable] public var dataProvider_ac:ArrayCollection;
        
            /**
             * Load mock data to populate the TileLists 
             */
            private function init():void
            {
                dataProvider_ac = new ArrayCollection();
                
                for (var i:int=0; i < 5; i++) 
                {
                    var obj:Object = new Object();
                    obj.label = "mock "+i;
                    obj.url = "assets/t_1.jpg";
                    
                    dataProvider_ac.addItem( obj );
                }
            }
        ]]>
    </mx:Script>

    <mx:VBox width="100%" height="100%">
        
        <mx:Label fontSize="12" fontWeight="bold" color="0x000" text="Default TileList with non-displaying image on drag" />
        <mx:TileList
            width="100%" 
            height="100%" 
            borderStyle="none"
            dragEnabled="true"
            allowMultipleSelection="true"
            dataProvider="{dataProvider_ac}"
            itemRenderer="alterlogic.common.components.ImageItemRenderer"  />
    
        <mx:HRule width="100%" />
    
        <mx:Label fontSize="12" fontWeight="bold" color="0x000" text="Custom TileList with custom drag icon" />
        <ns:TileListPro 
            width="100%" 
            height="100%" 
            borderStyle="none"
            dragEnabled="true"
            allowMultipleSelection="true"
            dataProvider="{dataProvider_ac}"
            itemRenderer="alterlogic.common.components.ImageItemRenderer"  />
        
    </mx:VBox>
    
</mx:WindowedApplication>