Mate + BlazeDs ...

对不起. 我也开始务实了.


对Mate还没有了解的童鞋可以先去这里了解下..[url=http://mate.asfusion.com/]=>Mate<=[/url]


对blazeDs还没有了解的童鞋可以先去这里了解下..[url=http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/]=>blazeDs<=[/url]


之前我总结了一下Mate + blazeDs我们走完整个框架流程应该有的步骤:


views=>eventMap=>eventHandler=>remoteInvoker=>services=>remoting-config.xml=>class


我们在blazeDs端要做的事情只有从remoting-config.xml开始.. class就是我们要调用的 ..


之前的那么多步骤都是在Mate中完成.


话说当我自己画完这个流程的时候我也在想. 这样是不是值得.. 或许我沾染上了Java的恶习..


为了让大家更加清晰地了解整个调用过程. 我分别使用的Mate 跟 blazeDs 的Helloworld 然后将他们组合..


我们先从blazeDs说起.

package com.taobao.designcenter;

/**
 *
 * @author Saito
 */
public class HelloWorld {

    public HelloWorld() {
    }

    public String getHelloWorld() {
        return "Hello World!";
    }
}

写完了这个class . 将编译过后的 .class文件扔到类似如下的目录下 ..
D:\Apache Software Foundation\Tomcat 6.0\webapps\blazeds\WEB-INF\classes 注意你的包名 .. 是什么包从包开始copy到目录下就ok .

写完了我们只要在下面地址寻找remoting-config.xml文件.在Service里面增加如下一段
D:\Apache Software Foundation\Tomcat 6.0\webapps\blazeds\WEB-INF\flex

<destination id="helloWorld">
		<properties>
			<source>com.taobao.designcenter.HelloWorld</source>
		</properties>
	</destination>

然后启动Tomcat就ok了..

现在编写客户端Mate部分.. Mate一般来说划分包的结构为. views maps events由于我们要调用blazeDs的东西.所以增加一个services.

顾名思义 views是view . maps是一个events映射. events就是event .services描述service . 囧rz ...

既然是跟blazeDs交互. 那就先从services开始吧.新建一个Service.mxml.

<?xml version="1.0" encoding="utf-8"?>
<mx:Object	xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:RemoteObject id="helloService" destination="helloWorld"
					 source="com.taobao.designcenter.HelloWorld"/>

</mx:Object>

destination是供eventHandler调用的. source就是你的blazeDs下的class的位置.

接下来在maps里面新建一个 EventMaps.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 com.taobao.designcenter.events.MessageEvent;
		]]>
	</mx:Script>
	<EventHandlers type="{MessageEvent.GET}">
		<RemoteObjectInvoker 
			source="com.taobao.designcenter.HelloWorld" destination="helloWorld" 
			method="getHelloWorld">
			<resultHandlers>
				<CallBack method="handleResult" arguments="{resultObject}"/>
			</resultHandlers>
		</RemoteObjectInvoker>
	</EventHandlers>

</EventMap>

EventHandlers type就是事件类型. 什么事件类型由我这个Handler处理.下面我们来给出这个事件的代码.
RemoteObjectInvoker source destination跟上面对应. method就是我们的method .如果我们有参数 可以加 arguments这个属性.
resultHandlers CallBack就是回来call谁? . method是我们自己的处理方法..以及参数.看清楚. 参数是我们的blazeDs端得返回值..这个很强大..

事件的定义在这边.. events 里面新建MessageEvent.as

package com.taobao.designcenter.events
{
	import flash.events.Event;

	public class MessageEvent extends Event
	{
		public static const GET:String = "getMessage";
		public var name:String;

		public function MessageEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
	}
}

这边bubbles就是 是不是可以上溢.. 另一个是否可取消. 这边的事件定义就在上面调用.

我们现在还缺少handleResult 以及views ..

我们来创建一个views . 在views下面创建一个 MessagePanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
		xmlns:mate="http://mate.asfusion.com/"
		title="Message directly from event response" 
		resizeEffect="Resize"  
		horizontalScrollPolicy="off" 
		verticalScrollPolicy="off">

	<mx:Script>
		<![CDATA[
			import com.taobao.designcenter.events.MessageEvent;

			public function handleResult(text:String):void
			{
				currentState='response'; 
				display.text = text;
			}

			private function submitForm():void 
			{
				var event:MessageEvent = new MessageEvent(MessageEvent.GET, true);
				event.name = inputName.text;
				dispatchEvent(event);
			}
		]]>
	</mx:Script>

	<mx:HBox>
		<mx:Label text="Write your name:"/>

		<mx:TextInput id="inputName" enter="submitForm()"/>

		<mx:Button label="GO" click="submitForm()"/>
	</mx:HBox>

		<mx:states>
			<mx:State name="response">
				<mx:AddChild position="lastChild">
					<!-- We get the message text directly from the server response by 
					using the response attribute in the Dispatcher's ResponseListener -->			
					<mx:Text id="display" styleName="message" />
				</mx:AddChild>
			</mx:State>
		</mx:states>
</mx:Panel>

关于界面的部分就不浪费时间了. 我们主要看event处理. 我们在Button处产生了一个MessageEvent ... 然后dispatchEvent了. 之后就会被我们的Handler捕获.. 然后调用我们之前的resultHandlers .. 这个handler就写在我们上面这里handleResult 然后我们的逻辑就全部完成了..

总结一下. button产生了一个MessageEvent..然后这个Event被捕获. 捕获完成后被处理. 处理过程中拿到了blazeDs中的提供服务的值.. 然后返回了结果. 我们把这个结果传递给了handler.. handler为我们在界面上做出响应.. so ... . ..

ok .. 最后再Application里面显示我们的结果..

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				xmlns:view="com.taobao.designcenter.views.*" 
				xmlns:maps="com.taobao.designcenter.maps.*"
				layout="vertical" >

	<maps:EventMaps />

	<mx:HBox>
		<view:MessagePanel />
	</mx:HBox>

</mx:Application>

多余话我就不说了. 你还是享受这繁复过程后的兴奋结果吧..

再来看下整个Mate + blazeDs的过程...


views=>eventMap=>eventHandler=>remoteInvoker=>services=>remoting-config.xml=>class

ok .. 在这里推荐几个教程. 我的东西也参考自下面的内容 .大家可以去围观一下..


[url=http://nwebb.co.uk/videotutorials/mate_helloworld/]Mate HelloWorld with amfphp[/url]
[url=http://www.riahome.cn/?p=69]用一个HelloWorld例子手把手教会你使用BlazeDS[/url]

god bless you ... :arrow: