使用Mate实现Flex组件间的交互

最新推荐文章于 2025-04-01 20:13:37 发布

最新推荐文章于 2025-04-01 20:13:37 发布 · 165 阅读

文章标签：

#Flex #Adobe #XML

Flex 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Mate框架实现Flex组件间数据通信的方法。通过创建自定义事件类、控制器类和事件映射文件，实现了从一个组件发送数据到另一个组件的功能。

最近的项目中使用Flex来实现前端的界面显示，那么不同Flex组件间的数据通信便是一个重要的问题。我使用了Mate实现不同组件之间的数据通信。具体方法如下：

新建Flex项目，在src中建立以下四个包：business、comp、event、map。
在 Mate官网上下载mate的swc包，并添加到Flex工程的库中。

在events包中新建一个自定义事件类MyEvent.as

package events{
	public class MyEvent
 extends Event 	{
	        public static const CLICK_ITEM:String = "clickItem";
		private var _item:String;
		public function MyEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		public function get item():String
		{
			return _item;
		}
		public function set item(value:String):void
		{
			_item = value;
		}

	}
}

在comp中建立两个组件comp1、comp2。其中comp1中有一个输入框和一个提交按钮，comp2中有一个文本显示框，用于显示comp1中发出的信息。

在business中建立MyController.as类，用于定义事件处理业务。

package business
{
	public class MyController
	{
		[Bindable]
		public var data : String;
		[Bindable]
		public var type : String;
		[Bindable]
		public var name : String;
		public function setData():void{
			if ( type == "clickItem" ) {
				data = "Hi,"+name;
			}
		}
	}
}

在map中建立EventMaps.mxml，用于定义事件的映射。

<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml" 
		  xmlns="http://mate.asfusion.com/">
	<mx:Script>
		<![CDATA[
			import events.MyEvent;
			import comp.*;
			import business.*;
		]]>
	</mx:Script>
	<EventHandlers type="{MyEvent.CLICK_ITEM}" >
		<MethodInvoker generator="{MyController}" method="setData">
			<Properties type="{MyEvent.CLICK_ITEM}" name="{event.item}" />	
		</MethodInvoker>
	</EventHandlers>
	<Injectors target="{comp2}">
		<PropertyInjector targetKey="data" source="{MyController}" sourceKey="dataStr" />
	</Injectors>
</EventMap>

在comp1中加入事件触发代码，comp1代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="300">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import event.MyEvent;
			private function clickHandler(event:Event):void{				
		         	var myEvent:MyEvent = new MyEvent(MyEvent.CLICK_ITEM,true);
				myEvent.item = txt.text;
				dispatchEvent(myEvent);
			}
		]]>
	</fx:Script>
	<s:Button x="99" y="171" label="按钮" id="btn" click="clickHandler(event)"/>
	<s:TextInput x="86" y="87" id="txt"/>
</s:Group>

在comp2中定义数据接收变量，comp2代码如下

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="300">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			[Bindable]
			public var data:String;
		]]>
	</fx:Script>
	<s:BorderContainer x="49" y="47" width="200" height="200" backgroundColor="#BEF2F8">
		<s:Label x="35" y="47" width="127" height="67" id="lbl" text="{data}"/>
		<s:Label x="34" y="20" text="接收到的内容："/>
	</s:BorderContainer>
</s:Group>

在应用程序文件中加入组件布局以及EventMap的声明

<?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" 
			   xmlns:comp="comp.*"
			   xmlns:map="map.*"
			   minWidth="955" minHeight="600">
	
	<fx:Declarations>
		<map:EventMaps />
	</fx:Declarations>
	
	<s:HGroup>
		<comp:comp1 id="comp1" />
		<comp:comp2 id="comp2" />
	</s:HGroup>
</s:Application>

运行应用程序，试试看~