Flex中使用模块Module的例子

首先是应用的代码, 在应用中使用 <mx:ModuleLoader >来加载模块
<?xml version="1.0"?>
<!-- modules/URLModuleLoaderApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Panel
    title="Module Example"
    height="90%"
    width="90%"
    paddingTop="10"
    paddingLeft="10"
    paddingRight="10"
    paddingBottom="10"
    >
    
    <mx:Label width="100%" color="blue"
    text="Select the tabs to change the panel."/>
    
    <mx:TabNavigator id="tn"
    width="100%"
    height="100%"
    creationPolicy="auto"
    >
    
        <mx:VBox id="vb1" label="Column Chart Module">
        
            <mx:Label id="l1" text="ColumnChartModule.swf"/>
            <mx:ModuleLoader url="ColumnChartModule.swf"/>
        
        </mx:VBox>
        
        <mx:VBox id="vb2" label="Pie Chart Module">
        
            <mx:Label id="l2" text="piehchartmodule.swf"/>
            <mx:ModuleLoader url="piechartmodule.swf"/>
        
        </mx:VBox>
        
        <mx:VBox id="vb3" label="Line Chart Module">
        
            <mx:Label id="l3" text="linehchartmodule.swf"/>
            <mx:ModuleLoader url="linechartmodule.swf"/>
        
        </mx:VBox>
    
    </mx:TabNavigator>
    </mx:Panel>

</mx:Application>

 

在这个应用中主要是一个TagNavigator, 里面有三个标签页. 每个标签页加载一个模块.
下面是其中一个模块的代码:
<?xml version="1.0"?>
<!--ColumnChartModule.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >

    <mx:Script><![CDATA[
    
        import mx.collections.ArrayCollection;
        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500},
        {Month:"Feb", Profit:1000, Expenses:200},
        {Month:"Mar", Profit:1500, Expenses:500}
        ]);
        
    ]]></mx:Script>
    
    <mx:ColumnChart id="myChart" dataProvider="{expenses}">
    
        <mx:horizontalAxis>
        
            <mx:CategoryAxis
            dataProvider="{expenses}"
            categoryField="Month"
            />
            
        </mx:horizontalAxis>
        
        <mx:series>
        
            <mx:ColumnSeries
            xField="Month"
            yField="Profit"
            displayName="Profit"
            />
            
            <mx:ColumnSeries
            xField="Month"
            yField="Expenses"
            displayName="Expenses"
            />
            
        </mx:series>
    
    </mx:ColumnChart>
    
    <mx:Legend dataProvider="{myChart}"/>
    
</mx:Module>

最后, 应用和三个模块一共会生成4个SWF. 一般来说, 应用使用延迟加载策略. 也就是说, 如果你打开应用后, 从来都不使用其中的某个模块, 那个这个模块永远不会被加载. 这次做的好处是, 加快了第一次打开应用的速度, 但随之而来的缺点就是, 第一次打开使用某个功能, 需要加载模块时, 会需要一点等待的时间.

 

如果你没有看过Roger Gonzalez的Blog中关于模块（Module）的文章，那么你应该去那里了解一下Flex 2这个特性背后的细节和想法。这里我不想过多地探讨为什么要这样，而是想要给大家展示一个使用了模块（Module）的简单的Flex程序，你可以从中获得启示。

示例源码

你可以下载关于这个例子的压缩文件：点击这里下载。

模块（Modules）

模块（Module）是创建大型Flex应用程序的一个解决方案，它允许你将你的用户接口分割成许多分散的有各自用途的小块。例如（下面出自Flex 2的文档），一个保险公司可能有数百个表单——针对于各个领域的，针对各种请求类型，以及针对各种应用等等。创建一个包含所有这些表单的Flex应用程序将会产生一个巨大SWF文件，还会有不少问题：
 •应用程序越大开发过程越复杂；
 •应用程序越大测试过程越复杂；
 •应用程序越大部署过程越复杂；
 •SWF文件越大加载时间越长

我的示例程序基于Flex 2文档中的一个程序，但是我将它做了一些更改来说明几个常见的问题。这个例子展示了一个主程序和其它三个共享公有数据的模块（Module）。

其中一个设计要素是一个接口的使用，这个接口实质上是接口实现者和使用者之间的一个契约。这个例子将会说明我所说的意思。模块（Module）的接口部分虽然不是必须的但是却可以大大简化以后的开发和维护。比如，如果开发人员有一个小组负责报告部分，另一个小组负责图表部分，如果它们一开始用了接口，那么只要有需要，接口的实现就可以做足够多的变形而不会影响到工程结果。接口在模块（Module）中还扮演另外一个角色，我在下文中将会揭示这点。

模块（Module）是以<mx:Module>代替<mx:Application>作为根标签的MXML文件（或ActionScript文件）。你可以将带有<mx:Module>标签的作为一个程序来看，但是它不能运行。

这个示例有一个主程序文件以及带有一个接口的两个模块。打开主程序文件你会看到：



程序代码
<mx:Panel x="10" y="41" width="169" height="500" layout="absolute" title="Modules">
     <mx:Text x="10" y="24" text="Check a module to load it; uncheck to unload it" width="129"/>
     <mx:RadioButton x="10" y="97" label="None" selected="true"
                         click="removeModule()"/>
     <mx:RadioButton x="10" y="123" label="Chart"
                        click="removeModule();loadModule('ChartModule.swf')"/>
     <mx:RadioButton x="10" y="175" label="Table"
                       click="removeModule();loadModule('GridModule.swf')"/>
</mx:Panel>

<mx:Panel x="187" y="41" width="500" height="500" layout="absolute" title="Module: {moduleName}">
      <mx:ModuleLoader id="currentModule" ready="readyModule(event)"
                      width="100%" height="100%" />
</mx:Panel>


第一个Panel包含了控制示例中模块（Module）加载和卸载的RadioButtons。第二个Panel是使用<mx:ModuleLoader>标签加载模块（Module）的地方。注意那个id为currentModule的ModuleLoader，它有一个关于ready事件的事件处理器。当模块SWF文件加载了足够多可以开始使用的时候，ModuleLoader 就会分派ready事件（或者说ModuleEvent.READY）。

这里有一个readyModule函数，它在<mx:Script>块中：



程序代码
private function readyModule( event:ModuleEvent ) : void
{
      var ml:ModuleLoader = event.target as ModuleLoader;

     var ichild:IExpenseReport = ml.child as IExpenseReport;
     if( ichild != null ) {
              ichild.expenseReport = expenses;
     }
}


注意ModuleLoader的child属性是如何转换为IExpenseReport类的。IExpenseReport是一个所有模块（Module）都实现了的接口。只要每个模块都实现了这个接口，它就可以很容易适应于应用程序。换句话说，想象一下当你需要创建另一个表单或者报告的时候它的用途。并不需要更改主程序为新模块添加IF语句，你只要在新模块中实现IExpenseReport接口它就可以在程序中完美地运行。

IExpenseReport接口是：



程序代码
public interface IExpenseReport
{
     function set expenseReport( ac:ArrayCollection ) : void;
}


每个模块（Module）都实现这个接口，定义各自的名为expenseReport的set函数。下面是ChartModule的根标签和接口IExpenseReport的实现：



程序代码
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"implements="IExpenseReport"
           layout="vertical"
           percentWidth="100" percentHeight="100" >
    <mx:Script><![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable] public var expenses:ArrayCollection;

          public function set expenseReport( ac:ArrayCollection ) : void
          {
                expenses = ac;
           }
    ]]></mx:Script>
...
</mx:Module>


让我们回到主程序，RadioButton的click事件会卸载任何当前已加载的模块然后加载一个新的模块。下面是ChartModule的RadioButton标签：



程序代码
<mx:RadioButton x="10" y="123" label="Chart" click="readyModule('ChartModule.swf')"/>


这个click事件会调用上面列出的readyModule事件。

编译并运行程序

如果你使用了Flex Builder 2，请确定更改了项目的Properties将模块（Module）作为"Applications"包含进来。这样Flex Builder 2回将它们编译进SWF文件并且放进bin文件夹中。

Flex Builder注意：要创建一个使用模块（Module）的工程，请使用工程的Properties将模块文件作为"Applications"。这会使得他们被编译进SWF文件。

一旦SWF文件被创建你就可以运行主程序并点击RadioButtons在模块（Module）之间切换。

Flex Builder注意：Flex Builder并不会保存任何关于模块（Module）和主程序的从属信息。只要你对一个模块（Module）作了更改，你就可能需要重新编译主程序或其它从属的模块（Module）。

将SWF文件最优化

如果你查看一下主程序的SWF文件和模块（Module）的SWF文件的话，你会发现它们的大小差不多。这就说明，模块的SWF和主程序SWF中有很多同样的组件定义。

Flash Player并不会保存元件（symbol）的副本。例如，如果主程序有一个Button组件而一个模块（Module）也有一个Button组件，Flash Player就不会从模块中加载Button了，因为它已经在主程序中有定义了。

使用-link-report=report.xml编译主程序，这样会创建一个链接到主程序的包含所有元件信息的文件。然后在编译模块（Module）的时候会使用那个report.xml文件。



程序代码
mxmlc -load-externs=report.xml ChartModule.mxml


当ChartModule被编译的时候，所有在report.xml文件中列出的元件将会在它的SWF中省略。当我不使用report.xml文件编译ChartModule.swf的时候，它的大小是202K。而当我使用report.xml文件的时候，SWF的大小只有68K。这大大减少了模块（Module）的加载时间。

在文章的开始将到模块（Module）的时候，我提过接口有另一个作用。假设你没有使用接口而是在主程序中引用模块的类。当你运行link-report的时候，你的模块类将会出现在report.xml中。当你使用使用link-report编译模块（Module）的时候你的模块并不会包含在它自己的SWF中！起初这并不会成为一个问题，尽管主程序由于包含了模块的定义而变得很大。然而，当你更改你的模块的时候发生了什么才是重要的。如果你没有重新编译主程序，你主程序的SWF文件将会包含模块（Module）旧的定义——而不是你已经更改过的。



程序代码
mxmlc -link-report=report.xml Main.mxml
mxmlc -load-externs=report.xml ChartModule.mxml
// etc.


如果你决定使用这个技术来减小模块（Module）的大小，那么就使用接口来确保终端用户使用的总是模块（Module）的最新版本。

Flex Builder注意：Flex Builder在一个工程里没有办法做到这些。如果你确定你将要创建一个使用模块（Module）的工程，可以考虑一下将公共的类和接口（包括event类）放到一个SWC（Flex Library Project）中然后将模块（Module）分离到它们各自的工程里。

或者，你可以将所有东西创建为一个单一的Flex工程，然后将最优化作为一个产品化前或测试前的部署步骤在Flex Builder之外进行。

 

Flex2.01之后提供了modules模块化开发包，开发者可以将程序的某些模块编译成swf，在需要的地方load进去，实现模块化的开发。

现在问题来了，每个module会被编译成swf，在一个Application中，module之间该如何通信交互呢。

通常来说，在一个swf中，组件间的交互通信可以直接addEventListener 和dispatchEvent来完成事件的传递。当然这样标准的做法也适用于module。理解在AS 3.0中事件遵循向上传递的原则，那么下面的工作就好做了。

例如，在一个Application中分别由ModuleLoaderA和ModuleLoaderB加载了两个module，分别为moduleA和moduleB，其中A需要向B传递数据。事件的传递就应该是这样的：moduleA --> ModuleLoaderA --> Application --> ModuleLoaderB --> moduleB。
1. 首先当然先要定义一个事件，那么在moduleA里应该由this.parent.parent来dispatchEvent(事件)，this.parent即加载moduleA的ModuleLoaderA，那么this.parent.parent即Application；
2. 在Application中，由ModuleLoaderA来addEventListener(事件)，即侦听了由moduleA传上来的事件，侦听到之后再由ModuleLoaderB负责dispatchEvent(事件)。
3. 在moduleB里，this.parent.parent.addEventListener(事件)，这样就侦听了由ModuleLoaderB传递的事件。

其实在module里，使用this.systemManager.addEventListener/dispatchEvent也可以完成事件的传递，但是如果一个module里用this.systemManager，而另一个module里使用this.parent.parent却不能传递事件，systemManager并不等于application，systemManager.document才是application，也就是说用systemManager的话必须两者都用，用parent的话也可以使用systemManager.document。不明白的朋友可以仔细阅读Flex的帮助文档。