做好导航条后,要实现点击不同导航项目,就跳转到不同页面。我觉得用模块来做挺不错,这样不用像用组件那样一股脑加载进来,只需要在请求某个页面后加载模块,大大缩减了主应用程序的体积。第一次调用某模块有1秒的延迟,以后再调用就不会延迟了。
比如有一个名为NavigationMenu的导航组件(component):
- <?xml version="1.0" encoding="utf-8"?>
- <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:layout>
- <s:VerticalLayout horizontalAlign="center"/>
- </s:layout>
- <fx:Script>
- <!--[CDATA[
- import mx.controls.Alert;
- import mx.core.Application;
- import mx.events.MenuEvent;
- ]]-->
- </fx:Script>
- <fx:Declarations>
- <s:XMLListCollection id="navigationMenuData">
- <fx:XMLList xmlns="">
- <menuitem label="首页" module="pageModules/IndexPageModule.swf">
- </menuitem>
- <menuitem label="计划管理">
- <submenu label="查看总招生计划"
- type="radio"
- groupName="managePlan"
- module="pageModules/planManagement/ViewTotalRecruitPlan.swf"/>
- <submenu label="查看分专业招生计划"
- type="radio"
- groupName="managePlan"
- module="pageModules/planManagement/ViewMajorRecruitPlan.swf"/>
- <submenu label="查看分省招生计划"
- type="radio"
- groupName="managePlan"
- module="pageModules/planManagement/ViewProvinceRecruitPlan.swf"/>
- <submenu type="separator"/>
- <submenu label="调整招生计划"
- type="radio"
- groupName="managePlan"
- module="pageModules/planManagement/ChangeRecruitPlan.swf"/>
- <submenu label="查看调整记录"
- type="radio"
- groupName="managePlan"
- module="pageModules/planManagement/ViewChangeHistory.swf"/>
- <submenu label="导入招生计划"
- type="radio"
- groupName="managePlan"
- module="pageModules/planManagement/ImportRecruitPlan.swf"/>
- </menuitem>
- </fx:XMLList>
- </s:XMLListCollection>
- </fx:Declarations>
- <mx:MenuBar id="navigationMenuBar"
- labelField="@label"
- dataProvider="{navigationMenuData}"/>
- </s:Group>
在主应用程序中把这个导航条放进去,然后在下方定义一个容器(比如fx:BorderContainer)来显示以后将要请求的页面:
- <s:BorderContainer id="mainContainer"
- borderColor="#cccccc"
- borderWeight="2"
- width="100%"
- height="100%"
- top="100">
- <s:layout>
- <s:VerticalLayout horizontalAlign="center"/>
- </s:layout>
- </s:BorderContainer>
在主应用程序的代码块中添加事件:
- <fx:Script>
- <!--[CDATA[
- import mx.controls.Alert;
- import mx.events.MenuEvent;
- import mx.events.ModuleEvent;
- import mx.modules.IModuleInfo;
- import mx.modules.Module;
- import mx.modules.ModuleManager;
-
- public var mm:IModuleInfo;
- public var mod:Module;
-
- protected function init():void
- {
- navMenu.navigationMenuBar.addEventListener(MenuEvent.ITEM_CLICK, menuItem_clickHandler);
- }
-
- protected function menuItem_clickHandler(event:MenuEvent):void
- {
- mm = ModuleManager.getModule(event.item.@module);
- mm.addEventListener(ModuleEvent.READY, modReady);
- mm.load();
-
- }
-
- public function modReady(event:ModuleEvent):void
- {
- mod = event.module.factory.create() as Module;
- mainContainer.removeAllElements();
- mainContainer.addElement(mod);
- }
- ]]-->
- </fx:Script>
这样就可以在点击导航菜单中的项目后,将相应模块装入刚刚定义的容器里。