FLEX例子之切换选项卡(TabBar)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 
    <mx:Script>
        <![CDATA[
 
            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.
                var targetComp:TabBar = TabBar(event.currentTarget);
                forClick.text="label is: " + event.label + ", index is: " + 
                    event.index + ", capital is: " +
                    targetComp.dataProvider[event.index].data;
            }                
       ]]>
    </mx:Script>
 
    <mx:Panel title="TabBar Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="200"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
 
         <mx:Label width="100%" color="0x323232" 
            text="Select a tab to change the current panel."/>
 
        <mx:TabBar itemClick="clickEvt(event);" color="0x323232">
            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
        </mx:TabBar>
 
        <mx:TextArea id="forClick" height="100%" width="100%" color="0x323232" text="{startLabel}"/>
 
    </mx:Panel>
</mx:Application>