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

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

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

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

   ModuleLoader使用很简单

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

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