<?xml version="1.0"?>
  <!-- Simple example to demonstrate the ViewStack layout container. -->
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  
       <mx:Panel title="ViewStack Container Example" height="95%" width="95%" 
           paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
  
          <mx:Text width="100%" color="blue"
              text="Use the Button controls to change panels of the ViewStack container."/>
  
          <mx:HBox borderStyle="solid" width="100%"
              paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
              
              <mx:Button id="searchButton" label="Search Panel"
                  click="myViewStack.selectedChild=search;"/>
              <mx:Button id="cInfoButton" label="Customer Info Panel"
                  click="myViewStack.selectedChild=custInfo;"/>
              <mx:Button id="aInfoButton" label="Account Panel"
                  click="myViewStack.selectedChild=accountInfo;"/>
          </mx:HBox>
  
          <!-- Define the ViewStack and the three child containers and have it
          resize up to the size of the container for the buttons. -->
          <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
  
              <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
                  <mx:Label text="Search Screen" color="#000000"/>
              </mx:Canvas>
  
              <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
                  <mx:Label text="Customer Info" color="#000000"/>
              </mx:Canvas>
  
              <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">
                  <mx:Label text="Account Info" color="#000000"/>
              </mx:Canvas>
          </mx:ViewStack>
  
      </mx:Panel>
  </mx:Application>