Tab Bar

<?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:Script>

        <![CDATA[

                import mx.controls.Alert;

            import mx.events.ItemClickEvent;

            import mx.controls.TabBar;

            [Bindable]

            public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},

                {label:"Alaska", data:"Juneau"},

                {label:"Arkansas", data:"LittleRock"}

            ];

           

            [Bindable]

            private var startLabel:String = 'label is: ' + STATE_ARRAY[0].label + ', index is: 0, capital is: ' + STATE_ARRAY[0].data;

           

            private function clickEvt(event:ItemClickEvent):void {

                // Access target TabBar control.

                

                forClick.text="label is: " + event.label + ", index is: " +

                    event.index + ", capital is: "+ tabBar.dataProvider[event.index].data;

              

            }               

       ]]>

    </mx:Script>

   

    <mx:Panel title="TabBar Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="466" height="200"

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

        

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

            text="Select a tab to change the current panel."/>

        <mx:TabBar itemClick="clickEvt(event);" color="0x323232" id="tabBar">

            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>

        </mx:TabBar>

        <mx:TextArea id="forClick" height="100%" width="346" color="0x323232" text="{startLabel}"/>

       

    </mx:Panel>

</mx:Application>