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

本次实践主要是记录下如何在FLEX主应用程序中调用一个MODULE，而在MODULE中调用COMPONENT。

在开始之前先来简单谈谈MODULE这个概念

 

--========================================================================

    以下内容来自网上

模块(Module)开发的优点自不待说。Flex Project中建立多个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