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 容器当中到底有多少个子容器。

举例：我们试图增加一些特效。

Xml代码

1. <!-- containers/navigators/VSLinkEffects.mxml -->  
2.  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
3.    <mx:WipeUp id="myWU" duration="300"/>  
4.    <mx:WipeDown id="myWD" duration="300"/>  
5.    <mx:WipeRight id="myWR" duration="300"/>  
6.    <mx:VBox>  
7.      <mx:LinkBar dataProvider="{myViewStack}"  
8.        borderStyle="solid"  
9.        backgroundColor="#EEEEFF"/>  
10.        <mx:ViewStack id="myViewStack"  
11.             borderStyle="solid"  
12.             width="100%"  
13.             creationCompleteEffect="{myWR}">  
14.       <mx:Canvas id="search"  
15.           label="Search"  
16.           hideEffect="{myWD}"  
17.           showEffect="{myWU}">  
18.        <mx:Label text="Search Screen"/>  
19.      </mx:Canvas>  
20.      <mx:Canvas id="custInfo"  
21.          label="Customer Info"  
22.          hideEffect="{myWD}"  
23.          showEffect="{myWU}">  
24.       <mx:Label text="Customer Info"/>  
25.      </mx:Canvas>  
26.      <mx:Canvas id="accountInfo"  
27.          label="Account Info"  
28.          hideEffect="{myWD}"  
29.          showEffect="{myWU}">  
30.        <mx:Label text="Account Info"/>  
31.     </mx:Canvas>  
32.   </mx:ViewStack>  
33.  </mx:VBox>  
34. </mx:Application>  

<!-- 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代码

1. <?xml version="1.0"?>  
2. <!-- containers/navigators/TNEffect.mxml -->  
3.   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
4.     <mx:WipeLeft id="myWL"/>  
5.     <mx:TabNavigator>  
6.      <mx:VBox label="Accounts"  
7.       width="300"  
8.        height="150"  
9.        showEffect="{myWL}">  
10.     <!-- Accounts view goes here. -->  
11.     <mx:Text text="This is a text control."/>  
12.   </mx:VBox>  
13.   <mx:VBox label="Stocks"  
14.       width="300"  
15.       height="150"  
16.       showEffect="{myWL}">  
17.        <!-- Stocks view goes here. -->  
18.        <mx:Text text="This is a text control."/>  
19.   </mx:VBox>  
20.   <mx:VBox label="Futures"  
21.       width="300"  
22.       height="150"  
23.        showEffect="{myWL}">  
24.          <!-- Futures view goes here. -->  
25.      <mx:Text text="This is a text control."/>  
26.  </mx:VBox>  
27.  </mx:TabNavigator>  
28. </mx:Application>  

<?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代码

1. <?xml version="1.0"?>  
2. <!-- containers/navigators/AccordionButtonNav.mxml -->  
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600"  
4.     height="600"  
5.     creationComplete="setButtonStyles();">  
6. <mx:Script>  
7.     <![CDATA[  
8.      public function setButtonStyles():void {  
9.       comp.getHeaderAt(0).setStyle('color', 0xAA0000);  
10.       comp.getHeaderAt(1).setStyle('color', 0x00AA00);  
11.   }  
12.       ]]>  
13. </mx:Script>  
14. <mx:Accordion id="comp" height="250">  
15.      <mx:Form id="shippingAddress" label="1. Shipping Address">  
16.         <mx:FormItem id="sfirstNameItem" label="First Name">  
17.         <mx:TextInput id="sfirstName"/>  
18.         </mx:FormItem>  
19.      </mx:Form>  
20.        <mx:Form id="billingAddress" label="2. Billing Address">  
21.        <mx:Button id="backButton" label="Back" click="comp.selectedIndex=0;"/>  
22.        <mx:Button id="nextButton" label="Next" click="comp.selectedIndex=2;"/>  
23.      </mx:Form>  
24.      <mx:Form id="creditCardInfo" label="3. Credit Card Information">  
25.      </mx:Form>  
26.  </mx:Accordion>  
27. </mx:Application>  

<?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 是可见的。

Xml代码

1. <mx:Button id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;"/>  

<mx:Button id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;"/>

 

这段程序就可以打开最后一个 panel.

同时还可以设定每个 panels 的外观，包括字体、颜色等。

效果图：

当然 Accordion 也有键盘导航功能。具体参考 development guide.