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使用也不难。

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 3                xmlns:s="library://ns.adobe.com/flex/spark"
 4                xmlns:mx="library://ns.adobe.com/flex/mx"
 5                minWidth="955" minHeight="600">
 6     <fx:Declarations>
 7         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 8     </fx:Declarations>
 9     
10     <fx:Script>
11         <![CDATA[
12             import mx.events.FlexEvent;
13             import mx.modules.IModuleInfo;
14             import mx.modules.ModuleManager;
15             import mx.core.IVisualElement;  
16             import mx.events.ModuleEvent;
17             import mx.controls.Alert;
18             import mx.modules.Module;
19             private var module:IModuleInfo;   
20             public var sm:Object;
21             public var result:String;
22             protected function btnLoad_clickHandler(event:MouseEvent):void
23             {
24                 // TODO Auto-generated method stub
25                 module = ModuleManager.getModule("Modules/m1.swf");   
26                 module.load(); 
27                 module.addEventListener( ModuleEvent.READY,moduleLoadHandler );   
28                 module.addEventListener( ModuleEvent.PROGRESS,onModuleProgress);                
29                 module.addEventListener( ModuleEvent.UNLOAD,ModuleUnLoad);        
30                 module.addEventListener( ModuleEvent.ERROR,ModuleError);                    
31             }
32             
33             private function moduleLoadHandler(event:ModuleEvent ):void   
34             {   
35                 sm = module.factory.create();
36                 bContent.addElement( sm as IVisualElement);
37             }   
38             
39             protected function onModuleProgress (e:ModuleEvent) : void {      
40                 lb.text = "[MyFlexHero]:ModuleEvent.PROGRESS 当前已经加载了: " + e.bytesLoaded + " of " + e.bytesTotal + " loaded.";     
41             }    
42             
43             private function ModuleUnLoad(event:ModuleEvent ):void   
44             {   
45                 Alert.show("加载取消");                        
46             }   
47             
48             private function ModuleError(event:ModuleEvent ):void   
49             {   
50                 Alert.show("加载错误");                        
51             }   
52             
53             protected function btnUnLoad_clickHandler(event:MouseEvent):void
54             {
55                 // TODO Auto-generated method stub                
56                 module.unload();             
57                 bContent.removeAllElements();
58             }                    
59             
60         ]]>
61     </fx:Script>
62     
63     <s:BorderContainer id="bContent" width="602" height="310">
64         
65     </s:BorderContainer>
66     <s:Button id="btnLoad" x="99" y="366" label="加载模块" click="btnLoad_clickHandler(event)"/>
67     <s:Label x="346" y="366" width="463" height="140" id="lb" text="标签"/>
68     <s:Button x="196" y="366" label="卸载模块" id="btnUnLoad" click="btnUnLoad_clickHandler(event)"/>
69 </s:Application>

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