Flex mate框架学习笔记(一)——简单例子

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);
    		}
    }
}

    其中值得注意的是：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>

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>

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);

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>

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>

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

评论

2 楼 bigt 2010-09-03  

nhtnht 写道

你好，有一个问题问一下，按照你的方法，我在A.mxml里面通过Alert能把值得到。但是如果我在A.mxml中新建一个String变量message，和一个页面上的Lable的text属性绑定，然后在say方法中将e.name赋给这个message变量，想最终将结果显示在页面上，但一直报一个空指针异常，说message变量为null。
奇怪的是A.mxml已经初始化好了，为什么message变量还会是null呢？
希望楼主百忙之中能给我这个菜鸟解答下，谢谢了！

我也是刚刚在看Mate, 关于你的问题我的判断是你所言 message 为null的那个A的实例和你期望中的那个A的实例并不是同一个, 这点从debug时实例的内存地址可以看出来. message 为null的那个A的实例应该是Mate另外创建的而不是Player里显示的那个

1 楼 nhtnht 2010-08-02  

你好，有一个问题问一下，按照你的方法，我在A.mxml里面通过Alert能把值得到。但是如果我在A.mxml中新建一个String变量message，和一个页面上的Lable的text属性绑定，然后在say方法中将e.name赋给这个message变量，想最终将结果显示在页面上，但一直报一个空指针异常，说message变量为null。
奇怪的是A.mxml已经初始化好了，为什么message变量还会是null呢？
希望楼主百忙之中能给我这个菜鸟解答下，谢谢了！