現在說說Module,這篇教程代碼不是最重要的,怎麼樣合理的使用Module以及注意的問題纔是關鍵,所以建議大家注意下面紅色語句。Module,可以將我們的項目按需劃分爲N個模塊,在編譯時將項目編譯爲主文件以及N個module的swf。Module基本上可以分爲兩種:
- 完整的Module,可以被外部app所使用 -- 會將所有涉及到的引用編譯到module中,主文件的體積得到縮減,但是Module本身的體積可能會很大,比如Module和主程序都應用了對象C,那對象C會被編譯到主程序以及Module中,這樣Module的體積就會很大。
- 關聯到主程序的Module -- 比如Module和主程序都應用了對象C,那對象C會只編譯在主程序中,從而減小Module的體積。我今天主要講這一種Module,也是我們最常用到的。
- 絕對不能在Module以外的地方直接引用Module中的對象。這樣Module會被編譯到引用它的模塊中去,如果從主程序中引用,那麼Module就實際上沒有效果了。
- 既然不能引用,那麼建議對Module對象的使用用接口實現。在Module中實現接口方法,在外部使用這個接口不會導致Module被誤編譯。
- Module可以引用主程序中的東西,但是不要引用其他Module中的東西。
Module可以做什麼呢?我主要將Module用於以下下兩種情況
- 縮減主程序的體積,點擊Module功能塊時加載Module.
- 再入主程序後在用戶感覺不到的情況下預加載剩下的Module.
現在講正題,在demo中我這樣表現Module的使用。(爲了體現Module的意義,主程序生成的大小是原始flex大小248K, module內嵌了兩張圖片是674K)
- 如何創建Module.
- 主程序中點擊按鈕加載Module PictureWindow.
- 加載完畢後將模塊添加到Box中,並通過接口調用PictureWindow中的方法setSelectIndex()設置顯示的圖片。
1. 如何創建Module.
可以通過New --> MXML Module -->Optmize for applicaiton --> OK 或者修改任意的已經創建好的Container組建(比如Canvas, panel)標籤爲Module,再或者繼承Module的As class。
之後確保“鼠標右鍵項目”--> Property --> Flex Module 中有這個Module,沒有的話點Add --> 選擇Module的mxml或as文件 -->Optmize for applicaiton -- > OK
2. 主程序中點擊按鈕加載模塊PictureWindow.
這裏我使用了ModuleManager來動態加載需要的Module。這比ModuleLoder要靈活的多。
private function loadModule():void{
m = ModuleManager.getModule("PictureWindow.swf"); //設置Module地址,地址是編譯後swf在bin中的位置
//設置事件監聽
m.addEventListener(ModuleEvent.READY,loadReady);
m.addEventListener(ModuleEvent.PROGRESS,loadReady);
m.addEventListener(ModuleEvent.ERROR,loadError);
m.load(); //加載Module
}
3. 加載完畢後將模塊添加到Box中,並通過接口調用PictureWindow中的方法setSelectIndex()設置顯示的圖片。
PictureWindow實現了PictureWindowInterface接口,其中暴露了setSelectIndex方法。再次強調不要直接使用Module對象,如果我們不注意寫成
var window:PictureWindow = e.module.factory.create() as PictureWindow,那整個Module就前功盡棄了
//Module加載完成
private function loadReady(e:ModuleEvent):void{
//將Module對象轉換爲PictureWindowInterface
var window:PictureWindowInterface = e.module.factory.create() as PictureWindowInterface
this.box.addChild(window as DisplayObject);
window.setSelectIndex(1); //通過Interface調用Module中的方法
}
好了,Module的使用就寫這麼多,看到這裏你應該也可以創建自己的Module了,對於ModuleManager和IModuleInfo 中詳細的內容,大家可以查閱Flex幫助。