如果一个Flex应用程序很复杂,建立单一的SWF文件会导致该文件相当大,这种情况对于Web应用来说是噩梦,所以如果我们分模块来下载,这样的话,我们需要什么内容就加载什么内容,减轻客户端的体积。下面我们来用Flex模块设计来设计Flex程序,-----ModuleManager。
第一步、新建项目
文件——>新建——>Flex项目,命名为“ModManager ”。
每二步、新建ModuleA,ModuleB两个简单的模块。
ModuleA代码清单如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="252" height="208">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Panel x="2" y="2" id="pan" title="我是第一个ModuleA" width="250" height="200">
<s:Label text="我是第一个ModuleA" x="77" y="62"/>
</s:Panel>
</mx:Module>
ModuleB代码清单如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="266" height="220">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Panel x="6" y="10" id="pan" title="我是第二个ModuleB" width="250" height="200">
<s:Label text="我是第一个ModuleB" x="77" y="62"/>
</s:Panel>
</mx:Module>
第三步、编写主应用程序代码。
主应用程序ModManager.mxml代码清单如下:
<?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">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Application{ font-size:12pt;}
</fx:Style>
<fx:Script>
<![CDATA[
//使用模块前必须引入相应的类
import modules.ModuleA;
import modules.ModuleB;
import mx.events.ModuleEvent;
import mx.modules.IModuleInfo;
import mx.modules.ModuleManager;
private var moduleInfo:IModuleInfo;
private var moduleName:String;
//根据ti的内容加载不同的模块
private function loadModule():void{
switch(ti.text)
{
case "ma": moduleName="ModuleA";break;
case "mb": moduleName="ModuleB";break;
default: moduleName="";return;break;
}
//添加侦听事件
moduleInfo=ModuleManager.getModule("modules\\"+moduleName+".swf");
moduleInfo.addEventListener(ModuleEvent.ERROR,omModuleError);
moduleInfo.addEventListener(ModuleEvent.PROGRESS,onModuleProgress);
moduleInfo.addEventListener(ModuleEvent.READY,onModuleReady);
moduleInfo.addEventListener(ModuleEvent.SETUP,onModuleSetup);
moduleInfo.addEventListener(ModuleEvent.UNLOAD,onModuleUnload);
//加载模块
moduleInfo.load();
}
//当模块加载出错时调用
private function omModuleError(e:ModuleEvent):void{
writeLog(moduleName+"发生错误");
}
//当模块加载进行时被调用
private function onModuleProgress(e:ModuleEvent):void{
writeLog(moduleName+"处理中,已经加载"+e.bytesLoaded+"+"+e.bytesTotal);
}
//当模块加载完成时被调用
private function onModuleReady(e:ModuleEvent):void{
writeLog(moduleName+"完成准备");
}
//当加载完成的模块被添加到应用中时调用
private function onModuleSetup(e:ModuleEvent):void{
writeLog(moduleName+"安装");
switch(moduleName)
{
case "ModuleA":
var ma:ModuleA= moduleInfo.factory.create() as ModuleA;
ma.width=400;
ma.height=300;
vbx.addElement(ma);
break;
case "ModuleB":vbx.addElement(moduleInfo.factory.create() as ModuleB);
break;
}
}
//当模块卸载是被调用
private function onModuleUnload(e:ModuleEvent):void{
writeLog(moduleName+"卸载");
}
//卸载模块
private function unloadModule():void{
vbx.removeAllElements();
moduleInfo.unload();
}
private function writeLog(s:String):void{
ta.text+=s+"\n";
callLater(setScroll);
}
private function setScroll():void{
ta.verticalCenter=ta.maxWidth;
}
]]>
</fx:Script>
<s:HGroup id="hbx" width="100%" height="100%">
<s:VGroup width="300">
<s:HGroup width="100%">
<s:TextInput id="ti" width="50" text="ma"/>
<s:Button id="btnLoad" label="加载" click="loadModule()"/>
<s:Button id="btnUnload" label="卸载" click="unloadModule()"/>
</s:HGroup>
<s:TextArea id="ta" width="100%" height="500"/>
</s:VGroup>
<s:VGroup id="vbx" width="535" height="527"/>
</s:HGroup>
</s:Application>