Flex的Module通信，事件和接口方式

最新推荐文章于 2017-03-14 18:47:37 发布

转载最新推荐文章于 2017-03-14 18:47:37 发布 · 1.8k 阅读

文章标签：

#flex #Flex #FLEX

Flex 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了Adobe Flex框架中模块组件的使用方法及如何通过接口通信实现不同组件之间的交互，具体包括创建、加载、卸载模块的过程，以及如何在模块间发送和接收消息。

Module组件

<?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" 
		   creationComplete="module1_creationCompleteHandler(event)"
		   xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="400" height="300">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.DynamicEvent;
			
			[Bindable]private var command:String="";
			protected function module1_creationCompleteHandler(event:FlexEvent):void
			{
				//从Application订阅
				var sharedEventDispatcher:IEventDispatcher=systemManager.loaderInfo.sharedEvents;
				
				sharedEventDispatcher.addEventListener("init",onInit,false,0,true);
				//通知Application：Module创建完成
				sharedEventDispatcher.dispatchEvent(new Event(Event.COMPLETE));
			}
			
			private function onInit(event:DynamicEvent):void
			{
				command=event.data as String;				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Panel id="panel" title="Module With Events. {command}" width="400"  height="200"/>
</mx:Module>

主文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.DynamicEvent;
			import mx.controls.Alert;
			import mx.events.ModuleEvent;
			import mx.modules.Module;

			private const MODULE_URL:String="dcec/ModuleWithEvents.swf";

			[Bindable]
			private var moduleLoaded:Boolean;

			private function loadModule():void
			{
				//从Module订阅通知
				var sharedEventDispatcher:IEventDispatcher=moduleLoader.loaderInfo.sharedEvents;
				sharedEventDispatcher.addEventListener(Event.COMPLETE, onModuleCreated);
				moduleLoader.loadModule(MODULE_URL);
				moduleLoaded=true;
			}
			private function onModuleCreated(event:Event):void
			{
				trace("Module CreateComplete happened");

				//发送命令到Module
				var sharedEventDispatcher:IEventDispatcher=moduleLoader.loaderInfo.sharedEvents;
				var dynamicEvent:DynamicEvent=new DynamicEvent("init");

				dynamicEvent.data=" Test Title!";
				sharedEventDispatcher.dispatchEvent(dynamicEvent);
			}

			private function unloadModule():void
			{
				moduleLoader.unloadModule();
				moduleLoaded=false;
			}
		]]>
	</mx:Script>
	<mx:HBox>
		<mx:Button label="Load Module"   click="loadModule()"/>
		<mx:Button label="Unload Module"  click="unloadModule()"  enabled="{moduleLoaded}"/>
	</mx:HBox>
	<mx:ModuleLoader id="moduleLoader"	 y="30"/>
</mx:Application>

另外，通过接口通信，见下面

定义接口

package dcec
{
	public interface ICommunication
	{
		function getMessage():String;
		function setMessage(value:String):void;
	}
}

定义模块

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
		   implements="dcec.ICommunication">
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var _value:String="";
			public function setMessage(value:String):void
			{
				_value=value;
			}

			public function getMessage():String
			{
				return _value;
			}
		]]>
	</mx:Script>
	<mx:Panel id="panel"
			  title="Message :{_value}"
			  width="400"
			  height="200"/>
</mx:Module>

主文件

<?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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import dcec.ICommunication;
			
			import mx.containers.Panel;
			import mx.modules.Module;

			private const MODULE_URL:String="dcec/Module1.swf";
			private function onModifyMessage():void
			{
				var communication:ICommunication=moduleLoader.child as ICommunication;
				communication.setMessage("loaded by application");

				var module:Module=moduleLoader.child as Module;
				var panel:Panel=module.getChildByName("panel") as Panel;
				trace(panel.title);
			}
		]]>
	</fx:Script>

	<mx:HBox>
		<mx:Button id="btnLoad" label="Load Module" click="moduleLoader.loadModule(MODULE_URL)"/>
		<mx:Button id="btnModify" label="Modify Module" click="onModifyMessage()"/>
		<mx:Button label="Unload Module" click="moduleLoader.unloadModule()"/>
	</mx:HBox>
	<mx:ModuleLoader id="moduleLoader" y="30"/>
</s:Application>