Flex模块化应用程序开发

本文和大家重点讨论一下Flex模块化应用程序开发，模块（Module）是创建大型Flex应用程序的一个解决方案，相信本文的介绍一定会让你有所收获。

创新互联是专业的富裕网站建设公司，富裕接单;提供做网站、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行富裕网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

Flex模块化应用程序开发

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

模块（Modules）

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

?应用程序越大开发过程越复杂；
?应用程序越大测试过程越复杂；
?应用程序越大部署过程越复杂；
?SWF文件越大加载时间越长

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

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

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

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

程序代码

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.   
  
  
  4. click="removeModule()"/> 
    5.   
  
  
  5.   
  
  
  6. click="removeModule();loadModule('ChartModule.swf')"/> 
    7.   
  
  
  7.   
  
  
  8. click="removeModule();loadModule('GridModule.swf')"/> 
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.   
  
  
  11.  
    12.   
  
  
  12.   
  
  
  13. width="100%"height="100%"/> 
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.

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

这里有一个readyModule函数，它在块中：

程序代码

 
 
 
      
  
  
  1. privatefunctionreadyModule(event:ModuleEvent):void  
    2.   
  
  
  2. {  
    3.   
  
  
  3. varml:ModuleLoader=event.targetasModuleLoader;  
    4.   
  
  
  4.  
    5.   
  
  
  5. varichild:IExpenseReport=ml.childasIExpenseReport;  
    6.   
  
  
  6. if(ichild!=null){  
    7.   
  
  
  7. ichild.expenseReport=expenses;  
    8.   
  
  
  8. }  
    9.   
  
  
  9. }  
    10.   
  
  
  10.  
    11.

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

IExpenseReport接口：

程序代码

 
 
 
      
  
  
  1. publicinterfaceIExpenseReport  
    2.   
  
  
  2. {  
    3.   
  
  
  3. functionsetexpenseReport(ac:ArrayCollection):void;  
    4.   
  
  
  4. }  
    5.   
  
  
  5.  
    6.

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

程序代码

 
 
 
      
  
  
  1.   
  
  
  2. layout="vertical" 
    3.   
  
  
  3. percentWidth="100"percentHeight="100"> 
    4.   
  
  
  4.   
  
  
  5. importmx.collections.ArrayCollection;  
    6.   
  
  
  6. [Bindable]publicvarexpenses:ArrayCollection;  
    7.   
  
  
  7.  
    8.   
  
  
  8. publicfunctionsetexpenseReport(ac:ArrayCollection):void  
    9.   
  
  
  9. {  
    10.   
  
  
  10. expenses=ac;  
    11.   
  
  
  11. }  
    12.   
  
  
  12. ]]> 
    13.   
  
  
  13. ...  
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.

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

程序代码

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.  
    3.

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

编译并运行程序

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

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

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

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

将SWF文件***化

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

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

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

程序代码

 
 
 
      
  
  
  1. mxmlc-load-externs=report.xmlChartModule.mxml 
    2.

当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）旧的定义——而不是你已经更改过的。

程序代码

 
 
 
      
  
  
  1. mxmlc-link-report=report.xmlMain.mxml  
    2.   
  
  
  2. mxmlc-load-externs=report.xmlChartModule.mxml  
    3.   
  
  
  3. //etc.  
    4.   
  
  
  4.  
    5.

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

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

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

Flex模块化总结

?将程序分割成多块并不是每个人都会使用模块（Module）。使用这种方法主程序会比平常小，而且多数用户只使用整个程序的一部分。
?使用接口来使主程序或模块（Module）来与加载的模块通信。这使维护变得容易。
?使用-link-report命令参数编译主程序来产生一个使用元件列表。
?在主程序中使用-load-externs和report.xml编译模块（Module），这样可以使它们变得更小。

【编辑推荐】

  1. Flex模块化的目的和方法
  2. Flex安全沙箱问题解决方法
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

名称栏目：Flex模块化应用程序开发
文章位置：http://www.shufengxianlan.com/qtweb/news28/87678.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

企业建站知识

分类信息网站

LED显示屏　　 　橡塑保温板　　 　传美奇电器　　 　成都网站设计　　 　成都木托盘　　 　手机网站建设公司　　 　营销型网站建设　　 　旅游网站建设方案　　 　四川柴油发电机　　 　h5页面制作　　 　成发金汇　　 　犀浦封阳台　　 　解决方案　　 　移动网站建设　　 　绵阳服务器托管　　 　企业网站建设　　 　重庆移动机房托管　　 　成都展柜定制　　 　网站制作公司　　 　盐亭网站建设