0
点赞
收藏
分享

微信扫一扫

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


举报

相关推荐

0 条评论