Mate Flex Framework 流程介绍之Using an adapter

原文： http://www.k-zone.cn/zblog/post/flex-mate-framework-using-adapter.html

本篇文章再向大家介绍一个Mate Flex Framework比较典型的流程：双向通讯之模型：使用适配器（Two-way communication via model: Using an adapter）
下面是它的流程图：

okay，让我们来分析一下这个新的流程所带给我们的含义：

1、在视图中，我们使用<Dispatcher> 这个Mate tag，触发了某一个事件。
2、而Event Bus会将这个触发的Event告诉事件地图（Event Map）。
      Event Map里面会事先做好一些事件的处理逻辑（即定义好一些EventHandler）
3、在这些定义好的EventHandler里面，会有一组动作来响应这个Event。
      在上图中所示的是，在<EventHandler>里面定义了一个<ServiceInvoker>
4、使用Model Manage的方式，设定一些值。
5、通过Bindings的方式，当Model Manager的属性发生改变后，使用Apdapter的方式捕捉到这些改变。
6、通过Bindings的方式，在视图中绑定了Model Manager的属性。
     也就是当Model Manager的属性发生了改变，则会同步更新到视图上面。

Kenshin将使用一个现成的例子来说明一下这种流程。
    这个例子是的地址在：http://mate.asfusion.com/assets/content/examples/weatherWidget/srcview/
    请看下面的片段代码：

1 2 3 4 5 6 7 8

<EventHandlers type="{WeatherEvent.GET}"> <extensions:WeatherLoader> <!-- make the call to the service --> <Properties location="{event.location}" unit="{event.unit}" /> <extensions:resultHandlers> <!-- receive the results contained in the currentEvent.data property (WeatherResultEvent contains a data property) --> <MethodInvoker generator="{WeatherManager}" method="setWeather" arguments="{currentEvent.data}" /> </extensions:resultHandlers> </EventHandlers>

link -raw This paste is brought you by Friendpaste.

    ok，上面的代码说明了，在<EventMap>里面建立了一个类型为WeatherEvent.GET的<EventHandlers>，同时使用<MethodInvoker>调用了一个叫做WeatherManager.setWeather()
    同时传入了一个参数：currentEvent.data。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

public class WeatherManager extends EventDispatcher { private var _weather:Weather; public function setWeather(w:Weather):void { _weather = w; dispatchEvent(new Event("weatherChange")); }   [Bindable (event="weatherChange")] public function get currentWeather():CurrentConditions { return (_weather != null)?_weather.current:null; } }

link -raw This paste is brought you by Friendpaste.

    ok，让我们来看一下WeatherManager，首先由于之前的代码使用了<MethodInvoker>的方式调用了WeatherManager.setWeather()。而function：setWeather里面的内容是：
    将传入的内容赋值给_weather，同时触发一个dispatchEvent(new Event("weatherChange"));
    而由于event ：weatherChange绑定了currentWeather，因此当触发这个event后，自动会执行public function get currentWeather():CurrentConditions里面的内容。 

1 2 3 4

<!-- DetailModel ___________________________________________________________ --> <Injectors target="{DetailModel}" > <PropertyInjector targetKey="weather" source="{WeatherManager}" sourceKey="currentWeather" /> </Injectors>

link -raw This paste is brought you by Friendpaste.

    由于在DetailModel.mxml里面使用了<Injectors>标签，同时在<Injectors>里面加入一些属性标签<PropertyInjector>
    即，将WeatherManager里面的currentWeather，赋值给DetailModel里面的weather。
    而促成上面的方式是由于之前的一段代码，即触发currentWeather造成的，而触发currentWeather后，则由于<Injectors>的作用而执行了刚刚的一段代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

public class DetailModel extends InjectorTarget { /*-.........................................weather..........................................*/ private var _weather:CurrentConditions; public function get weather():CurrentConditions { return _weather; }   [Bindable] public function set weather(w:CurrentConditions):void { _weather = w; humidity = _weather.atmosphere.humidity; description = _weather.description; formatUnits(); }   /*-.........................................formatUnits..........................................*/ private function formatUnits():void { if (weather && units) { pressure = weather.atmosphere.pressure + " " + units.pressure + " and " + weather.atmosphere.rising; wind = (weather.wind.speed > 0)?( weather.wind.speed + " " + units.speed):'Calm'; visibility = Number(weather.atmosphere.visibility)/100 + " " + units.distance; } } }

link -raw This paste is brought you by Friendpaste.

    我们在看一下DetailModel里面的weather到底定义了一些什么东西。
    代码：public function set weather(w:CurrentConditions)里面已经给我们说明的非常清楚了。
    通过set weather，我们获得了humidity、description、pressure、wind、visibility这几个属性。

1 2 3 4 5 6 7 8

<!-- Model _______________________________________________________ --> <model:DetailModel id="model" /> <!-- GUI _______________________________________________________ --> <mx:Text text="{model.description}" styleName="title" width="100%"/> <mx:Text text="Humidity: {model.humidity}%" width="100%" /> <mx:Text text="Wind: {model.wind}" width="100%" /> <mx:Text text="Pressure: {model.pressure} " width="100%" /> <mx:Text text="Visibility: {model.visibility}" width="100%" />

link -raw This paste is brought you by Friendpaste.

    上面的代码，则是，当获取了 humidity、description、pressure、wind、visibility这几个属性后，就将其显示在UI上面了。

    因此使用了[bindable]的方式，因此当上述几个值发生变化的时候，就会自动显示改变后的结果了。

总结一下，上面的例子其实就是使用了[Bindable ]、<Injectors>这两种方式。 而[Bindable]、<Injectors>这两种方式的叠加也就是之前所说的Model Manager方式。
其实大家，如果详细的看一下http://mate.asfusion.com/assets/content/examples/weatherWidget/srcview/这个例子，就可以完全的理解Mate Flex FrameWork中Apdapter与Model Manager的做法。