[Flex]Mate Flex Framework 流程介绍之Using an adapter

Mate Flex Framework 流程介绍：

Mate Flex Framework 流程介绍之One-way Communication 
Mate Flex Framework 流程介绍之Two-way Communication
Mate Flex Framework 流程介绍之 Listener tag

Mate Flex Framework 流程介绍之Using an adapter

---

 

本篇文章再向大家介绍一个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/

    请看下面的片段代码：

    <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>

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

   同时传入了一个参数：currentEvent.data。

 

    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;
        }

   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>

    由于在DetailModel.mxml里面使用了<Injectors>标签，同时在<Injectors>里面加入一些属性标签<PropertyInjector>

    即，将WeatherManager里面的currentWeather，赋值给DetailModel里面的weather。

    而促成上面的方式是由于之前的一段代码，即触发currentWeather造成的，而触发currentWeather后，则由于<Injectors>的作用而执行了刚刚的一段代码。

    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;
            }            
        }

    我们在看一下DetailModel里面的weather到底定义了一些什么东西。

    代码：public function set weather(w:CurrentConditions)里面已经给我们说明的非常清楚了。

    通过set weather，我们获得了humidity、description、pressure、wind、visibility这几个属性。
    
    <!-- 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%" />
    上面的代码，则是，当获取了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的做法。