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事件可以参考[url]http://hi.baidu.com/mallor/blog/item/81951712cdb78f58f919b8fc.html[/url]。
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/>是必须的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值