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

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

关于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>
目录
相关文章
|
6月前
|
JavaScript 开发工具 Windows
扩展的方法:es6 安装模块builder
扩展的方法:es6 安装模块builder
23 0
|
JSON 前端开发 JavaScript
Webpack5新特性:使用 Assets Module 处理图片和字体资源
本文介绍了 Webpack5 的 Assets Module ,是其内置的用来处理图片字体文件等资源模块的新功能。相比与过去通过 loader 的方式去处理,更加方便和简洁。
1107 0
|
1天前
|
存储 API
使用Webpack的module.hot API来定义模块的热替换
使用Webpack的`module.hot` API实现模块热替换,简单示例展示如何在`myModule`变化时执行回调。`module.hot.accept`接收模块路径和回调函数,当模块或其依赖变更时触发回调,用于执行更新逻辑。可通过`module.hot.data`保存和恢复状态以实现热替换时保持应用程序的状态。
|
6月前
|
内存技术
Flash builder 插件汇总
Flash builder 插件汇总
27 0
|
前端开发 JavaScript 开发者
为普通样式表通过 modules 参数启用模块化|学习笔记
快速学习为普通样式表通过 modules 参数启用模块化
54 0
为普通样式表通过 modules 参数启用模块化|学习笔记
|
前端开发 JavaScript
为普通样式表通过modules参数启用模块化
一、为普通样式表通过modules参数启用模块化 二、解决css样式表作用域冲突问题的方法 三、总结
为普通样式表通过modules参数启用模块化
Libra教程之:运行自定义move modules
Libra教程之:运行自定义move modules
|
XML Android开发 数据格式
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(一)
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(一)
319 0
|
Java
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(二)
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(二)
95 0
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(二)
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(三)
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(三)
206 0
【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )(三)