Flex 学习笔记 Application与Module通信

Flex的Modules技术是可以被flex程序使用的一个swf文件，它不能脱离程序独立运行，但是多个程序之间可以共享它。flex的Modules技术将应用程序分割成小块、模块，主程序动态的加载所需要的模块。主程序在启动时并不全部加载所有的模块。当用户和模块没有交互的时候它不需要加载模块，同时它在模块不需要的时候可以卸载模块并释放内存和资源。

flex的Modules技术主要有如下的优点：

让swf文件初始下载尺寸更小

让加载时间更短

对应用程序更好的封装性。

界面呈现

Application开发

添加ModuleLoader控件，并传入的计算参数值

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"  minHeight="600" >
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:layout >
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            
            [Bindable]
            public var result:String=new String();
            
            private var moduleInstance:Object;//用于保存加载后的实例引用 
            
            protected function btnAdd_clickHandler(event:MouseEvent):void
            {
                //重新加载
                mdlCalculate.unloadModule();
                mdlCalculate.loadModule();
            }
            
            private function ModuleReady():void{
                moduleInstance = mdlCalculate.child;
                moduleInstance.Calculate(txtA.text,txtB.text);
            }

        ]]>
    </fx:Script>
    <mx:Form>
        <mx:FormItem label="A :">
            <s:TextInput id="txtA"/>
        </mx:FormItem>
        <mx:FormItem label="B :">
            <s:TextInput id="txtB"/>
        </mx:FormItem>
        <mx:FormItem>
            <s:Button label="添加" id="btnAdd" click="btnAdd_clickHandler(event)" />
        </mx:FormItem>
    </mx:Form>
    <mx:ModuleLoader id="mdlCalculate" url="Module\CalculateModule.swf" ready="ModuleReady()"  width="400" height="120"/>
    <mx:Form>
        <mx:FormItem label="计算结果：">
            <s:TextInput text="{result}"/>
        </mx:FormItem>
    </mx:Form>
</s:Application>

Module开发

创建文件夹Module，在此文件夹中新建MXML模块CalculateModule.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var addresult:String=new String();
            
            public function Calculate(A:String,B:String):void
            {
                try
                {
                    addresult=String(Number(A)+Number(B));
                    
                }
                catch(ex:Error)
                {
                }
            }
            protected function btnSub_clickHandler(event:MouseEvent):void
            {
                //相减，并提交结果
                this.parentDocument.result=String(Number(addresult)-Number(txtC.text));
            }
        ]]>
    </fx:Script>
    <mx:Form>
        <mx:FormItem label="计算结果：">
            <s:TextInput id="txtResult" text="{addresult}"/>
        </mx:FormItem>
        <mx:FormItem label="C">
            <s:TextInput id="txtC"/>
        </mx:FormItem>
        <mx:FormItem>
            <s:Button label="相减" id="btnSub" click="btnSub_clickHandler(event)" />
        </mx:FormItem>
    </mx:Form>
</mx:Module>