Flex中模块化页面跳转

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

 

比如有一个名为NavigationMenu的导航组件(component):

 

 

 

1. 
   
2. <?xml version="1.0" encoding="utf-8"?>  
    
3. <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"  
    
4.          xmlns:s="library://ns.adobe.com/flex/spark"  
    
5.          xmlns:mx="library://ns.adobe.com/flex/mx">  
    
6.     <s:layout>  
    
7.         <s:VerticalLayout horizontalAlign="center"/>  
    
8.     </s:layout>  
    
9.     <fx:Script>  
    
10.         <!--[CDATA[  
     
11.             import mx.controls.Alert;  
     
12.             import mx.core.Application;  
     
13.             import mx.events.MenuEvent;  
     
14.         ]]-->  
     
15.     </fx:Script>  
     
16.     <fx:Declarations>  
     
17.         <s:XMLListCollection id="navigationMenuData">  
     
18.             <fx:XMLList xmlns="">  
     
19.                 <menuitem label="首页" module="pageModules/IndexPageModule.swf">  
     
20.                 </menuitem>  
     
21.                 <menuitem label="计划管理">  
     
22.                     <submenu label="查看总招生计划"  
     
23.                              type="radio"  
     
24.                              groupName="managePlan"  
     
25.                              module="pageModules/planManagement/ViewTotalRecruitPlan.swf"/>  
     
26.                     <submenu label="查看分专业招生计划"  
     
27.                              type="radio"  
     
28.                              groupName="managePlan"  
     
29.                              module="pageModules/planManagement/ViewMajorRecruitPlan.swf"/>  
     
30.                     <submenu label="查看分省招生计划"  
     
31.                              type="radio"  
     
32.                              groupName="managePlan"  
     
33.                              module="pageModules/planManagement/ViewProvinceRecruitPlan.swf"/>  
     
34.                     <submenu type="separator"/>  
     
35.                     <submenu label="调整招生计划"  
     
36.                              type="radio"  
     
37.                              groupName="managePlan"  
     
38.                              module="pageModules/planManagement/ChangeRecruitPlan.swf"/>  
     
39.                     <submenu label="查看调整记录"  
     
40.                              type="radio"  
     
41.                              groupName="managePlan"  
     
42.                              module="pageModules/planManagement/ViewChangeHistory.swf"/>  
     
43.                     <submenu label="导入招生计划"  
     
44.                              type="radio"  
     
45.                              groupName="managePlan"  
     
46.                              module="pageModules/planManagement/ImportRecruitPlan.swf"/>  
     
47.                 </menuitem>  
     
48.             </fx:XMLList>  
     
49.         </s:XMLListCollection>  
     
50.     </fx:Declarations>  
     
51. <mx:MenuBar id="navigationMenuBar"  
     
52.                           labelField="@label"  
     
53.                          dataProvider="{navigationMenuData}"/>  
     
54. </s:Group> 
     

 

在主应用程序中把这个导航条放进去，然后在下方定义一个容器（比如fx:BorderContainer）来显示以后将要请求的页面：

 

1. 
   
2. <s:BorderContainer id="mainContainer"  
    
3.                        borderColor="#cccccc"  
    
4.                        borderWeight="2"  
    
5.                        width="100%"  
    
6.                        height="100%"  
    
7.                        top="100">  
    
8.         <s:layout>  
    
9.             <s:VerticalLayout horizontalAlign="center"/>  
    
10.         </s:layout>  
     
11. </s:BorderContainer> 
    
    
     

 

在主应用程序的代码块中添加事件：

 

1. 
   
2. <fx:Script>    
    
3.         <!--[CDATA[  
    
4.             import mx.controls.Alert;  
    
5.             import mx.events.MenuEvent;  
    
6.             import mx.events.ModuleEvent;  
    
7.             import mx.modules.IModuleInfo;  
    
8.             import mx.modules.Module;  
    
9.             import mx.modules.ModuleManager;  
    
10.              
     
11.             public var mm:IModuleInfo;  
     
12.             public var mod:Module;  
     
13.              
     
14.             protected function init():void  
     
15.             {  
     
16.                 navMenu.navigationMenuBar.addEventListener(MenuEvent.ITEM_CLICK, menuItem_clickHandler);  
     
17.             }  
     
18.              
     
19.             protected function menuItem_clickHandler(event:MenuEvent):void  
     
20.             {  
     
21.                 mm = ModuleManager.getModule(event.item.@module);  
     
22.                 mm.addEventListener(ModuleEvent.READY, modReady);  
     
23.                 mm.load();  
     
24.                  
     
25.             }  
     
26.              
     
27.             public function modReady(event:ModuleEvent):void  
     
28.             {  
     
29.                 mod = event.module.factory.create() as Module;  
     
30.                 mainContainer.removeAllElements();  
     
31.                 mainContainer.addElement(mod);  
     
32.             }  
     
33.         ]]-->  
     
34.     </fx:Script> 
    
    
     

 

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

 

转载于:https://blog.51cto.com/2771253/525369