经过上两篇文章的洗礼,相信大家对mate flex framework有了一些初步的了解。那么今天我们进行mate flex framework的重头戏:Injectors(依赖注入机制)
二、Injectors(依赖注入机制)
那么什么时候Injectors(依赖注入机制)呢?具体可以看这里,人家已经描述的很清楚了,我就没有必要再重复一遍了:)http://www.adobe.com/devnet/flex/articles/dependency_injection.html
如何使用mate flex
framework来完成Injectors(依赖注入机制):好吧,我们接着上篇文章的一个例子来说明一下,当C.mxml触发了
dispatchEvent( new MyEvent( MyEvent.CLICK_ME
));后,会很容易的被EventMap传递到任何我想传递的地方。代码如下:
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://mate.asfusion.com/">
<mx:Script>
<![CDATA[
import com.wonlen.test.A;
]]>
</mx:Script>
<EventHandlers type="{ MyEvent.CLICK_ME }">
<MethodInvoker generator="{ A }" method="myEventHandler" />
</EventHandlers>
</EventMap>
而这个时候,我增加了一个需求:我想让C不仅可以传递消息还想让A得到C传递过来的消息后,显示到UI上面。例如:在A上面显示如下的内容:C跟你打了声招呼。我是A,我得到了你传递过来的消息。
为了降低A与C的耦合性,因此A是不知道C的存在的,而C也只会把自己的消息传递出去,而不会理会到底是A接受到,还是D接收到。上面的一个需求其实就将mvc的特征体现出来到了,即显示层(v)、控制层(c)、逻辑层(m)独立分开。
okay,由于需要传递参数,所以需要改写MyEvent.as,增加一个public variable :name,代码如下:
public class MyEvent extends Event {
public static const CLICK_ME : String = "clickMe";
public var name : String;
public function SupporterListEvent( type:String, bubbles:Boolean=false, cancelable:Boolean=false ) {
super( type, bubbles, cancelable );
}
注意:在真正的实际应用中 ,不用直接采用public的方式,而是应该采用setter、getter的方式,这样可以更好的控制闭包。
okay,我们已经增加了一个变量:name,它的作用是用来保存触发者的名字。因此C.mxml的代码也需要稍微的修改一下,主要对name进行赋值。
var myEvent : MyEvent = new MyEvent( MyEvent.CLICK_ME );
myEvent.name = "C";
dispatchEvent( myEvent );
上面的代码比较简单,不做过多介绍。okay,既然现在已经把名字保存起来了,那么我们需要一个逻辑对这个传入的参数进行一些处理。我们增加一个叫做
business的文件(注意这里的名称与Cairngorm、PureMVC是相似的)然后在business文件夹下面增加一个AS文
件:MyController.as,然后里面的内容如下:
package com.wonlen.test.business
{
public class MyController{
[Bindable]
public var talk : String;
[Bindable]
public var type : String;
[Bindable]
public var name : String;
// ----------------------------------------------------------
public function settingTalks() : void {
if ( type == "clickMe" ) {
talk = name + "跟你打了声招呼。";
}
else {
talk = name + "离开了。";
}
}
}
}
上面的代码,也是比较简单的,增加了三个属性,type 和 name。它们的意义上分别是:
- type:类型。
- name:名字。
- talk:保存经过设定后的字符串。
经过上面的修改,我们完成了事件携带值的修改和定义了一个controller性质的AS:MyController接下来在A.mxml里面增加一些内容,例如如下的source:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="A Panel">
<mx:Script>
<![CDATA[
[Bindable]
public var othertalks : String;
]]>
</mx:Script>
<mx:Label text="{ othertalks + '我是A,我得到了你传递过来的消息' }" />
</mx:Panel>
我定义了一个变量:othertalks,它的作用是用于显示接收的内容。那么MyEventMap应该如何修改呢?请看下面的代码:
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://mate.asfusion.com/">
<mx:Script>
<![CDATA[
import com.wonlen.test.A;
]]>
</mx:Script>
<EventHandlers type="{ MyEvent.CLICK_ME }">
<MethodInvoker generator="{ MyController }" method="settingTalks">
<Properties type="{ MyEvent.CLICK_ME }" name="{ 'C' }" />
</MethodInvoker>
</EventHandlers>
<Injectors target="{ A }">
<PropertyInjector targetKey="othertalks" source="{ MyController }" sourceKey="talk" />
</Injectors>
</EventMap>
这次MyEventMap改动就比较大了,不过都是比较好理解的,我现在给大家解释一下:
<MethodInvoker generator="{ MyController }" method="settingTalks">
<Properties type="{ MyEvent.CLICK_ME }" name="{ 'C' }" />
</MethodInvoker>
它定义了一个段<MethodInvoker>,这个段上次我应该已经讲过了,只不过上次的generator = A,而这次是:MyController而已。
让我们在回顾一下,MyController的内容:
- 一个method:settingTalks
- 三个参数:type、name(传入的两个properties)、talk(这是用于保存字符串的变量)
既然需要传入两个参数,所以我们就定义了一个属性段<Properties>,它在Mate里面是专门负责用于对XXX的属性进行赋值的工作。
那么这个段的作用是什么?当触发MyEvent.CLICK_ME后,同时传入了两个参数:type 和
name。然后会调用MyController里面的method:settingTalks。当这一切都完成后,Mate就会调
用<Injectors>里面的内容,让我们看以下<Injectors>的内容:
<Injectors target="{ A }">
</Injectors>
首先注入的目标对象是A,接下来的代码;
<PropertyInjector targetKey="othertalks" source="{ MyController }" sourceKey="talk" />
我们分析一下上面的代码,<PropertyInjector>定义了要被注入的属性,也就是A中那个变量被进行了注入操作。
targetKey="othertalks",说明了被注入的属性是A.mxml里面的othertalks。source="{
MyController }"
sourceKey="talk":说明了使用的MyController里面的属性talk作为注入属性,即将MyController.talk
赋值给A.othertalks。
okay,这就是MyEventMap增加的内容。那么截止到目前所有增加的内容都已经说明过了。
我现在重述一下上面的内容:当在C中触发了MyEvent.CLICK_ME后,会在EventMap里面调用MyController,并且传入
了type 和
name,然后通过settingTalks,最后得到了字符串talk。然后将MyController.talk通过注入方式赋值给
A.othertalks,最终显示在A上面:C跟你打了声招呼。我是A,我得到了你传递过来的消息。
其实经过以上的coding,就形成了一些简单的mvc方式。C只负责触发MyEvent.CLICK_ME,而它无须理会到底是给谁的。同时A也
只负责接收MyEvent.CLICK_ME的消息,而无须理会具体的逻辑是什么,只是单纯的显示得到的结果。MyController封装了主要的业务
逻辑,如果一但有需求变更的话,那么我们只负责修改MyController里面的逻辑即可。由于这个例子比较小,因此我只使用了变量来代替vo。
截止到现在,mate flex framework的三个特点已经介绍完两个:EventMap(事件地图)、Injectors(依赖注入机制)
目前各位初学者完全可以使用这两种方式开发你的flex project了。
下一篇我会介绍一下mate flex framework独有的功能:extensions(插件、扩充)机制。
原文地址:http://www.riameeting.com/node/170
分享到:
相关推荐
Mate flex framework在实际项目中的应用
Flex Mate框架swc包及Mate用法。
mate flex 框架 基础教程,本资料比较全,看完能够比较全的掌握MATE用法
欢迎大家下载,多提宝贵意见!!!(*^__^*)
一个关于flex的框架,名字mate,比较小巧,上手容易
附件是关于 Flash/Flex 几个重要框架 Cairngorm、Mate、PureMVC以及Swiz 的典型例子,由 Tony Hillerson 提供 Homepage: http://insideria.com
Mate是一个基于标签的,事件驱动的框架。这是一个小例子,用flex3可以直接打开运行
mate-dock-applet, MATE面板的应用平台 用于MATE面板的应用程序停靠小程序平台上的助手 V0.80 applet同时适用于GTK2和GTK3版本,并允许你:在任何你想要的桌面任何尺寸的任何一面上放置一个码头。将应用程序锁定到 ...
Download compiled library (SWC) version 0.9.1 - Flex 3 & 4 Mate is distributed under the Apache 2.0 license.
With this unique advanced-level Flex book, you will: choose among several frameworks to build Flex applications, including Cairngorm, PureMVC, Mate, and Clear Toolkit; apply selected design patterns ...
华为Mate20手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate20 位置图 点位图 位号图.pdf 华为Mate20 原理图 电路图.pdf 华为Mate20 注释图 故障标注 主板元器件位置图.pdf 华为Mate20 原厂图 维修流程...
华为Mate10手机原厂维修图纸 原理图 电路图 元件图 手机故障维修图 华为Mate10 位置图 位号图 元件图.exe 华为Mate10 原理图 电路图.exe 华为Mate10 注释图 故障标注 主板元器件位置图.exe 华为Mate10 高级维修手册....
华为Mate8手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate8 位置图 点位图 位号图.pdf 华为Mate8 原理图 电路图.pdf 华为mate8 注释图 故障标注 主板元器件位置图.pdf 华为mate8 故障维修流程图 GPS...
华为Mate10手机原厂维修图纸 原理图 电路图 故障维修图(PDF版)华为Mate10 位置图 点位图 位号图.pdf 华为Mate10 原理图 电路图.pdf 华为Mate10 注释图 故障标注 主板元器件位置图.pdf 华为Mate10 高级维修手册.pdf...
华为Mate20手机原厂维修图纸 原理图 电路图 元件图 手机故障维修图 华为Mate20 位置图 位号图 元件图.exe 华为Mate20 原理图 电路图.exe 华为Mate20 注释图 故障标注 主板元器件位置图.exe 华为Mate20 原厂图 维修...
mate30系列部分应用闪退解决方案1
华为Mate10Pro手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate10Pro 位置图 点位图 位号图.pdf 华为Mate10Pro 原理图 电路图.pdf 华为Mate10Pro 注释图 故障标注 主板元器件位置图.pdf 华为Mate10Pro ...
华为Mate20Pro手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate20Pro 位置图 点位图 位号图.pdf 华为Mate20Pro 原理图 电路图.pdf 华为Mate20Pro 注释图 故障标注 主板元器件位置图1.pdf 华为Mate20Pro...
学习mate flex actionscript 的好资源。源代码.