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

时间：2011-04-10 来源：菩提树下的杨过

关于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>