开始使用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);

      }

     

   }

}

 

事件中包含一个常量被用来说明事件的类型。一个事件可以包含一个或多个事件类型。

 

同时，我们使事件的冒泡方式使用默认方式。另外我们必须记住对它进行实例化。

 

创建界面

 

用户界面只需要一个文件输入框和一个按钮。如下：

 

发送事件

当用户点击按钮，我们将创建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所有需要申明。

 

事件---------服务器调用-------------数据管理------------视图之间的关系图如下 ：