flex---->导航
导航
导航的作用是在不同的子组件之间相互切换的时候，能够保证顺利的操作运行和导向。
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>
