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

最新推荐文章于 2020-09-10 08:19:36 发布

gzd58_

最新推荐文章于 2020-09-10 08:19:36 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex 文章标签：框架 Flex XML Flash UI

本文链接：https://blog.youkuaiyun.com/gzd58_/article/details/83454317

Flex 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Mate框架构建Flex应用程序。从下载安装到事件驱动的基本流程，包括创建自定义事件、事件映射及组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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