flex4/flash builder中动态加载Module并与之交互的正确方式

关于flex中动态加载Module的文章,网上有很多,但多半是基于flex3的,如果在flash builder/flex4中按他们所提供的方法去做,最后将module加载到容器中时,会报:null object reference错误

经过多番摸索,发现只能在ready回调中,以Object这种基本类型使用,不能强制做任何类型转型,方能正常加载到容器,并与加载后的实例交互(虽然这样flash builder的IDE环境中,无法智能代码提示),原因不明!

开始吧,先创建一个mxml Module,命名为:MyModule.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="200" height="200">
     
    <fx:Script>
        <![CDATA[
            public function test():String
            {
                return txtModule.text;
            }
        ]]>
    </fx:Script>
    <s:TextArea right="0" left="0" top="0" bottom="0" contentBackgroundColor="#C8BBBB" text="this is a textarea in module" id="txtModule"/>
</mx:Module>
然后在一个mxml application中动态加载它

<?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="400" minHeight="300" applicationComplete="application1_applicationCompleteHandler(event)">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
     
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;
            import mx.events.FlexEvent;
            import mx.events.ModuleEvent;
            import mx.modules.IModuleInfo;
            import mx.modules.ModuleManager;
             
            private var module:IModuleInfo;
            private var first:Boolean=true;//是否首次加载的判断标志
            private var moduleInstance:Object;//用于保存加载后的实例引用
 
            protected function button1_clickHandler(event:MouseEvent):void
            {   
                //非首次加载(先卸载)
                if (!first)
                {
                    module.unload();
                    pnl.removeElement(moduleInstance as IVisualElement);
                }
                initModule();
                module.load();  
                btn1.enabled = false;
            }
             
            private function onModuleReady(e:ModuleEvent):void
            {               
                moduleInstance  = e.module.factory.create();//注:这里千万不能用as做任何的转型,否则就报null object reference错误,原因不明                
                this.pnl.addElement(moduleInstance as IVisualElement);
                //由于只能以Object方式操作,所以下面的代码,没办法智提示,只以盲打
                moduleInstance.txtModule.text = Math.random().toString();
                moduleInstance.x = moduleInstance.y = 10;
                trace(moduleInstance.test());
                first = false;
                btn1.enabled = true;
                 
            }
             
            private function initModule():void
            {
                module = ModuleManager.getModule("MyModule.swf");
                module.addEventListener(ModuleEvent.READY,onModuleReady);   
            }
 
            //应用加载完成时,就预先将Module初始化(甚至这时就可以load,只是不显示而已,以改善用户体验)
            protected function application1_applicationCompleteHandler(event:FlexEvent):void
            {
                initModule();
            }
 
        ]]>
    </fx:Script>  
     
    <s:Panel id="pnl" title="动态加载Module" left="10" top="10" bottom="50" right="10"></s:Panel>
     
    <s:Button click="button1_clickHandler(event)" label="load" horizontalCenter="0" bottom="10" id="btn1">
         
    </s:Button>
</s:Application>

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...