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

最新推荐文章于 2025-04-26 10:30:00 发布

原创最新推荐文章于 2025-04-26 10:30:00 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#module #flex #application #encoding #button #function

Flex 专栏收录该内容

188 篇文章

订阅专栏

本文介绍如何在Flex主应用程序中调用MODULE，并在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>