Mate Flex Framework 流程介绍之Using an adapter

最新推荐文章于 2017-06-27 14:54:48 发布

转载最新推荐文章于 2017-06-27 14:54:48 发布 · 633 阅读

文章标签：

#flex #manager #function #generator #class #null

Flex/AS 同时被 2 个专栏收录

39 篇文章

订阅专栏

Mate

4 篇文章

订阅专栏

原文： 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里面的内容。

       <!-- 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):&apos;Calm&apos;;
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的做法。