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/>是必须的。

你可能感兴趣的:(框架,xml,UI,Flex,Flash)