flex学习文章之《模块加载》

  最近准备拿flex做个项目练练手，初步设定需求是个视频聊天软件，通信视频服务选用red5，远程录屏选用java开源项目，前端使用flex。在开发过程中，碰到一些小问题，通过博客记录下来，方便以后回顾。

  客户聊天功能我使用了两种方式进行数据传输，客户端都监听shareobject对象，还有一种是客服端call服务器的方法，通过服务器invoke通知。这中间模块建立的模块有点多，感觉挺乱的，所以采用动态模块加载。

   网上查了一下，看到模块加载，有两种方式，一种是ModuleLoader，另一种是使用ModuleManager。网上说ModuleLoader比ModuleManager简单，实际使用下来，其实差不多，如果都写一样功能的话。项目里面我选用ModuleManager，一次可以载入多个模块，并且对加载的每个过程都可以监听，很不错。

   ModuleLoader使用很简单

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">           <fx:Script>         <![CDATA[             import mx.modules.ModuleLoader;               import mx.controls.Alert;                           protected function btnModelLoad_clickHandler(event:MouseEvent):void             {                 var url:String = modelLoad.url;                   if( url != null && url!="")                 {modelLoad.unloadModule();}                                 modelLoad.url="Modules/m1.swf";                 modelLoad.loadModule();                         }                           protected function btnModelUnLoad_clickHandler(event:MouseEvent):void             {                 // TODO Auto-generated method stub                 modelLoad.url="";                 modelLoad.unloadModule();             }                       ]]>     </fx:Script>           <fx:Declarations>         <!-- 将非可视元素（例如服务、值对象）放在此处 -->     </fx:Declarations>           <s:Button id="btnModelLoad" x="693" y="531" label="加载模块" click="btnModelLoad_clickHandler(event)">            </s:Button>     <s:Button id="btnModelUnLoad" x="693" y="473" label="卸载模块"               click="btnModelUnLoad_clickHandler(event)">            </s:Button>     <s:ModuleLoader id="modelLoad">               </s:ModuleLoader>       </s:Application>

　　

   ModuleManager使用也不难。

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.modules.IModuleInfo;
            import mx.modules.ModuleManager;
            import mx.core.IVisualElement;  
            import mx.events.ModuleEvent;
            import mx.controls.Alert;
            import mx.modules.Module;
            private var module:IModuleInfo;   
            public var sm:Object;
            public var result:String;
            protected function btnLoad_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                module = ModuleManager.getModule("Modules/m1.swf");   
                module.load(); 
                module.addEventListener( ModuleEvent.READY,moduleLoadHandler );   
                module.addEventListener( ModuleEvent.PROGRESS,onModuleProgress);                
                module.addEventListener( ModuleEvent.UNLOAD,ModuleUnLoad);        
                module.addEventListener( ModuleEvent.ERROR,ModuleError);                    
            }
            
            private function moduleLoadHandler(event:ModuleEvent ):void   
            {   
                sm = module.factory.create();
                bContent.addElement( sm as IVisualElement);
            }   
            
            protected function onModuleProgress (e:ModuleEvent) : void {      
                lb.text = "[MyFlexHero]:ModuleEvent.PROGRESS 当前已经加载了: " + e.bytesLoaded + " of " + e.bytesTotal + " loaded.";     
            }    
            
            private function ModuleUnLoad(event:ModuleEvent ):void   
            {   
                Alert.show("加载取消");                        
            }   
            
            private function ModuleError(event:ModuleEvent ):void   
            {   
                Alert.show("加载错误");                        
            }   
            
            protected function btnUnLoad_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub                
                module.unload();             
                bContent.removeAllElements();
            }                    
            
        ]]>
    </fx:Script>
    
    <s:BorderContainer id="bContent" width="602" height="310">
        
    </s:BorderContainer>
    <s:Button id="btnLoad" x="99" y="366" label="加载模块" click="btnLoad_clickHandler(event)"/>
    <s:Label x="346" y="366" width="463" height="140" id="lb" text="标签"/>
    <s:Button x="196" y="366" label="卸载模块" id="btnUnLoad" click="btnUnLoad_clickHandler(event)"/>
</s:Application>

目前第一步只是简单使用这些控件，接下来在项目开发的过程中，需要继续深入学习。