flex frame -- Mate


Typically, the basic steps to create a Mate project are:

1. Add the compiled framework code to your project (Mate.swc).

2. Create a file that will be the EventMap .

3. Include the event map in your main Application file.

4. Create a custom event.

5. Somewhere, dispatch that event.

6. Add EventHandlers in your event map that listen for the event type you dispatched.

7. Execute some actions inside the EventHandlers block (ie: call the server, store data, etc).

8. Repeat 4-7 for every event you need.

准备工作:

首先在Event Map里面建立一个新的 Mate   tag:<MessageHandler>,这个新的 Mate   tag的作用是建立一个用于接收message的tag,具体例子请看下面:
<mx:Consumer destination="YourGateway" />

<MessageHandlers destination="YourGateway">
    ... here what you want to happen when this message is received ...
</MessageHandlers>

1、从DataService发送一个消息。(例如上例中的consumer,接收consumer发送过来的消息)
2、在<MessageHandler>里面加入一些处理方式,例如上图所示的,在<MessageHandler>首先使用了<MethodeInvoker>
3、当调用完<MethodeInvoker>后,会自动触发下一个 Mate   tag:<EventAnnouncer>
4、<EventAnnouncer>的作用就是调用某个Event。并通过Event Bus将这个Event发送出去。
    例如: http://mate.asfusion.com/page/documentation/tags/eventannouncer  这个里面所示的方式。
5、<Listener>部分是用于监听某一个Event的,在某些程度上它类似于<EventHandler>的处理方式。
    具体使用方式:
    <mate:Listener type="myEventType" method="handleThisEvent" />
    or
    <mate:Listener type="myEventType" receive="handleThisEvent(event)" />
    这个新的tag就是我们在这个流程上面重点介绍的。首先它应该在在View里面的,而<Listener>作用就是监听某个Event的响应事件。
    根据上图所示,当触发了<EventAnnouncer>后,会调用<mate:Listener>里面的handleThisEvent,进行一些处理。片段代码如下:
    <EventAnnouncer generator="MyEventClass" type="myEventType">
        <Properties myProperty="myValue" myProperty2="100"/>
    </EventAnnouncer>

    <mate:Listener type="myEventType" receive="handleThisEvent(event)" />
6、<mate:Listener>的最终目的是将处理结果反应在视图上面。


以上就是 单向通讯:从业务逻辑层到视图(One-way communication from business logic to views: Listener tag)的流程图了。

重点部分:
<mate:Listener>的建立、使用。
1、<mate:Listener>是建立在视图上的。
2、用于接收Event Map里面的<EventAnnouncer>处理结果。



flex frame -- Mate

还是老规矩,我把原本的流程介绍去掉了,然后以自己的理解进行一下翻译:
1.1、我们在视图里面建立一个mate tag:Dispatcher ,同时这个这个标签是一个ResponseHandlers类型的标签。
      即我们在<Dispatcher>里面增加了一个<ResponseHandlers>的标签。代码如下:

      <mate:Dispatcher id="messageDispatcher" generator="{MessageEvent}" type="{MessageEvent.GET}">
           <mate:eventProperties>
               <mate:EventProperties name="{inputName.text}"/>
           </mate:eventProperties>
 
           <mate:ServiceResponseHandler result="handleResult(event.result.text)" fault="handleFault(event.fault.faultString)"/>
       </mate:Dispatcher>
   以上代码copay自:http://mate.asfusion.com/assets/content/examples/helloworld/srcview/
       由于之前没有跟大家介绍过这个标签,因此我来进行一下解释。
       a、我们定义了一个id=messageDispatcher的<Dispatcher>类型的mate tag。而它的作用就是代替Flex里面的dispatcherEvent。
       b、在<Dispatcher>里面我们定义了一个属性标签:<eventProperties>,同时传入了一个属性(name)。
       那么这个标签与<Properties>有什么区别呢?
       <Properties>:用于类似<EventAnnouncer>这样的结构里面。它的作用也是传递一些属性。
       <eventProperties>:根据它的命名我们可以得出,它是用在Dispatcher里面的,也就是说,它是Event Properties。
1.2、我们又在1.1的基础上增加了一个新的标签:<ServiceResponseHandler>,这个标签的作用就是定义一个关于service的相应标签
         而<Dispatcher>里面可以让我们得知,它具体有如下功能:
        首先会dispatch某一个event,然后会给这个event传入一些参数,同时声明一个ServiceResponseHandler,作为响应这个event的接收器。
        也就说,当这个事件触发后,会通过ServiceResponseHandler得到一些响应的结果。
  2、将<Dispatcher>的内容发送给Event Bus。(这个地方与one-way Communication是一致的)
  3、Event Bus将这个被触发的event交给Event Map里面。同时在Event Map里面也定义了相应的EventHandler tag用做接收Event Bus送过来的消息。
  4、在这些定义好的EventHandler里面,会有一组动作来响应这个Event(即从Event Bus送过来的相同type的Event)
        在上图中,EventHandler首先调用的是ServiceInvoker(也就是负责调用Service的标签)
  5、当调用完ServiceInvoker后,会有一些返回值,然后将这些返回值当到某一个Class里面,因此使用了MethodeInvoker标签。
        注意:这个MethodeInvoker调用的method,会返回值,而它的返回值我们使用如下的方式得到:lastReturn.XXXX。例如如下的代码:
       <EventHandlers type="{FlexEvent.INITIALIZE}"> 
           <MethodInvoker generator="{Initializer}" method="loadFlashVars" />
           <EventAnnouncer generator="{WeatherEvent}" type="{WeatherEvent.GET}">
               <Properties location="{lastReturn.location}" unit="{lastReturn.unit}" />
           </EventAnnouncer>
      </EventHandlers>
     解释一下:
     a、Event Map里面定义了一个用于接收类型为:  FlexEvent . INITIALIZE的<EventHandler>。
     b、当接收到后会调用Initializer class里面的loadFlashVars这个method。
     c、loadFlashVars具有一个返回值,当调用完loadFlashVars后,我们再次调用EventAnnouncer这个标签中的 WeatherEvent . GET
      (这个地方相当于触dispatchEvent( new MyEvent( WeatherEvent .GET  ))
     d、同时使用 lastReturn . location 和 lastReturn .unit 对WeatherEvent的两个属性:location 和 unit进行赋值。
 
  6、根据上图所示,<EventHandler>再次调用了ResponseAnnouncer。
         注意:<EventAnnouncer>是ResponseAnnouncer的一个具体的类型,而ResponseAnnouncer还包括< S erviceResponseAnnouncer >等
  7、而调用<ResponseAnnouncer>的结果是,将<ResponseAnnouncer>发送给了Event Bus
  8、而Event Bus将<ResponseAnnouncer>响应的结果放在了<ResponseHandlers>
  9、<ResponseHandlers>是在<Dispatcher>里面定义的结构,用于接收任何的响应事件。我们要做的就是在<ResponseHandlers>里面写上用于更新UI的操作。
 
以上就是 双向通讯:分派和响应标签(Dispatcher and ResponseHandler tags)的全部流程图了。
 
这个流程图的重点部分:
它向我们展示了Dispatcher 和 ResponseHandler  这两个mate tag的用法。通过以上的一些解耦,可以使我们将mvc彻底分离。

thanks:

你可能感兴趣的:(UI,mvc,Flex,IE)