RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
Flex模块化应用程序开发的示例分析

这篇文章主要介绍了Flex模块化应用程序开发的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联主要从事网站设计制作、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务涡阳,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

Flex模块化应用程序开发

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

模块(Modules)

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

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

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

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

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

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

程序代码

         

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

这里有一个readyModule函数,它在块中:


程序代码

privatefunctionreadyModule(event:ModuleEvent):void  {  varml:ModuleLoader=event.targetasModuleLoader;   varichild:IExpenseReport=ml.childasIExpenseReport;  if(ichild!=null){  ichild.expenseReport=expenses;  }  }

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

IExpenseReport接口:

程序代码

publicinterfaceIExpenseReport  {  functionsetexpenseReport(ac:ArrayCollection):void;  }

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


程序代码

  ...  

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

程序代码

这个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文件。

程序代码

mxmlc-load-externs=report.xmlChartModule.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.xmlMain.mxml  mxmlc-load-externs=report.xmlChartModule.mxml  //etc.

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

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

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

感谢你能够认真阅读完这篇文章,希望小编分享的“Flex模块化应用程序开发的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章标题:Flex模块化应用程序开发的示例分析
本文链接:http://lswzjz.com/article/jhoode.html