TabBar组件的基本应用

[b]【贝武易科技专业flex3D开发--www.newflash3d.com】[/b]
我们在许多场合里面都用到TabBar来做页面的切换，先看一个实例
[flash=520,242]http://www.newflash3d.com/blogfile/swf/TabBarExample001.swf[/flash]
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="242" width="520">
	<mx:TabBar dataProvider="viewstack1" fontSize="12" x="10" y="10"/>
	<mx:ViewStack id="viewstack1" width="500" height="200" x="10" y="34">
		<mx:Canvas width="100%" height="100%" label="项目表1">
			<mx:TextArea text="这是项目表1" editable="false" width="100%" height="100%" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas width="100%" height="100%" label="项目表2">
			<mx:TextArea text="这是项目表2" editable="false" width="100%" height="100%" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas width="100%" height="100%" label="项目表3">
			<mx:TextArea text="这是项目表3" editable="false" width="100%" height="100%" fontSize="12"/>
		</mx:Canvas>
	</mx:ViewStack>
</mx:Application>

基本结构分析
上面是一个TabBar组件，下面是一个ViewStack（视图组），它可以包含各个其他的显示组件元素，ViewStack（视图组）会给TabBar组件提供个数的参数等，这样问题就很好理解了。
[b]【贝武易科技专业flex3D开发--www.newflash3d.com】[/b]
flex的组件之间它们是包含与并列的关系，或者是数据的提供者与接收者之间的关系。
下面看看TabBar组件的另外一个例子。
效果如下：
[flash=500,300]http://www.newflash3d.com/blogfile/swf/TabBarExample002.swf[/flash]
代码如下：

<?xml version="1.0"?>
<!-- Simple example to demonstrate the TabBar control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" width="500" height="300">

    <mx:Script>
        <![CDATA[

            import mx.events.ItemClickEvent;
            import mx.controls.TabBar;

            [Bindable]
            public var STATE_ARRAY:Array = [{label:"中国", data:"北京"},
                {label:"美国", data:"华盛顿"},
                {label:"英国", data:"伦敦"}
            ];

            private function clickEvt(event:ItemClickEvent):void {
                // Access target TabBar control.
                var targetComp:TabBar = TabBar(event.currentTarget);
                forClick.text="选卡标记(label)是: " + event.label + ", 选卡号是: " + 
                    event.index + ", 首都是: " +
                    targetComp.dataProvider[event.index].data;
            }                
       ]]>
    </mx:Script>

    <mx:Panel title="TabBar的另外一个实例" height="90%" width="90%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue" 
            text="点击Tab的标签切换显示内容。"/>

        <mx:TabBar itemClick="clickEvt(event);">
            <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
        </mx:TabBar>

        <mx:TextArea id="forClick" height="100%" width="100%"/>

    </mx:Panel>
</mx:Application>

组件之间的关系如下图：

[img]/upload/attachment/56409/9159c96d-d10a-378e-bf6b-98b8bff2d3e2.jpg[/img]