Flex4中 一个使用Module的例子

使用Flex的Module技术, 将各个业务子模块分散成若干个Module, 分别编译成swf文件, 最后由主程序根据需要动态加载卸载.

1.首先建立一个Module 代码如下

<?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="674" height="430"

>

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>

<fx:Script>
<!--[CDATA[
import flash.display.Bitmap;
]]-->
</fx:Script>

<mx:Image source="@Embed(source='resources/wp_01_1920x1080.jpg')">

</mx:Image>

</mx:Module>

代码内容超级简单 就是插入一个很大的图片 为了测试SWF文件使用 @Embed(source='resources/wp_01_1920x1080.jpg') 可以在FLEX编译SWF文件的时候 将这个图片编译到这个SWF文件中 这样这个SWF更大 方便测试

 

 

2. 接下来建议一个Application 使用ModuleLoader加载这个Module 代码如下

<?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" xmlns:component="component.*">
<s:layout>
<s:BasicLayout/>
</s:layout>

<fx:Script>

<!--[CDATA[
private function loadModule():void
{
if (loader.url==null)
{
loader.url = "imageModule.swf";
}
loader.loadModule();
}

private function unloadModule():void
{
loader.unloadModule();
}
]]-->

</fx:Script>

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Button x="21" y="27" label="加载" click="loadModule()"/>
<s:Button x="99" y="27" label="卸载" click="unloadModule()"/>
<s:Group x="21" y="56" width="688" height="319" id="group">
<mx:ModuleLoader id="loader">

</mx:ModuleLoader>
</s:Group>

</s:Application>

 

3. 接下来将这个Module 针对Aplication 进行优化

    右键工程 - 属性 - Flex模块 - 添加模块 - 设置优化Application 即可

 

 

 4. 编译成功后 我们看到 这个Module 有1M大小 这个Application 仅仅23K (Debug模式下)