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>

flex>导航 小强斋

flex>导航小强斋