ViewStack

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#874040, #874040]">   

   

    <mx:Panel title="ViewStack Container" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240" width="500"

         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">

        

         <mx:Text width="100%" color="0x323232" textAlign="center"

            text="Use the Button controls to change panels of the ViewStack container."/>

        <mx:HBox borderStyle="solid" width="100%" color="0x323232" horizontalAlign="center"

            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%" color="0x323232">

       

            <mx:VBox id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >

                <mx:Label text="Search Panel" width="100%" textAlign="center" paddingTop="10" />

                <mx:HBox width="100%" horizontalAlign="center" >

                    <mx:TextInput id="Searchtxt" width="200" />

                    <mx:Button label="search" click="Searchtxt.text=''" />

                </mx:HBox>

            </mx:VBox>

           

            <mx:VBox id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" horizontalAlign="center" >

                <mx:Label text="Customer Info" width="100%" textAlign="center" paddingTop="10" />

                <mx:HBox width="100%" horizontalAlign="center">

               

                    <mx:Label text="Email Address"/>

                    <mx:TextInput id="email" width="200"/>

                    <mx:Button label="Submit" click="email.text='';" />

                </mx:HBox>

               

            </mx:VBox>

            

            <mx:VBox id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >

                <mx:Label text="Account Info" width="100%" textAlign="center" paddingTop="10" />

                <mx:HBox width="100%" horizontalAlign="center">

                    <mx:Button label="Purchases" />

                    <mx:Button label="Sales" />

                    <mx:Button label="Reports" />

               

                </mx:HBox>

            </mx:VBox>

           

        </mx:ViewStack>

       

    </mx:Panel>

</mx:Application>