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