Flex中的导航器

 

一个导航容器可 以通过一组子容器来监控用户的操作。比如,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 容器

  使用 标记就可以定义一个VS 容器,当然还可以设定很多属性了:

Ø       selectedIndex 表示如果VS 容器里里面有多余一个的子容器,那么selectedIndex 的值所对应的那个子容器就是active 的可见的。其取值范围0 到n-1.n 代表子容器的个数。

Ø       selectedChild 当前激活的容器当定义了一个或者多个子容器,如果没有定义子容器,其值为null 。并且这个属性必须是现在AS 当中指定你要激活的那个容器的id.

Ø       numChildren 值VS 容器当中到底有多少个子容器。

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

Xml代码 
  1.    
  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 >   
[xml] view plaincopy
  1.   
  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>  
 

效果图:

2.           TabNavigator 导航容器

TabNavigator 容器用来创建和管理一组tabs ,这些tabs 可以帮用户导航选择需要的子容器板块。

创建TabNavigator 容器

你可以通过 标记来定义个TabNavigator 容器。用户可以通过tab 选择对应的板块容器。当用户改变当前容器时, TabNavigator 容器都会触发一个change 事件。

TabNavigator 容器会自动为每一个子容器创建一个tab, 并且通过label 属性设定tab 里面的值。当然你可以指定图片等。用户还可以设定enable disable 属性来决定那个容器可用与否。

举例:

 

Xml代 码 
  1.  xml   version = "1.0" ?>   
  2.    
  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.        
  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.           
  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.             
  25.      < mx:Text   text = "This is a text control." />   
  26.   mx:VBox >   
  27.   mx:TabNavigator >   
  28.  mx:Application >   
[xml] view plaincopy
  1. xml version="1.0"?>  
  2.   
  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.       
  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.          
  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.            
  25.      <mx:Text text="This is a text control."/>  
  26.  mx:VBox>  
  27.  mx:TabNavigator>  
  28. mx:Application>  
 

效果如图:

TabNavigator 支持键盘导航功能,即可以通过键盘来选择tabs. 具体可以参考development guide.

 

3.           Accordion 导航容器

窗体 是很常见的容器了,可是有时候组件很多一个窗体放不下,accordion 就提供了一个可以来回移动的窗体。这个容器可以包含一系列的子panels 。但是任意时刻都只有一个panel 是可见的。

创建Accordion 容器

你可 以使用 标记来创建这个容器。举例说明:

 

 

 

Xml代码 
  1.  xml   version = "1.0" ?>   
  2.    
  3. < mx:Application   xmlns:mx = "http://www.adobe.com/2006/mxml"   width = "600"   
  4.     height = "600"   
  5.     creationComplete = "setButtonStyles();" >   
  6. < mx:Script >   
  7.       
  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] view plaincopy
  1. xml version="1.0"?>  
  2.   
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600"  
  4.     height="600"  
  5.     creationComplete="setButtonStyles();">  
  6. <mx:Script>  
  7.      
  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>  

 我们增加了一些效果。比如用户通过按钮可以选择那个panel 是可见的。

Xml代码 
  1. < mx:Button   id = "lastButton"   label = "Last"   click ="accordion1.selectedIndex = accordion1.numChildren - 1;" />   
[xml] view plaincopy
  1. <mx:Button id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;"/>  
 

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

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

效果图:

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

4、 导航容器ApplicationControlBar

主要用来作页面顶部的导航条:

你可能感兴趣的:(FLEX)