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