part1介紹過Mate架構跟流程，這次寫一個簡單範例來說明Mate的寫法
範例為使用DataGrid操作來自DataManager的資料。按此觀看範例
原始檔下載
Main.mxml
同上次的架構，程式的進入點是Main.mxml，裡面只要宣告EventMap、ModelMap跟要使用的UI
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:maps="idv.gd.hellomate.maps.*"
xmlns:view="idv.gd.hellomate.views.*"
width="600" height="350">
<mx:Style source="assets/style.css"/>
<maps:MainEventMap/>
<maps:ModelMap/>
<view:DataList/>
</mx:Application>
DataList.mxml
DataList.mxml 為列表的UI，負責顯示、新增及刪除，在Mate架構中，UI的Domain Logic直接寫在mxml，或許會有點亂，但這種寫法也方便Mate做Data Binding
<!-- 部分程式碼 -->
<!-- mate特有的Dispatcher，即使元件不在顯示列表或不可見，仍可送訊息給Mate -->
<mate:Dispatcher id="deleteAllDispatcher"
generator="{ListEvent}"
type="{ListEvent.REMOVE_ALL}">
<!-- 可直接接收來自EventMap的回應 -->
<mate:ResponseHandler type="deleteItemResponse" response="Alert.show('ok')"/>
</mate:Dispatcher>
<!-- 能監聽自己內部跟Mate事件 -->
<mate:Listener type="{NavigationEvent.ADD_STATE}" receive="stateChangeHandler(event)"/>
<mate:Listener type="{NavigationEvent.LIST_STATE}" receive="stateChangeHandler(event)"/>
<mx:DataGrid id="myDG"
x="10" y="10"
width="560" height="215"
dataProvider="{currentListAC}">
<mx:columns>
<mx:DataGridColumn headerText="標題" dataField="title"/>
<mx:DataGridColumn headerText="訊息" dataField="message"/>
</mx:columns>
</mx:DataGrid>
事件可由Mate的Dispatcher送出，也可使用原本的EventDispatcher，但事件的bubbles一定要為true，而<listener>的標籤可以聽到來自Mate的事件，但自己Bubbles上來的事件也會聽到，在設計時要注意
三種在Mate中傳事件的寫法：
一、使用<Dispatcher>：<mate:Dispatcher id="deleteAllDispatcher" generator="{ListEvent}" type="{ListEvent.REMOVE_ALL}">，用調用時呼叫 deleteAllDispatcher.generateEvent();
二、使用原生的EventDispatcher：this.dispatchEvent(new NavigationEvent(NavigationEvent.ADD_STATE));，由於事件bubble為true，EventMap可聽到事件
三、使用程式碼的Mate Dispatcher： var mateDispatcher:Dispatcher = new Dispatcher(); mateDispatcher.dispatchEvent(listEvent);
ListEvent.as
自定事件，寫法同一般Flash事件寫法，但為避免混淆，Mate建議在事件的常數後加上Class名，好讓事件不會重覆
public class ListEvent extends Event
{
//常數後加上Class名，避免名稱重覆
public static const DELETE:String = "deleteListEvent";
public static const REMOVE_ALL:String = "removeAllListEvent";
public static const ADD:String = "addListEvent";
public var item:ItemInfo;
//bubbles要為true，給EventMap聽
public function ListEvent(type:String, bubbles:Boolean = true, cancelables:Boolean = false, item:ItemInfo = null)
{
super(type, bubbles, cancelables);
this.item = item;
}
override public function clone():Event
{
return new ListEvent(type, bubbles, cancelable, item);
}
}
DataManager.mxml
為管理列表資料的Manager
public class DataManager
{
public var listArrayCollection:ArrayCollection;
public function DataManager()
{
listArrayCollection = new ArrayCollection();
listArrayCollection.addItem(new ItemInfo("first item", "hello mate"));
listArrayCollection.addItem(new ItemInfo("second item", "test"));
}
public function deleteItem(item:ItemInfo):void
{
if (listArrayCollection)
listArrayCollection.removeItemAt(listArrayCollection.getItemIndex(item));
}
public function deleteAllItem():void
{
if (listArrayCollection)
listArrayCollection.removeAll();
}
public function addItem(item:ItemInfo):void
{
if (listArrayCollection)
listArrayCollection.addItem(item);
}
}
DataManager封裝了資料操作，這裡只外露一個listArrayCollection給外部View使用，也可把ModelManager做為資料物件跟View挷定，但要記得要給class設[Bindable]，或自定Binding事件
MainEventMap.mxml
為Mate事件的中心，用以管理事件及專案的Business Logic
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import idv.gd.hellomate.events.*;
import idv.gd.hellomate.business.DataManager;
]]>
</mx:Script>
<!-- 監聽Mate事件，可呼叫Manager執行方法（Manager只會被生成一次）-->
<EventHandlers type="{ListEvent.DELETE}">
<MethodInvoker generator="{DataManager}" method="deleteItem" arguments="{event.item}"/>
</EventHandlers>
<EventHandlers type="{ListEvent.REMOVE_ALL}">
<MethodInvoker generator="{DataManager}" method="deleteAllItem"/>
<!-- 回應訊息給呼叫者 -->
<ResponseAnnouncer type="deleteItemResponse"/>
</EventHandlers>
<EventHandlers type="{ListEvent.ADD}">
<MethodInvoker generator="{DataManager}" method="addItem" arguments="{event.item}"/>
<!-- 發送Navigation事件 -->
<EventAnnouncer generator="{NavigationEvent}" type="{NavigationEvent.LIST_STATE}" />
</EventHandlers>
其中<EventHandlers>的標籤為註冊Event要觸發的事件，這裡能調用ModelManager的方法，並可直接回傳內容（<ResponseAnnouncer>）或是呼叫事件（<EventAnnouncer>）
ModelMap.mxml
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import idv.gd.hellomate.views.DataList;
import idv.gd.hellomate.business.DataManager;
]]>
</mx:Script>
<!-- 注入資料，DataList生成時自動注入 -->
<Injectors target="{DataList}" debug="true">
<PropertyInjector targetKey="currentListAC" source="{DataManager}" sourceKey="listArrayCollection"/>
</Injectors>
</EventMap>
ModelMap.mxml底層其實是EventMap，這裡分出來只是為了釐清架構。其中<Injectors>是很特殊的標籤，會在目標元件生成時自動把資料注入，且若是Bindable物件，之後就可靠物件自己更新，在寫法上很方便。
總結
這次只寫個簡單範例練習，由於Mate可用Data Binding，在寫法上會比PureMVC好寫很多，但實際上使用還是要看專案的複雜度，沒有人說那個MVC Framework是最好的，端看開發人員習慣那種架構。
這次的練習不夠完整，如果寫法或概念有錯還請指正，謝謝
發表文章
