<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="*"
    xmlns:ui="sho.ui.*" 
    layout="absolute" viewSourceURL="srcview/index.html">
    
    <ui:Drawer title="Left" dockSide="left">
        <LeftDrawer />
    </ui:Drawer>

    <ui:Drawer title="Bottom" dockSide="bottom" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" layout="horizontal">
        <mx:Button label="button 1" width="100" height="100"/>
        <mx:Button label="button 2" width="100" height="100"/>
        <mx:Button label="button 3" width="100" height="100"/>
        <mx:Button label="button 4" width="100" height="100"/>
    </ui:Drawer>

    <ui:Drawer title="Right" dockSide="right" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
        <mx:Button label="button 1" />
        <mx:Button label="button 2" />
        <mx:Button label="button 3" />
        <mx:Button label="button 4" />
    </ui:Drawer>
    
    <mx:Panel title="Drawer Demo" width="400" height="314" horizontalCenter="0" verticalCenter="5" layout="absolute">
        <mx:TextArea x="10" y="10" width="360" height="56" fontSize="18" borderStyle="none" editable="false">
            <mx:text>Move the mouse to the left, right, or bottom edges to see the drawers.</mx:text>
        </mx:TextArea>
        <mx:TextArea x="10" y="84" fontSize="18" width="360" height="56" borderStyle="none" editable="false">
            <mx:text>Click on the circle icon to pin a drawer in place.</mx:text>
        </mx:TextArea>
        <mx:TextArea x="10" y="158" fontSize="18" height="56" width="360" borderStyle="none" editable="false">
            <mx:text>Grab the drawer by its title bar to move it somewhere else.</mx:text>
        </mx:TextArea>
        <mx:TextArea x="10" y="232" text="Right click to view source." fontSize="18" height="32" width="360" borderStyle="none" editable="false"/>
    </mx:Panel>
    
</mx:Application>