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

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

1. 新建Flex项目，在src中建立以下四个包：business、comp、event、map。
2. 在 Mate官网 上下载mate的swc包，并添加到Flex工程的库中。
3. 在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;
   		}
   
   	}
   }

    
4. 在comp中建立两个组件comp1、comp2。其中comp1中有一个输入框和一个提交按钮，comp2中有一个文本显示框，用于显示comp1中发出的信息。
5. 在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;
   			}
   		}
   	}
   }

    
6. 在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>

7. 在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>
   

    
8. 在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>
   

    
9. 在应用程序文件中加入组件布局以及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>
   

    
10. 运行应用程序，试试看~