簡單的說,Modular(模塊)和Shell(殼)就象DLL(動態鏈接庫)和EXE(可執行程序)之間的關系一樣.例如我們在寫WINDOWS的應用程序的時候可以調用大量的MICROSOFT提供的DLL里的方法(我們稱之為API).同樣的,我們也可以自己把功能相同或者同類的方法抽象成為動態鏈接庫以方便我們的后續開發,升級,團隊開發等等. 因此顯然,Modular的推出更有利于我們開發程序的模塊化.可能有人會說,這樣的功能我們同樣可以采用編譯多個可執行SWF,然后用Loader載入不就行了?的確我不反對這樣的做法,事實證明,這也可以被正確實施于未更新的版本的.不一樣的是.
1.例如我們在模塊中包含Application的標簽,大家可以去看一下它的依賴關系就知道為什么只寫一個Helloworld就會生成>100K的原因了.而事實,這些東西我們在主程序中其實是包含了這些類的.類的重復被編譯導致文件變得更大.
2.Application標簽是可以被運行的,簡單的說,Application編譯的SWF可以直接運行,這樣我們的編程似乎就成了EXE和EXE的嵌套,似乎有點奇怪? 而Modular本身是不可執行的,就象DLL一樣,里面可以包含很多方法也可以包含許多窗體,但事實自身是不可被運行的.而這些好處在Modular里可以輕松的實現.
好的,現在我們來直接一點吧,看一下例子.
代碼下載: http://res.ezse.com/Howto/ModularDemo.rar
我們在FLEX BUILDER里建立三個項目,一個專門放MODULARS,一個為SHELL,最后一個是Interface.當然,視需要我們也可以建立多個項目.
當然,Shell(ModularMain)就是我們的主程序,相當于我們的EXE文件;
Modulars(Modulars)就是我們的DLL文件的聚集地J 當然合適的建立模塊,可以使得我們的程序更具擴展性和部署.
Interface(UserModularsInterface)這不是必須的,但我建議在團隊合作和大型程序開發的時候采用接口.接口的具體功能我就不在這里說了,可以找本OOD書看一下.簡單的說就是模塊之間混合編程所統一的必須的方法或屬性.接口沒有具體的實現方法,只是聲明了方法或屬性.
在這個例子中,我們建立了三個Modular,一個是在Shell項目中的InnerModular.mxml . 另一個是在Modulars中的OuterModular.mxml . 這個Modular和InnerModular相似. 最后一個是在Modulars中的OuterModularWithInterface.mxml . 這個Modular和前兩個區別不大,僅僅是使用了Interface(推薦使用這種方式).
首先我們看一下Inner Modular. 為什么取名為Inner Modular是因為這個Modular是和Shell在同一個Project中.
InnerModular.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var textValue:String = "(default inner text value)";
]]>
</mx:Script>
<mx:Label text="{textValue}"/>
</mx:Module>
在源程序中,唯一要注意的就是我們新建一個Application的時候,紅色標記部分是引用的Application標簽.把它改為Module即可.
引用中,ModularMain.mxml中
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.modules.*;
import mx.events.ModuleEvent;
private var mdInnerModular:Object;
private function init():void
{
mdInner.addEventListener(ModuleEvent.READY,onInnerModularLoaded);
}
private function onInnerModularLoaded(evt:ModuleEvent):void
{
mdInnerModular = mdInner.child;
mdInnerModular.textValue = "Inner Modular";
}
private function CallIOuterModularFunction():void
{
var iOuter:IOuterModular = mdOuterWithInterface.child as IOuterModular;
iOuter.SetText("IOuter Called");
}
]]>
</mx:Script>
<mx:ModuleLoader id="mdInner" url="InnerModular.swf"/>
<mx:ModuleLoader id="mdOuter" url="assets/OuterModular.swf" y="20"/>
<mx:Button label="Set Outer Modular Value" click="(mdOuter.child as Object).textValue = 'Outer Modular'" y="40"/>
<mx:Button label="Call Outer Modular Function" click="(mdOuter.child as Object).testFunction()" y="70"/>
<mx:ModuleLoader id="mdOuterWithInterface" url="assets/OuterModularWithInterface.swf" y="90"/>
<mx:Button label="Call Outer Modular Function" click="CallIOuterModularFunction()" y="120"/>
</mx:Application>
Shell中的有紅色部分是對InnerModular的操作.注意的就是要執行Modular中的方法或者更改屬性必須等ModularLoader觸發了ModuleEvent.READY 后才能執行.
OuterModular.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var textValue:String = "(default outer text value)";
public function testFunction():void
{
this.textValue = "Outer Function Called";
}
]]>
</mx:Script>
<mx:Label text="{textValue}" />
</mx:Module>
內容和InnerModular一樣.不一樣的是放在了另一個Project中.
而我推薦的是使用Interface.下面我們就看一下使用了Interface的操作方法.
-
首先我們要定義Interface文件,為了方便,我們新建立一個Lib Project.這樣編譯后會生成一個swc的可被引用的代碼包.
-
在Shell和Modular的Project中添加引用.
-
在Modular中實現具體的接口中定義的方法或屬性.
IOuterModular.as
package
{
import flash.events.IEventDispatcher;
public interface IOuterModular extends IEventDispatcher
{
function SetText(val:String):void;
}
}
在接口中,我們定義了SetText這個方法.于是我們在Modular中先實現這方法:
OuterModularWithInterface.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" implements="IOuterModular">
<mx:Script>
<![CDATA[
[Bindable]
public var textValue:String = "(default outer(with interface) text value)";
public function SetText(val:String):void
{
this.textValue = val;
}
]]>
</mx:Script>
<mx:Label text="{textValue}" />
</mx:Module>
其中紅色部分標記了此Modular為接口IOuterModular的實現. 藍色部分則是具體實現的方法.
在ModularMain.mxml的橙色部分則是它的使用方法.
和不用接口不一樣的地方是: var iOuter:IOuterModular = mdOuterWithInterface.child as IOuterModular;新建一個實體,此實體正是ModularLoader的child.這里可能要注意一下,這個child可能是Flex的Bug,這個child是一個DisplayObject,例如我們這樣寫mdOuterModular.child.SomeFunction().編譯無法通過,提示是DisplayObject沒有這個方法(廢話).但是在調試模式下可以看到,這個child并非一個DisplayObject. 因此很郁悶,必須把這個child 設置成Object才能執行里面的方法.
用接口還有一個好處,那就是可以直接看到Modular中的方法和屬性.而在前兩個例子中是沒有這種功能的.
另一個要注意的地方是,如果我們的Modular的Width,Height設置成的是100%, 而在ModularLoader中設置了Width和Height為絕對值的時候,會發現,事實上,Modular并沒有填充這個固定區域! 做實驗的話可以在Modular中設置一個Canvas.引用后會發現大小是0x0.所以我們可能在寫這種高寬不定的時候,可能要建立一個方法,在Modular Ready后執行方法來重設置它的大小.
現在我們可以看到程序可以正常的被執行了,但是Modular生成出來的swf個個都是100多K! 當然,因為我們還沒有對Modulars Project進行裁剪尺寸. 這個裁減過程的原理就是我們的主程序中已經編譯了的類,在Modular中就不再編譯了.而如何設置呢?在Shell的Project中的編譯器的附加參數里設置為-locale en_US -link-report=d:/testreport.xml 這樣在編譯的時候會生成一個關于Shell里所引用過的類庫列表在d:/testreport.xml的文件中. 在Modulars中的編譯器的附加參數里設置為-locale en_US -load-externs=d:/testreport.xml 這樣,在編譯Modulars的時候,載入Shell已經編譯過的類庫.在編譯的時候就跳過這些類庫.再編譯一看,大小豁然小了100K,變成了10多k.
在Dreamer的Blog上也有一篇翻譯的文章大家也可以去看一下: http://www.zhuoqun.net/article.asp?id=382