如果你沒有看過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之外進行。
總結
•將程序分割成多塊並不是每個人都會使用模塊(Module)。使用這種方法主程序會比平常小,而且多數用戶只使用整個程序的一部分。
•使用接口來使主程序或模塊(Module)來與加載的模塊通信。這使維護變得容易。
•使用-link-report命令參數編譯主程序來產生一個使用元件列表。
•在主程序中使用-load-externs和report.xml編譯模塊(Module),這樣可以使它們變得更小。