Flex中模块化页面跳转

做好导航条后，要实现点击不同导航项目，就跳转到不同页面。我觉得用模块来做挺不错，这样不用像用组件那样一股脑加载进来，只需要在请求某个页面后加载模块，大大缩减了主应用程序的体积。第一次调用某模块有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>

这样就可以在点击导航菜单中的项目后，将相应模块装入刚刚定义的容器里。