天天看點

開始使用Flex Mate 架構

原文位址

這個主題介紹怎樣開始使用mate架構.作為一個例子,我們将制作一個stock quote程式,它可以發送資料到伺服器端,并且從伺服器端接收資料存放在模型(Mode)裡面以便視圖(View)顯示。

所有應用Mate架構的程式都必須包含以下資訊

1 一個或是多個事件(使用者自定義或是内置事件)(event)

2 一個或是多個事件映射(Event map)

建立一個Mate架構應用程式的步驟如下:

1.         向你的項目中增加已編譯好的架構(Mate.swc)

2.         建立一個事件映射檔案(EventMap file)

3.         在你的主程式中引用事件映射

4.         建立自定義事件

5.         在一些地方,發送事件

6.         向映射檔案中增加EventHandlers以監聽發送的事件

7.         在EventHandlers中執行一些事件(ie:比如向伺服器發送資料,存儲資料等等)

8.         為每一個你需要的事件重複4-7步

建立項目

在Flex Builder 新建立一個項目命名為“StockQuotesExample”,使主檔案放置在src檔案夾。

在項目建立的libs檔案夾中放置Mate架構(Mate.swc),以便我們對Mate架構的标記或類進行引用。

使用者事件(The Quote custom event)

 所有的Mate運用程式都是在事件的驅動下進行。在Stock Quote例子中,當使用者輸入資訊點選“Get Quote”按鈕,我們将建立一個事件,包含相關的資訊發送至伺服器端。是以,我們需要建立一個使用者事件,辨別使用者想要送出的資訊,以需要傳回查詢的價格。

我們的事件将會非常簡單,他隻包含一個屬性,symbol.

//這為我們事件所在的包

package com.asfusion.mate.stockQuoteExample.events

{

   import flash.events.Event;

   public class QuoteEvent extends Event

   {

      public static const GET: String = "getQuoteEvent";

      public var symbol : String;

      public function QuoteEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)

      {

         super(type, bubbles, cancelable);

      }

   }

}

事件中包含一個常量被用來說明事件的類型。一個事件可以包含一個或多個事件類型。

同時,我們使事件的冒泡方式使用預設方式。另外我們必須記住對它進行執行個體化。

建立界面

使用者界面隻需要一個檔案輸入框和一個按鈕。如下:

開始使用Flex Mate 架構

發送事件

當使用者點選按鈕,我們将建立QuoteEvent事件,并發送此事件。

import com.asfusion.mate.stockQuoteExample.events.QuoteEvent;

private function getQuote() : void {

   var quoteEvent:QuoteEvent = new QuoteEvent(QuoteEvent.GET);

   quoteEvent.symbol = symbolInput.text;

   dispatchEvent(quoteEvent );

}

事件映射

事件映射檔案是我們為運作程式産生的所有事件存放對應操作的地方。

建立一個MXML的檔案命名為"MainEventMap"的元件,必須繼承于EventMap.

此時的事件映射檔案應沒有事件映射,如下所示:

<?xml version="1.0" encoding="utf-8"?>

<EventMap

   xmlns:mx="http://www.adobe.com/2006/mxml"

   xmlns="http://mate.asfusion.com/">

</EventMap>

注:如果我們不引用http://mate.asfusion.com/的指令空間,我們将不能在檔案中增加對應辨別,是以我們可以将上面代碼直接複制到我們的檔案中。

然後,我們可以在我們的主檔案中增加事件映射引用。如下:

<?xml version=

"1.0"

encoding=

"utf-8"

?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.asfusion.mate.stockQuoteExample.maps.*">

<maps:MainEventMap /> </mx:Application>

開啟調試

以便我們清楚發送的事件是否被我們的事件映射所接收,我們可以增加一個調試辨別在我們的映射檔案中

<Debugger level="{Debugger.ALL}" />

映射檔案如下所示

<?xml version=

"1.0"

encoding=

"utf-8"

?>

<EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/">

<Debugger level="{Debugger.ALL}" /> </EventMap>

監聽QuoteEvent.GET事件

在我們的映射檔案中,我們将監聽quote事件,以便發送資訊到伺服器。

我們需要在映射檔案中新增EventHandlers辨別,此辨別可以說明我們監聽的是什麼事件類型。我們同時設定他的調試屬性為真,以便在調試模試時可以看到。

<EventHandlers type="{QuoteEvent.GET}" debug="true"> </EventHandlers>

在事件映射檔案開頭,我們需要增加事件引用。

<mx:Script>

   <![CDATA[

      import com.asfusion.mate.stockQuoteExample.events.QuoteEvent;

   ]]>

</mx:Script>

在EventHandlers子產品中,我們放置對應事件發送時需要執行的事件。在此例子中,我們将利用RemoteObjectInvoker 辨別發起一個伺服器調用。假設服務在stockQuoteExample檔案夾名子為QuoteService,我們将描述調用如下:

<RemoteObjectInvoker destination="ColdFusion" source="stockQuoteExample.QuoteService"    method="getQuote"    arguments="{event.symbol}"    debug="true"> </RemoteObjectInvoker>

我們調用服務中名為“getQuote”的方法,并向方法傳送事件傳送過來的資訊symbol.

處理伺服器傳回的結果

伺服器将傳回一個數子做為目前查詢的價格。我們将在RemoteObjectInvoker的ResultHandlers中傳回的結果進行處理,在此我們調用QuoteManager類中一個名為storeQuote的方法對結果進行處理。

<EventHandlers type="{QuoteEvent.GET}" debug="true">

<RemoteObjectInvoker destination="ColdFusion"       source="stockQuoteExample.QuoteService"       method="getQuote"       arguments="{event.symbol}"       debug="true">

<resultHandlers>

<MethodInvoker generator="{QuoteManager}"             method="storeQuote" arguments="{resultObject}"/>

</resultHandlers>

</RemoteObjectInvoker>

</EventHandlers>   

如果你需要在多個視圖中共享資料,你需要建立一個”modle”。在這個簡單的例子中,你并不需要它,便是它在實際中是非常需要的,是以我們在此增加一個以便說明。

在ResultHandlers标記中,我們使用一個MethodInvoker辨別建立一個QuoteManager的執行個體,并調用它的方法storeQuote處理伺服器傳回的結果。

建立一個Modle 名為“QuoteManager”

QuoteManager将處理業務邏輯,并存儲symbol的資料在裡面。在上面一段中,我們調用storeQuote(price)的方法存儲目前的價格值。這個類的定義如下:

package com.asfusion.mate.stockQuoteExample.business

{

   public class QuoteManager

   {

      [Bindable]

      public var currentPrice:Number;

      public function storeQuote(price:Number):void {

         currentPrice = price;

      }

   }

}

更準确的說,類中currentPrice屬性對外應隻有讀的權限,并且需要具有幫定屬性。但為此我們不得不多做一些工作。

當然,當storeQuote方法被調用的時候,我們可以在裡面做更多我們需要的業務邏輯處理。

在視圖上顯示目前的價格資訊

當事件被發送,将調用一個遠端服務,遠端服務的傳回結果存儲在QuoteManager對像中。至此,我們需要把結果顯示在使用者視圖中。

在我們需要顯示價格的視圖中,我們增加一個屬性:

public var price:Number;

然後我們可以在我們需要顯示的任何地方顯示此數字。比如在一個Lable中:

<mx:Label text="Price: {price}" />

以上是視圖顯示所有需要做的工作。

将目前的價格從QuoteManager傳到視圖中

但是我們怎樣擷取QuoteManager中存儲的價格呢?

在我們的映射檔案中,我們将新增一個辨別,這個辨別将指定一個Modle中的屬性與一個視圖中的屬性。因為Modle中的屬性是幫定的,是以視圖總是能擷取屬性目前最新的值。

<Injectors target="{QuotePanel}">

<PropertyInjector targetKey="price" source="{QuoteManager}" sourceKey="currentPrice" /> </Injectors>

當你增加此标記的時候,你需要确定你是否在檔案中import所有需要申明。

事件---------伺服器調用-------------資料管理------------視圖之間的關系圖如下 :

開始使用Flex Mate 架構

繼續閱讀