导航
导航的作用是在不同的子组件之间相互切换的时候，能够保证顺利的操作运行和导向。

ViewStack导航、Tab导航、Accordion

一、 ViewStack导航设计
ViewStack是一种可以灵活定义的导航，其各个子组件可以是任意形式的。同时，ViewStack导航没有为用户提供可以切换当前活动容器的导航组件，需要自行定义。

1.1 创建ViewStack容器
在Flex中，已经预置了ViewStack导航容器。通过标签<mx:ViewStack>可以创建一个ViewStack导航容器。切换当前活动容器的导航组件可以通过使用诸如LinkBar、TabBar、ButtonBar、或者ToggleButtonBar组件完成。

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:VBox><mx:HBox><mx:Button label="Flash" fontSize="12" click="vsInfo.selectedChild=infoFlash;"/><mx:Button label="Flex" fontSize="12" click="vsInfo.selectedChild=infoFlex;"/><mx:Button label="Adobe AIR" fontSize="12" click="vsInfo.selectedChild=infoAIR;"/></mx:HBox><mx:ViewStack id="vsInfo" width="300" height="500" fontSize="12"><lalo:FlashInfo id="infoFlash"/><lalo:FlexInfo id="infoFlex"/><lalo:AIRInfo id="infoAIR"/></mx:ViewStack></mx:VBox>
</mx:Application>

AIRInfo(FlexInfo，FlashInfo类似)

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="300" width="500"><mx:Text width="100%" height="100%"><mx:text><![CDATA[
Adobe® AIR™ 运行时使开发人员能够使用已经过验证的 Web 技术来构建可部署到桌面并跨操作系统运行的丰富互联网应用程序。
Adobe AIR 提供一种激动人心的新方式, 可借助创新的、品牌的桌面应用程序吸引客户, 而无需对现有技术、人员或流程进行更改。]]></mx:text></mx:Text>
</mx:Canvas>

AIRInfo

1.2 实现不同子容器之间的传值
在ViewStack导航中，最常用的功能就是当切换每个子容器的时候，能够互相的传送参数。传送参数的一般的做法是可以创建一个全局的静态类或者静态变量，把参数值暂时存放起来。

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:ViewStack id="vsPass" fontSize="12"><lalo:PassValue id="passValue"/><lalo:ViewValue id="viewValue"/></mx:ViewStack>
</mx:Application>

PassValue.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script><![CDATA[import mx.controls.Alert;import mx.containers.ViewStack;private function btnPass_click():void{var modelLocator:ViewModelLocator = ViewModelLocator.getInstance();modelLocator.param = txtParam.text;(ViewStack)(this.parent).selectedChild = (ViewStack)(this.parent).getChildByName("viewValue");}]]></mx:Script><mx:Form fontSize="12"><mx:FormItem label="传递的参数值："><mx:TextInput id="txtParam"/></mx:FormItem><mx:FormItem><mx:Button id="btnPass" label="提交" click="btnPass_click()"/></mx:FormItem></mx:Form>
</mx:Canvas>

ViewValue.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="initApp()"><mx:Script><![CDATA[[Bindable]private var modelLocator:ViewModelLocator = ViewModelLocator.getInstance();private function initApp():void{lbParam.text = "传递过来的参数值：" + modelLocator.param;}]]></mx:Script><mx:Label id="lbParam" fontSize="14" x="40" y="47"/>
</mx:Canvas>

ViewModelLocator.as

package lalo {  public class ViewModelLocator  {   private static var instance:ViewModelLocator;      public function ViewModelLocator()   {    // 构造函数   }

public static function getInstance() : ViewModelLocator   {    if (instance == null)    {     instance = new ViewModelLocator();    }        return instance;   }

// 定义变量   public var param : String;  } }

二、 标签导航设计
标签导航又称选项卡导航，这种导航是通过管理若干个标签页，来切换子容器的。标签导航容器是ViewStack导航容器的子类，集成了ViewStack的诸多功能。

2.1 使用TabNavigator导航容器
在Flex中，提供了TabNavigator标签导航容器。使用标签<mx:TabNavigator>可以创建一个TabNavigator导航容器。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:TabNavigator borderStyle="solid" fontSize="12"><lalo:FlashInfo label="Flash"/><lalo:FlexInfo label="Flex"/><lalo:AIRInfo label="AIR"/></mx:TabNavigator>
</mx:Application>

2.2 动态添加TAB标签
在TabNavigator导航容器的应用中，动态添加TAB标签是最常用的了。动态添加TAB标签是根据用户的操作，添加指定数量的TAB标签的数量。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Script><![CDATA[import mx.controls.Label;import mx.containers.Canvas;// 删除按钮单击事件private function btnDelTab_click():void{// 移除TabNavigator组件中指定的标签页myTab.removeChild((DisplayObject)(myTab.selectedChild));}// 添加按钮单击事件private function btnAddTab_click():void{// 添加TabNavigator组件中指定的标签页addTab(txtTitle.text, txtContent.htmlText);}// 添加标签页private function addTab(tabLabel:String, tabText:String):void{// 创建Canvas对象var canvas:Canvas = new Canvas();// 设置Canvas对象的标签属性canvas.label = tabLabel;// 创建Label对象var label:Label = new Label();// 设置Label对象的超文本内容label.htmlText = tabText;// 添加Label对象到canvas中canvas.addChild(label);// 添加canvas对象到TabNavigator组件中myTab.addChild(canvas);}]]></mx:Script><mx:HBox fontSize="12"><mx:Form><mx:FormItem label="题目："><mx:TextInput id="txtTitle"/></mx:FormItem><mx:FormItem label="内容："><mx:TextArea height="200" id="txtContent"/></mx:FormItem><mx:Form><mx:HBox><mx:Button label="添加" click="btnAddTab_click()"/><mx:Button label="删除" click="btnDelTab_click()"/></mx:HBox></mx:Form></mx:Form><mx:TabNavigator width="300" height="300" id="myTab"/></mx:HBox>
</mx:Application>

三、 折叠导航设计
表单是很多应用中最基本的组件之一。当遇到多个关联表单，使用者可能会遇到操作上的困难。当表单很多，并且不能集成在同一个页面时，用户需要在多个表单之间前后移动切换。折叠导航设计可以有效的解决这个问题。在Flex中，使用标签<mx:Accordion>可以创建一个Accordion导航容器。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:Accordion><lalo:FlashInfo label="Flash"/><lalo:FlexInfo label="Flex"/><lalo:AIRInfo label="AIR"/></mx:Accordion>
</mx:Application>