Mata框架学习1

http://gzd3618.iteye.com/blog/457936

Mate是以标签为基础，事件驱动的框架。
官网下载Mate：http://mate.asfusion.com/page/downloads。
废话少说开始吧!
1、添加mate.swc到项目中的flex_lib下。
2、在flex_src下创建文件夹存放不同功能的文件
   首先创建mymate文件夹，再在该文件夹下创建view、event、eventmap...文件夹。这是个简单的例子，就先只创建这三个吧。
3、在event文件夹下编写，MyEvent.as.

 package mymate.event

import flash.events.Event;

   public class MyEvent extends Event
   {             //事件类型
        public static const CLICK_ME = "click_me";
        //可以是任意类型包括对象。
        public var name:String;
        public function MyEvent(type:String,bubbles:Boolean=true,cancelable:Boolean=false):void
        {
            super(type,bubbles,cancelable);
        }
   }

  package mymate.event
{
	import flash.events.Event;
	
    public class MyEvent extends Event
    {             //事件类型
    		public static const CLICK_ME = "click_me";
    		//可以是任意类型包括对象。
    		public var name:String;
   		public function MyEvent(type:String,bubbles:Boolean=true,cancelable:Boolean=false):void
    		{
    			super(type,bubbles,cancelable);
    		}
    }
}

    其中值得注意的是：bubbles是Boolean类型，该属性决定了该事件对象是否会向上传递。关于flex事件可以参考http://hi.baidu.com/mallor/blog/item/81951712cdb78f58f919b8fc.html。
4、创建UI并分发事件。
在view文件夹下创建B.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Script>
        <![CDATA[
            import mymate.event.MyEvent;
            import mx.controls.Alert;
            private function send(event:MouseEvent):void
            {
                var e:MyEvent = new MyEvent(MyEvent.CLICK_ME);    //注册事件
                e.name = "谷正东";
                            //通过事件传递的参数。
                this.dispatchEvent(e);  //分发时间
            }
        ]]>
    </mx:Script>
    <mx:HBox>
    <mx:Button label="点我" click="send(event)"/>
    </mx:HBox>
</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Script>
    	<![CDATA[
    		import mymate.event.MyEvent;
    		import mx.controls.Alert;
    		private function send(event:MouseEvent):void
    		{
    			var e:MyEvent = new MyEvent(MyEvent.CLICK_ME);    //注册事件
    			e.name = "谷正东"; 
                            //通过事件传递的参数。
    			this.dispatchEvent(e);  //分发时间
    		}
    	]]>
    </mx:Script>
    <mx:HBox>
	<mx:Button label="点我" click="send(event)"/>
    </mx:HBox>
</mx:Canvas>

5、编写Event Map。
在eventmap文件夹下创建MyEventMap.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 mymate.event.MyEvent;
            import mymate.view.A;
            import mymate.business.TestMObj;
        ]]>
    </mx:Script>
    <EventHandlers type="{MyEvent.CLICK_ME}">
        <MethodInvoker generator="{A}" method="say" arguments="{event}"/>
    </EventHandlers>
</EventMap>

<?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 mymate.event.MyEvent;
    		import mymate.view.A;
    		import mymate.business.TestMObj;
    	]]>
    </mx:Script>
	<EventHandlers type="{MyEvent.CLICK_ME}">
		<MethodInvoker generator="{A}" method="say" arguments="{event}"/>
	</EventHandlers>
</EventMap>

a、没有时使用命名空间xmlns="http://mate.asfusion.com/"。
b、EventHandlers 监听 MyEvent.CLICK_ME 类型的事件。这里需要导包(import mymate.event.MyEvent;)。
c、MethodInvoker 创建generator指定属性的对象。调用指定的方法。相对于：
  

var a:A = new A();
   a.say(event);

var a:A = new A(); 
   a.say(event);

6、创建A.mxml
A中包含B，在B中触发MyEvent.CLICK_ME 类型事件，经过map的映射，执行A中的say方法

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:view="mymate.view.*"
    width="50%" height="50%" backgroundColor="#11aadd">

    <mx:Script>
        <![CDATA[
            import mymate.event.MyEvent;
            import mx.controls.Alert;


            public function say(e:MyEvent):void
            {
                Alert.show(e.name+"");
            }
        ]]>
    </mx:Script>
    <view:B/>

</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:view="mymate.view.*"
	width="50%" height="50%" backgroundColor="#11aadd">
	
	<mx:Script>
		<![CDATA[
			import mymate.event.MyEvent;
			import mx.controls.Alert;
			
			
			public function say(e:MyEvent):void
			{
				Alert.show(e.name+"");	
			}
		]]>
	</mx:Script>
	<view:B/>

</mx:Canvas>

7、编写主面板

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="horizontal"
    xmlns:view="mymate.view.*"
    xmlns:map="mymate.eventmap.*"
    >
    <map:MyEventMap/>
    <view:A width="80%" height="80%"/>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="horizontal"
	xmlns:view="mymate.view.*"
	xmlns:map="mymate.eventmap.*"
	>
	<map:MyEventMap/>
	<view:A width="80%" height="80%"/>
</mx:Application>

这里<map:MyEventMap/>是必须的。