??????????????????????????????????????????????????????????????????????????????????導(dǎo)航
導(dǎo)航的作用是在不同的子組件之間相互切換的時(shí)候，能夠保證順利的操作運(yùn)行和導(dǎo)向。

ViewStack導(dǎo)航、Tab導(dǎo)航、Accordion

一、 ViewStack導(dǎo)航設(shè)計(jì)
ViewStack是一種可以靈活定義的導(dǎo)航，其各個(gè)子組件可以是任意形式的。同時(shí)，ViewStack導(dǎo)航?jīng)]有為用戶提供可以切換當(dāng)前活動(dòng)容器的導(dǎo)航組件，需要自行定義。

1.1 創(chuàng)建ViewStack容器
在Flex中，已經(jīng)預(yù)置了ViewStack導(dǎo)航容器。通過(guò)標(biāo)簽<mx:ViewStack>可以創(chuàng)建一個(gè)ViewStack導(dǎo)航容器。切換當(dāng)前活動(dòng)容器的導(dǎo)航組件可以通過(guò)使用諸如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? 運(yùn)行時(shí)使開發(fā)人員能夠使用已經(jīng)過(guò)驗(yàn)證的 Web 技術(shù)來(lái)構(gòu)建可部署到桌面并跨操作系統(tǒng)運(yùn)行的豐富互聯(lián)網(wǎng)應(yīng)用程序。 Adobe AIR 提供一種激動(dòng)人心的新方式, 可借助創(chuàng)新的、品牌的桌面應(yīng)用程序吸引客戶, 而無(wú)需對(duì)現(xiàn)有技術(shù)、人員或流程進(jìn)行更改。]]></mx:text></mx:Text> </mx:Canvas>

AIRInfo

1.2 實(shí)現(xiàn)不同子容器之間的傳值
在ViewStack導(dǎo)航中，最常用的功能就是當(dāng)切換每個(gè)子容器的時(shí)候，能夠互相的傳送參數(shù)。傳送參數(shù)的一般的做法是可以創(chuàng)建一個(gè)全局的靜態(tài)類或者靜態(tài)變量，把參數(shù)值暫時(shí)存放起來(lái)。

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="傳遞的參數(shù)值："><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 = "傳遞過(guò)來(lái)的參數(shù)值：" + 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() ??{ ???// 構(gòu)造函數(shù) ??}

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

??// 定義變量 ??public var param : String; ?} }

?

二、 標(biāo)簽導(dǎo)航設(shè)計(jì)
標(biāo)簽導(dǎo)航又稱選項(xiàng)卡導(dǎo)航，這種導(dǎo)航是通過(guò)管理若干個(gè)標(biāo)簽頁(yè)，來(lái)切換子容器的。標(biāo)簽導(dǎo)航容器是ViewStack導(dǎo)航容器的子類，集成了ViewStack的諸多功能。

2.1 使用TabNavigator導(dǎo)航容器
在Flex中，提供了TabNavigator標(biāo)簽導(dǎo)航容器。使用標(biāo)簽<mx:TabNavigator>可以創(chuàng)建一個(gè)TabNavigator導(dǎo)航容器。

<?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 動(dòng)態(tài)添加TAB標(biāo)簽
在TabNavigator導(dǎo)航容器的應(yīng)用中，動(dòng)態(tài)添加TAB標(biāo)簽是最常用的了。動(dòng)態(tài)添加TAB標(biāo)簽是根據(jù)用戶的操作，添加指定數(shù)量的TAB標(biāo)簽的數(shù)量。

<?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組件中指定的標(biāo)簽頁(yè)myTab.removeChild((DisplayObject)(myTab.selectedChild));}// 添加按鈕單擊事件private function btnAddTab_click():void{// 添加TabNavigator組件中指定的標(biāo)簽頁(yè)addTab(txtTitle.text, txtContent.htmlText);}// 添加標(biāo)簽頁(yè)private function addTab(tabLabel:String, tabText:String):void{// 創(chuàng)建Canvas對(duì)象var canvas:Canvas = new Canvas();// 設(shè)置Canvas對(duì)象的標(biāo)簽屬性canvas.label = tabLabel;// 創(chuàng)建Label對(duì)象var label:Label = new Label();// 設(shè)置Label對(duì)象的超文本內(nèi)容label.htmlText = tabText;// 添加Label對(duì)象到canvas中canvas.addChild(label);// 添加canvas對(duì)象到TabNavigator組件中myTab.addChild(canvas);}]]></mx:Script><mx:HBox fontSize="12"><mx:Form><mx:FormItem label="題目："><mx:TextInput id="txtTitle"/></mx:FormItem><mx:FormItem label="內(nèi)容："><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>

三、 折疊導(dǎo)航設(shè)計(jì)
表單是很多應(yīng)用中最基本的組件之一。當(dāng)遇到多個(gè)關(guān)聯(lián)表單，使用者可能會(huì)遇到操作上的困難。當(dāng)表單很多，并且不能集成在同一個(gè)頁(yè)面時(shí)，用戶需要在多個(gè)表單之間前后移動(dòng)切換。折疊導(dǎo)航設(shè)計(jì)可以有效的解決這個(gè)問(wèn)題。在Flex中，使用標(biāo)簽<mx:Accordion>可以創(chuàng)建一個(gè)Accordion導(dǎo)航容器。

<?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>

?

?

總結(jié)

以上是生活随笔為你收集整理的flex----导航的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。