Flex3界面导航设计教程
一个导航容器可以通过一组子容器来监控用户的操作。比如，TabNavigator 这个容器就可以通过一组tabs 来让用户选择可见的子容器。Flex3 提供了三种主要的导航容器：
Ø ViewStack
Ø TabNavigator
Ø Accordion
接下来的时间逐个介绍每个容器的使用方法。
1. ViewStack 导航容器
ViewStack 导航容器，以下简称VS 容器。是由很多子容器组合起来的，这些子容器相互叠在彼此之上，并且在某一特定的时间内只有一个容器是可见的或者说是Active 状态的。VS 容器没有定义 built-in 的机制来切换当前处于active 状态的容器，所以用户需要使用像LinkBar,TabBar 或者ToggleButtonBar 这些控件，或者使用ActionScript 来更改当前可见容器的状态。比你可以定义一系列的按钮来控制所有子容器的切换动作。
图中左边的图片显示VS 容器中第一个子容器是激活的，可以用索引的方法来表示VS 容器里面的子容器。比如0- （n-1 ）.
创建一个VS 容器
使用<mx:ViewStack> 标记就可以定义一个VS 容器，当然还可以设定很多属性了：
Ø selectedIndex 表示如果VS 容器里里面有多余一个的子容器，那么selectedIndex 的值所对应的那个子容器就是active 的可见的。其取值范围0 到n-1.n 代表子容器的个数。
Ø selectedChild 当前激活的容器当定义了一个或者多个子容器，如果没有定义子容器，其值为null 。并且这个属性必须是现在AS 当中指定你要激活的那个容器的id.
Ø numChildren 值VS 容器当中到底有多少个子容器。
举例：我们试图增加一些特效。
<!-- containers\navigators\VSLinkEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:WipeUp id="myWU" duration="300"/>
<mx:WipeDown id="myWD" duration="300"/>
<mx:WipeRight id="myWR" duration="300"/>
<mx:VBox>
<mx:LinkBar dataProvider="{myViewStack}"
borderStyle="solid"
backgroundColor="#EEEEFF"/>
<mx:ViewStack id="myViewStack"
borderStyle="solid"
width="100%"
creationCompleteEffect="{myWR}">
<mx:Canvas id="search"
label="Search"
hideEffect="{myWD}"
showEffect="{myWU}">
<mx:Label text="Search Screen"/>
</mx:Canvas>
<mx:Canvas id="custInfo"
label="Customer Info"
hideEffect="{myWD}"
showEffect="{myWU}">
<mx:Label text="Customer Info"/>
</mx:Canvas>
<mx:Canvas id="accountInfo"
label="Account Info"
hideEffect="{myWD}"
showEffect="{myWU}">
<mx:Label text="Account Info"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
效果图：
2. TabNavigator 导航容器
TabNavigator 容器用来创建和管理一组tabs ，这些tabs 可以帮用户导航选择需要的子容器板块。
创建TabNavigator 容器
你可以通过<mx:TabNavigator> 标记来定义个TabNavigator 容器。用户可以通过tab 选择对应的板块容器。当用户改变当前容器时， TabNavigator 容器都会触发一个change 事件。
TabNavigator 容器会自动为每一个子容器创建一个tab, 并且通过label 属性设定tab 里面的值。当然你可以指定图片等。用户还可以设定enable disable 属性来决定那个容器可用与否。
举例：
<?xml version="1.0"?>
<!-- containers\navigators\TNEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:WipeLeft id="myWL"/>
<mx:TabNavigator>
<mx:VBox label="Accounts"
width="300"
height="150"
showEffect="{myWL}">
<!-- Accounts view goes here. -->
<mx:Text text="This is a text control."/>
</mx:VBox>
<mx:VBox label="Stocks"
width="300"
height="150"
showEffect="{myWL}">
<!-- Stocks view goes here. -->
<mx:Text text="This is a text control."/>
</mx:VBox>
<mx:VBox label="Futures"
width="300"
height="150"
showEffect="{myWL}">
<!-- Futures view goes here. -->
<mx:Text text="This is a text control."/>
</mx:VBox>
</mx:TabNavigator>
</mx:Application>
效果如图：
TabNavigator 支持键盘导航功能，即可以通过键盘来选择tabs. 具体可以参考development guide.
3. Accordion 导航容器
窗体是很常见的容器了，可是有时候组件很多一个窗体放不下，accordion 就提供了一个可以来回移动的窗体。这个容器可以包含一系列的子panels 。但是任意时刻都只有一个panel 是可见的。
创建Accordion 容器
你可以使用<mx:Accordion> 标记来创建这个容器。举例说明：
<?xml version="1.0"?>
<!-- containers\navigators\AccordionButtonNav.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600"
height="600"
creationComplete="setButtonStyles();">
<mx:Script>
<![CDATA[
public function setButtonStyles():void {
comp.getHeaderAt(0).setStyle('color', 0xAA0000);
comp.getHeaderAt(1).setStyle('color', 0x00AA00);
}
]]>
</mx:Script>
<mx:Accordion id="comp" height="250">
<mx:Form id="shippingAddress" label="1. Shipping Address">
<mx:FormItem id="sfirstNameItem" label="First Name">
<mx:TextInput id="sfirstName"/>
</mx:FormItem>
</mx:Form>
<mx:Form id="billingAddress" label="2. Billing Address">
<mx:Button id="backButton" label="Back" click="comp.selectedIndex=0;"/>
<mx:Button id="nextButton" label="Next" click="comp.selectedIndex=2;"/>
</mx:Form>
<mx:Form id="creditCardInfo" label="3. Credit Card Information">
</mx:Form>
</mx:Accordion>
</mx:Application>
我们增加了一些效果。比如用户通过按钮可以选择那个panel 是可见的。
<mx:Button id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;"/>
这段程序就可以打开最后一个 panel.
同时还可以设定每个 panels 的外观，包括字体、颜色等。
效果图：
当然 Accordion 也有键盘导航功能。具体参考 development guide.
------------------------------------------------------
附:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－