<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:comp="components.*"
    layout="absolute"  viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            
            private function onColorChange() : void
            {
                paintCanvas.color = colorPicker.selectedColor;
            }
            
            private function onThicknessChange() : void
            {
                paintCanvas.thickness = thicknessSlider.value;
            }
            
        ]]>
    </mx:Script>
    
    <mx:TabNavigator 
        top="10" bottom="10" left="10" right="10" 
        paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
        
        <comp:SimpleDrawComponent label="Simple Drawing" />
    
        <mx:Panel title="Paint!" label="Paint!"  clipContent="true" >
        
            <comp:PaintCanvas width="100%" height="100%" id="paintCanvas" />
            
            <mx:ControlBar>
                <mx:ColorPicker selectedColor="#000000" change="onColorChange()" id="colorPicker" />
                <mx:HSlider value="3" change="onThicknessChange()" id="thicknessSlider" minimum="1" maximum="25" />
                <mx:Button label="Clear" click="paintCanvas.clear()" />
            </mx:ControlBar>
            
        </mx:Panel>
        
    </mx:TabNavigator>
        
</mx:Application>