Flex模塊化應用程序開發
本文和大家重點討論一下Flex模塊化應用程序開發，模塊（Module）是創建大型Flex應用程序的一個解決方案，相信本文的介紹一定會讓你有所收獲。
Flex模塊化應用程序開發
如果你沒有看過RogerGonzalez的Blog中關于模塊（Module）的文章，那么你應該去那里了解一下Flex2這個特性背后的細節和想法。這里我不想過多地探討為什么要這樣，而是想要給大家展示一個使用了模塊（Module）的簡單的Flex程序，你可以從中獲得啟示。
模塊（Modules）
模塊（Module）是創建大型Flex應用程序的一個解決方案，它允許你將你的用戶接口分割成許多分散的有各自用途的小塊。例如（下面出自Flex2的文檔），一個保險公司可能有數百個表單——針對于各個領域的，針對各種請求類型，以及針對各種應用等等。創建一個包含所有這些表單的Flex應用程序將會產生一個巨大SWF文件，還會有不少問題：
?應用程序越大開發過程越復雜；
?應用程序越大測試過程越復雜；
?應用程序越大部署過程越復雜；
?SWF文件越大加載時間越長
我的示例程序基于Flex2文檔中的一個程序，但是我將它做了一些更改來說明幾個常見的問題。這個例子展示了一個主程序和其它三個共享公有數據的模塊（Module）。
其中一個設計要素是一個接口的使用，這個接口實質上是接口實現者和使用者之間的一個契約。這個例子將會說明我所說的意思。模塊（Module）的接口部分雖然不是必須的但是卻可以大大簡化以后的開發和維護。比如，如果開發人員有一個小組負責報告部分，另一個小組負責圖表部分，如果它們一開始用了接口，那么只要有需要，接口的實現就可以做足夠多的變形而不會影響到工程結果。接口在模塊（Module）中還扮演另外一個角色，我在下文中將會揭示這點。
模塊（Module）是以<mx:Module>代替<mx:Application>作為根標簽的MXML文件（或ActionScript文件）。你可以將帶有<mx:Module>標簽的作為一個程序來看，但是它不能運行。
這個示例有一個主程序文件以及帶有一個接口的兩個模塊。打開主程序文件你會看到：
程序代碼
- <mx:Panelxmx:Panelx="10"y="41"width="169"height="500"layout="absolute"title="Modules">
- <mx:Textxmx:Textx="10"y="24"text="Checkamoduletoloadit;unchecktounloadit"width="129"/>
- <mx:RadioButtonxmx:RadioButtonx="10"y="97"label="None"selected="true"
- click="removeModule()"/>
- <mx:RadioButtonxmx:RadioButtonx="10"y="123"label="Chart"
- click="removeModule();loadModule('ChartModule.swf')"/>
- <mx:RadioButtonxmx:RadioButtonx="10"y="175"label="Table"
- click="removeModule();loadModule('GridModule.swf')"/>
- </mx:Panel>
- <mx:Panelxmx:Panelx="187"y="41"width="500"height="500"layout="absolute"title="Module:{moduleName}">
- <mx:ModuleLoaderidmx:ModuleLoaderid="currentModule"ready="readyModule(event)"
- width="100%"height="100%"/>
- </mx:Panel>
***個Panel包含了控制示例中模塊（Module）加載和卸載的RadioButtons。第二個Panel是使用<mx:ModuleLoader>標簽加載模塊（Module）的地方。注意那個id為currentModule的ModuleLoader，它有一個關于ready事件的事件處理器。當Flex模塊化中模塊SWF文件加載了足夠多可以開始使用的時候，ModuleLoader就會分派ready事件（或者說ModuleEvent.READY）。
這里有一個readyModule函數，它在<mx:Script>塊中：
程序代碼
- 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的實現：
程序代碼
- <mx:Modulexmlns:mxmx:Modulexmlns:mx="http://www.adobe.com/2006/mxml"implements="IExpenseReport"
- layout="vertical"
- percentWidth="100"percentHeight="100">
- <mx:Script><![CDATA[
- importmx.collections.ArrayCollection;
- [Bindable]publicvarexpenses:ArrayCollection;
- publicfunctionsetexpenseReport(ac:ArrayCollection):void
- {
- expenses=ac;
- }
- ]]></mx:Script>
- ...
- </mx:Module>
讓我們回到主程序，RadioButton的click事件會卸載任何當前已加載的模塊然后加載一個新的模塊。下面是ChartModule的RadioButton標簽：
程序代碼
- <mx:RadioButtonxmx:RadioButtonx="10"y="123"label="Chart"click="readyModule('ChartModule.swf')"/>
這個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模塊化總結
?將程序分割成多塊并不是每個人都會使用模塊（Module）。使用這種方法主程序會比平常小，而且多數用戶只使用整個程序的一部分。
?使用接口來使主程序或模塊（Module）來與加載的模塊通信。這使維護變得容易。
?使用-link-report命令參數編譯主程序來產生一個使用元件列表。
?在主程序中使用-load-externs和report.xml編譯模塊（Module），這樣可以使它們變得更小。
【編輯推薦】
