Mate初探 – Part2

本文將導入Mate Framework改寫『Mate初探 - Part1』的示範例。

專案應用程式架構

• 應用程式架構分為business(models)、maps(controllers)、views三個層面，而events package用於存放自訂事件。

Event

• 使用者於下拉式選單選定欲轉換之幣別，並按下轉換按鈕後，應用程式將廣播自訂事件(dispatch event)；自訂事件內包含參考國家及目標國家幣別之屬性。
• CurrencyConvertorEvent.as

package com.asfusion.mate.currencyConvertor.events
{
    import flash.events.Event;
    
    public class CurrencyConvertorEvent extends Event
    {
        public static const Convert: String = "CurrencyConvertEvent";
        
        public var fromCurrency : String;
        public var toCurrency : String;
        
        public function CurrencyConvertorEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }        
    }
}

View

• 應用程式的介面設計，與『Mate初探 - Part1』相同。
• CurrencyConvertorPanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    
    <fx:Script>
        <![CDATA[
            
            import com.asfusion.mate.currencyConvertor.events.CurrencyConvertorEvent;
            
            [Bindable]
            public var currency:String;
            [Bindable]
            private var currencyList:Array=["EUR","JPY","KRW","TWD","USD"];
            
            // perform the action - dispatch an event
            private function currencyConvert() : void {
                currency="";
                var currencyConvertorEvent:CurrencyConvertorEvent = new CurrencyConvertorEvent(CurrencyConvertorEvent.Convert);        
                currencyConvertorEvent.fromCurrency = this.fromCurrency.selectedItem.toString();
                currencyConvertorEvent.toCurrency=this.toCurrency.selectedItem.toString();                
                dispatchEvent(currencyConvertorEvent);                
                this.currencyStr.text=this.fromCurrency.selectedItem+" convert to "+this.toCurrency.selectedItem + " : " ;
            }
        ]]>
    </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="currencyConvert()"/>
            <s:Group>
                <s:layout>
                    <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
                </s:layout>
                <s:Label id="currencyStr"/>
                <s:Label id="convertCurrency" text="{currency}"/>
            </s:Group>            
        </s:Group>        
    </mx:Form>
</s:Group>

Event Map

• Event Map相當於應用程式的控制中心，用於監聽各廣播事件(dispatched event)，並執行相關處理(handling)。
• 本示範例的Event Map將監聽CurrencyConvertorEvent.Convert事件類型，當該事件類型被監聽到，將執行EventHandlers標籤內的程式碼。
• 執行程序首先將呼叫CurrencyConvertor Web Service服務，傳入event.fromCurrency及event.toCurrency作為參數，若服務呼叫成功，則將幣別轉換後的值，儲存至CurrencyManager類別(model)的currencyValue屬性。
• Injectors標籤則為將CurrencyManager類別的currencyValue屬性值，設定給CurrencyConvertorPanel類別(view)的currency屬性，用以展示幣別轉換後的值。
• MainEventMap

<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" xmlns="http://mate.asfusion.com/">
    
    <fx:Script>
        <![CDATA[
            import com.asfusion.mate.currencyConvertor.views.CurrencyConvertorPanel;
            import com.asfusion.mate.currencyConvertor.events.CurrencyConvertorEvent;
            import com.asfusion.mate.currencyConvertor.business.CurrencyManager;
        ]]>
    </fx:Script>

    <fx:Declarations>            
    <!-- Debugger -->
    <Debugger level="{Debugger.ALL}" />    
    
    <!-- CurrencyConvertorEvent.Convert -->

    <EventHandlers type="{CurrencyConvertorEvent.Convert}" debug="true">        
        <WebServiceInvoker wsdl="http://www.webservicex.net/CurrencyConvertor.asmx?WSDL"
                           method="ConversionRate"
                           arguments="{[event.fromCurrency,event.toCurrency]}" 
                           debug="true">
            
            <resultHandlers>
                <!-- store the last price from the parsed results -->
                <MethodInvoker generator="{CurrencyManager}" 
                               method="storeCurrency" arguments="{resultObject}"/>
            </resultHandlers>
            
        </WebServiceInvoker>
    </EventHandlers>        
    
    <!-- Injectors -->        
    <Injectors target="{CurrencyConvertorPanel}">
        <PropertyInjector targetKey="currency" source="{CurrencyManager}" sourceKey="currencyValue" />
    </Injectors>
    </fx:Declarations>
</EventMap>

Model

• CurrencyManager類別透過storeCurrency方法，將服務回傳的幣別轉換值儲存至currencyValue屬性。
• CurrencyManager

package com.asfusion.mate.currencyConvertor.business
{
    public class CurrencyManager
    {
        [Bindable]
        public var currencyValue:String;
            
        public function storeCurrency(convertValue:Number):void {
            currencyValue = convertValue.toString();
        }
    }
}

Main Application 

• 應用程式的執行點，將Event Map與View包含在內。
• CurrencyConvertorMate.mxml

<?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" 
               xmlns:maps="com.asfusion.mate.currencyConvertor.maps.*" 
               xmlns:views="com.asfusion.mate.currencyConvertor.views.*" minWidth="955" minHeight="600">
    
    <fx:Declarations>     
       <!-- Event Maps -->    
       <maps:MainEventMap />    
    </fx:Declarations>

    <!-- Views -->    
    <views:CurrencyConvertorPanel />
    
</s:Application>