Adobe Flex迷你教程 -- 合理使用Module分割項目以及對Module的使用[關於接口]

現在說說Module,這篇教程代碼不是最重要的,怎麼樣合理的使用Module以及注意的問題纔是關鍵,所以建議大家注意下面紅色語句。Module,可以將我們的項目按需劃分爲N個模塊,在編譯時將項目編譯爲主文件以及N個module的swf。Module基本上可以分爲兩種:

  1. 完整的Module,可以被外部app所使用 -- 會將所有涉及到的引用編譯到module中,主文件的體積得到縮減,但是Module本身的體積可能會很大,比如Module和主程序都應用了對象C,那對象C會被編譯到主程序以及Module中,這樣Module的體積就會很大。

  2. 關聯到主程序的Module -- 比如Module和主程序都應用了對象C,那對象C會只編譯在主程序中,從而減小Module的體積。我今天主要講這一種Module,也是我們最常用到的。
瞭解了Module的種類,再簡單說說使用Module要注意的地方。

  1. 絕對不能在Module以外的地方直接引用Module中的對象。這樣Module會被編譯到引用它的模塊中去,如果從主程序中引用,那麼Module就實際上沒有效果了。

  2. 既然不能引用,那麼建議對Module對象的使用用接口實現。在Module中實現接口方法,在外部使用這個接口不會導致Module被誤編譯。

  3. Module可以引用主程序中的東西,但是不要引用其他Module中的東西。

Module可以做什麼呢?我主要將Module用於以下下兩種情況

  1. 縮減主程序的體積,點擊Module功能塊時加載Module.
  2. 再入主程序後在用戶感覺不到的情況下預加載剩下的Module.

現在講正題,在demo中我這樣表現Module的使用。(爲了體現Module的意義,主程序生成的大小是原始flex大小248K, module內嵌了兩張圖片是674K)

  1. 如何創建Module.
  2. 主程序中點擊按鈕加載Module PictureWindow.
  3. 加載完畢後將模塊添加到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幫助。

發佈了340 篇原創文章 · 獲贊 25 · 訪問量 98萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章