Tab Container

<?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="TabNavigator Container" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240"

         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="25" y="24">

        

         <mx:Label width="100%" color="0x323232" fontWeight="bold"

            text="Select the tabs to change the panel."/>

        <mx:TabNavigator id="tn"  width="100%" height="100%" color="0x323232" >

            <!-- Define each panel using a VBox container. -->

            <mx:VBox label="Panel 1">

                <mx:Label text="TabNavigator container panel 1"/>

            </mx:VBox>

            <mx:VBox label="Panel 2">

                <mx:Label text="TabNavigator container panel 2"/>

            </mx:VBox>

            <mx:VBox label="Panel 3">

                <mx:Label text="TabNavigator container panel 3"/>

            </mx:VBox>

        </mx:TabNavigator>

        <mx:Label width="100%" color="0x323232"

            text="Programmatically select the panel using a Button control."/>

        <mx:HBox>

            <mx:Button label="Select Tab 1" click="tn.selectedIndex=0" color="0x545454" />

            <mx:Button label="Select Tab 2" click="tn.selectedIndex=1" color="0x545454" />

            <mx:Button label="Select Tab 3" click="tn.selectedIndex=2" color="0x545454" />

        </mx:HBox>

       

    </mx:Panel>

</mx:Application>