Mate初探 – Part1

最近參與的專案，將導入Mate Framework，在此將Mate的重點及學習資源稍作整理。

Mate為何(What is Mate)？

• Mate是標籤式與事件驅動的Flex框架(Flex framework)。
• Flex應用程式主要是透過事件(events)進行元件或物件間的溝通，而Mate將使得處理這些事件變得簡單，不論是從伺服端取得資料或事件被觸發。
• Mate也提供DI( dependency injection)機制，讓應用程式達到鬆耦合的目標，而Mate同樣是具有MVC概念的框架。

Mate專案必須要有的項目：

• 一個或以上的事件(自訂或內建)。
• 一個或以上的Event Map。

建置Mate專案的一般步驟：

1. 將Mate.swc加入至專案。
2. 建立一個繼承至EventMap的類別。
3. 將該event map加入至主應用程式內。
4. 建立一個自訂事件。
5. 於某處，廣播該事件(dispatch the event)。
6. 於event map新增 EventHandlers用以監聽與處理廣播的事件。
7. 執行在EventHandlers區塊內的相關程序。
8. 依需要，重複4-7的步驟。

以示範例作Mate的基礎介紹：

• 使用者透過介面的操作，可進行幣值的轉換，幣值轉換為採用CurrencyConvertor Web Service服務。
• 傳統上的寫法，為將介面、處理程序、資料儲存都寫在主應用程式內(main application)，該程式撰寫手法，雖直觀與簡便，但介面與處理程序的緊密結合，將不易於應用程式的維護與後續擴充，也無法透過分工方式進行多人開發。
• 導入Mate，以MVC架構開發應用程式，將能改善元件或物件間的高度耦合，以解決上述問題。

傳統寫法

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:WebService id="currencyService" wsdl="http://www.webservicex.net/CurrencyConvertor.asmx?WSDL"
                      result="resultHandler(event)" fault="faultHandler(event)"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            
            [Bindable]
            private var currency:Number;
            [Bindable]
            private var currencyList:Array=["EUR","JPY","KRW","TWD","USD"];
            
            private function clickHandler():void{
                currencyService.ConversionRate(fromCurrency.selectedItem,toCurrency.selectedItem);
            }
            
            private function resultHandler(event:ResultEvent):void{
                this.currency=Number(event.result);
                this.currencyStr.text=this.fromCurrency.selectedItem+" convert to "+this.toCurrency.selectedItem + " : " ;
                this.convertCurrency.text=this.currency.toString();
            }
            
            private function faultHandler(event:FaultEvent):void{
                Alert.show(event.fault.message,event.fault.faultCode);
            }            
        ]]>
    </fx:Script>

    <mx:Form>
        <s:Group>
            <s:layout>
                <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
            </s:layout>
            <mx:FormHeading label="幣值轉換"/>
            <mx:Spacer height="5"/>
            <mx:FormItem label="參考國家">
                <mx:ComboBox id="fromCurrency" dataProvider="{currencyList}"/>
            </mx:FormItem>
            <mx:Spacer height="3"/>
            <s:Label text="轉換為"/>
            <mx:Spacer height="3"/>
            <mx:FormItem label="目標國家">
                <mx:ComboBox id="toCurrency" dataProvider="{currencyList}"/>
            </mx:FormItem>
            <mx:Spacer height="3"/>
            <s:Button width="60%" label="轉換" click="clickHandler()"/>
            <s:Group>
                <s:layout>
                    <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
                </s:layout>
                <s:Label id="currencyStr"/>
                <s:Label id="convertCurrency"/>
            </s:Group>            
        </s:Group>        
    </mx:Form>    
</s:Application>

以Mate改寫的作法，將於下篇文章『Mate初探 – Part2』作介紹。