<?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:comps="*"
    width="500" height="500"
    backgroundColor="#FFFFFF">
    <comps:professional_flex_code_12_TemplateLayoutComp id="tc1" borderStyle="solid">
      <comps:header>    
        <mx:Canvas width="100%" height="30" backgroundColor="#CCCCCC">
          <mx:Label text="This is the section where the header would be." 
            horizontalCenter="0" verticalCenter="0"/>
        </mx:Canvas>
      </comps:header>
      <comps:menu>                        
        <mx:LinkBar color="#0000FF" fontWeight="bold" 
          dataProvider="{myViewStack}" direction="vertical"/>
      </comps:menu>
      <comps:content>           
        <mx:Label text="This section is set to allow multiple UIComponents" />
        <mx:ViewStack id="myViewStack" borderStyle="solid" 
          width="100%" height="100%">
          <mx:Canvas id="s1" backgroundColor="#CC3399" 
            label="Screen 1" width="100%" height="100%">
            <mx:Label text="This is Screen 1 of the ViewStack component"/>
          </mx:Canvas>
          <mx:Canvas id="s2" backgroundColor="#33FFCC" 
            label="Screen 2" width="100%" height="100%">
            <mx:Label text="This is Screen 2 of the ViewStack component"/>
          </mx:Canvas>
          <mx:Canvas id="s3" backgroundColor="#FFFF66" 
            label="Screen 3" width="100%" height="100%">
            <mx:Label text="This is Screen 3 of the ViewStack component"/>
          </mx:Canvas>
        </mx:ViewStack>
        <mx:Label text="Here is a 3rd component in the content section." />
      </comps:content>
      <comps:footer>                        
        <mx:Canvas width="100%" height="30" backgroundColor="#CCCCCC">
          <mx:Label text="This is the section where the footer would be." 
            horizontalCenter="0" verticalCenter="0"/>
        </mx:Canvas>
      </comps:footer>    
    </comps:professional_flex_code_12_TemplateLayoutComp>
  </mx:Application>