FLEX实践：主应用程序、MODULE、COMPONENT组合

xiaoer_1982

本次实践主要是记录下如何在FLEX主应用程序中调用一个MODULE，而在MODULE中调用COMPONENT。
在开始之前先来简单谈谈MODULE这个概念
--========================================================================
以下内容来自网上


模块(Module)开发的优点自不待说。FlexProject中建立多个Application，并不能减少主文件swf的体积，可能还会增加。Module是编译进另一个swf实体，自然减少了主swf的体积。BTW，在创建Module时，注意选择关联的主swf，这可以使Module减肥不少，原理不再絮叨。


--=========================================================================
下面开始完成这次实践吧
1）创建myComponent/LoginComponent.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="344" height="208" backgroundColor="#F3E8BA">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function getUserName():void{
  Alert.show(username.text);
}
]]>
</mx:Script>
<mx:TextInput x="92" y="45" id="username"/>
<mx:Button x="126" y="105" label="Show Name" click="getUserName()"/>

</mx:Canvas>
2）创建ModuleTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="530" height="394" backgroundColor="#F5BFBF" xmlns:mp="myComponent.*">
<mp:LoginComponent x="93" y="67"/>
</mx:Module>
3）编译ModuleTest.mxml
在命令行CMD进入后输入 mxmlc ModuleTest.mxml (这里要写上ModuleTest.mxml的绝对路径 )
4）创建 Main.mxml 主应用程序


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="CssTest.css" />
<mx:Script>
<![CDATA[

//利用ModuleLoader加载模块
public function addMod():void{
mod1.url="ModuleTest.swf";//url指向modOne.mxml
mod1.loadModule();//发出指令调用模块
}
]]>
</mx:Script>

<mx:panel>
<mx:ModuleLoader x="409" y="76" url="ModuleTest.swf"/>
<mx:ModuleLoader x="409" y="110" id="mod1"/>
<mx:Button x="918" y="499" label="Add Module" click="addMod()"/>
</mx:panel>
</mx:Application>
注：本例中尝试了两种方法载入module
<mx:ModuleLoader x="409" y="76" url="ModuleTest.swf"/> 是直接载入MODULE


<mx:ModuleLoader x="409" y="110" id="mod1"/>
<mx:Button x="918" y="499" label="Add Module" click="addMod()"/> 则是通过接口方式来载入MODULE