簡單的說,Modular(模塊)和Shell(殼)就象DLL(動態(tài)鏈接庫)和EXE(可執(zhí)行程序)之間的關系一樣.例如我們在寫WINDOWS的應用程序的時候可以調用大量的MICROSOFT提供的DLL里的方法(我們稱之為API).同樣的,我們也可以自己把功能相同或者同類的方法抽象成為動態(tài)鏈接庫以方便我們的后續(xù)開發(fā),升級,團隊開發(fā)等等. 因此顯然,Modular的推出更有利于我們開發(fā)程序的模塊化.可能有人會說,這樣的功能我們同樣可以采用編譯多個可執(zhí)行SWF,然后用Loader載入不就行了?的確我不反對這樣的做法,事實證明,這也可以被正確實施于未更新的版本的.不一樣的是.
1.例如我們在模塊中包含Application的標簽,大家可以去看一下它的依賴關系就知道為什么只寫一個Helloworld就會生成>100K的原因了.而事實,這些東西我們在主程序中其實是包含了這些類的.類的重復被編譯導致文件變得更大.
2.Application標簽是可以被運行的,簡單的說,Application編譯的SWF可以直接運行,這樣我們的編程似乎就成了EXE和EXE的嵌套,似乎有點奇怪? 而Modular本身是不可執(zhí)行的,就象DLL一樣,里面可以包含很多方法也可以包含許多窗體,但事實自身是不可被運行的.而這些好處在Modular里可以輕松的實現(xiàn).
好的,現(xiàn)在我們來直接一點吧,看一下例子.
代碼下載: http://res.ezse.com/Howto/ModularDemo.rar
我們在FLEX BUILDER里建立三個項目,一個專門放MODULARS,一個為SHELL,最后一個是Interface.當然,視需要我們也可以建立多個項目.
當然,Shell(ModularMain)就是我們的主程序,相當于我們的EXE文件;
Modulars(Modulars)就是我們的DLL文件的聚集地J 當然合適的建立模塊,可以使得我們的程序更具擴展性和部署.
Interface(UserModularsInterface)這不是必須的,但我建議在團隊合作和大型程序開發(fā)的時候采用接口.接口的具體功能我就不在這里說了,可以找本OOD書看一下.簡單的說就是模塊之間混合編程所統(tǒng)一的必須的方法或屬性.接口沒有具體的實現(xiàn)方法,只是聲明了方法或屬性.
在這個例子中,我們建立了三個Modular,一個是在Shell項目中的InnerModular.mxml . 另一個是在Modulars中的OuterModular.mxml . 這個Modular和InnerModular相似. 最后一個是在Modulars中的OuterModularWithInterface.mxml . 這個Modular和前兩個區(qū)別不大,僅僅是使用了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的操作.注意的就是要執(zhí)行Modular中的方法或者更改屬性必須等ModularLoader觸發(fā)了ModuleEvent.READY 后才能執(zhí)行.
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中實現(xiàn)具體的接口中定義的方法或屬性.
IOuterModular.as
package
{
import flash.events.IEventDispatcher;
public interface IOuterModular extends IEventDispatcher
{
function SetText(val:String):void;
}
}
在接口中,我們定義了SetText這個方法.于是我們在Modular中先實現(xiàn)這方法:
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的實現(xiàn). 藍色部分則是具體實現(xiàn)的方法.
在ModularMain.mxml的橙色部分則是它的使用方法.
和不用接口不一樣的地方是: var iOuter:IOuterModular = mdOuterWithInterface.child as IOuterModular;新建一個實體,此實體正是ModularLoader的child.這里可能要注意一下,這個child可能是Flex的Bug,這個child是一個DisplayObject,例如我們這樣寫mdOuterModular.child.SomeFunction().編譯無法通過,提示是DisplayObject沒有這個方法(廢話).但是在調試模式下可以看到,這個child并非一個DisplayObject. 因此很郁悶,必須把這個child 設置成Object才能執(zhí)行里面的方法.
用接口還有一個好處,那就是可以直接看到Modular中的方法和屬性.而在前兩個例子中是沒有這種功能的.
另一個要注意的地方是,如果我們的Modular的Width,Height設置成的是100%, 而在ModularLoader中設置了Width和Height為絕對值的時候,會發(fā)現(xiàn),事實上,Modular并沒有填充這個固定區(qū)域! 做實驗的話可以在Modular中設置一個Canvas.引用后會發(fā)現(xiàn)大小是0x0.所以我們可能在寫這種高寬不定的時候,可能要建立一個方法,在Modular Ready后執(zhí)行方法來重設置它的大小.
現(xiàn)在我們可以看到程序可以正常的被執(zhí)行了,但是Modular生成出來的swf個個都是100多K! 當然,因為我們還沒有對Modulars Project進行裁剪尺寸. 這個裁減過程的原理就是我們的主程序中已經(jīng)編譯了的類,在Modular中就不再編譯了.而如何設置呢?在Shell的Project中的編譯器的附加參數(shù)里設置為-locale en_US -link-report=d:/testreport.xml 這樣在編譯的時候會生成一個關于Shell里所引用過的類庫列表在d:/testreport.xml的文件中. 在Modulars中的編譯器的附加參數(shù)里設置為-locale en_US -load-externs=d:/testreport.xml 這樣,在編譯Modulars的時候,載入Shell已經(jīng)編譯過的類庫.在編譯的時候就跳過這些類庫.再編譯一看,大小豁然小了100K,變成了10多k.
在Dreamer的Blog上也有一篇翻譯的文章大家也可以去看一下: http://www.zhuoqun.net/article.asp?id=382