Mate 将会成为Flex领域的另一个热点。它使用设置(configuration)来调用Service,处理结果,同样也使用设置文件来更新绑定对象(Bindable object)。从某个角度来说:Mate是Flex领域的“springframework”。
Mate有两个架构层面的图表。一个是来自Yakov Fain of Farata Systems,另一个来自ASFusion。我更喜欢后者,其构架图如下:
http://mate.asfusion.com/assets/content/diagrams/two_way_view_injection.png
来看看用Mate的编程方式来建立buddyList应用程序。
1,建立Mate的核心组件:EventMap。
EventMap是Mate的心脏,它黏着了所有的组件和控件。其代码如下:
BuddyListEventMap.mxml:
<?xml version=”1.0″ encoding=”utf-8″?>
<EventMap xmlns=”http://mate.asfusion.com/”
xmlns:mx=http://www.adobe.com/2006/mxml>
</EventMap>
其它内容稍后再填写,现在我们需要告诉主程序(Main Application)初始化EventMap:
主程序 Flex_Mate.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:map="com.ny.flex.mate.map.*" xmlns:views="com.ny.flex.mate.views.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var viewStackSelectedIndex :int = 0;
]]>
</mx:Script>
<map:BuddyListEventMap/>
<mx:HBox horizontalAlign="center" verticalAlign="top" width="100%" height="100%" y="0" x="0">
<mx:ViewStack id="viewStack" resizeToContent="true" selectedIndex="{viewStackSelectedIndex}" >
<views:LoginView />
<views:BuddyListView/>
</mx:ViewStack>
</mx:HBox>
</mx:Application>
2. 建立LoginView :
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200" horizontalAlign="center" verticalAlign="middle" title="Flex Cirngorm Login">
<mx:Script>
<![CDATA[
import com.ny.flex.mate.event.LoginEvent;
import com.ny.flex.mate.vo.User;
import mx.validators.Validator;
private function login():void{
if(Validator.validateAll(validators).length == 0){
var loginUser:User = new User();
loginUser.userName=username.text;
loginUser.password=password.text;
var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
loginEvent.loginUser = loginUser;
dispatchEvent(loginEvent);
}
}
]]>
</mx:Script>
<!-- Validators-->
<mx:Array id="validators">
<mx:StringValidator id="userNameValidator" source="{username}" property="text" required="true"/>
<mx:StringValidator id="passwordValidator" source="{password}" property="text" required="true" />
</mx:Array>
<mx:Form id="loginForm" x="0" y="0">
<mx:FormItem label="Username:" >
<mx:TextInput id="username" />
</mx:FormItem>
<mx:FormItem label="Password:" >
<mx:TextInput id="password" displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem direction="horizontal" verticalGap="15" paddingTop="5" width="170">
<mx:Button id="loginBtn" label="Login" click="login()"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
从上面可以看出在方法login()中发送(dispatch)了LoginEvent, 来看看LoginEvent代码:
package com.ny.flex.mate.event
{
import com.ny.flex.mate.vo.User;
import flash.events.Event;
public class LoginEvent extends Event
{
public static const LOGIN:String = "login";
public var loginUser:User;
public function LoginEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
在代码中“bubbles”属性必须为“true”,以使得上层的组件(EventMap)可以处理它。
Mate的魔法完全存在于EventMap中,LoginEvent在这里被标签化处理:
…..
<EventHandlers type=”{LoginEvent.LOGIN}“>
<RemoteObjectInvoker destination=”flexmvcRO”
method=”authenticate”
arguments=”{event.loginUser}“>
<resultHandlers>
<MethodInvoker generator=”{LoginService}”
method=”onResult_Authenticate”
arguments=”{resultObject}“/>
</resultHandlers>
</RemoteObjectInvoker>
</EventHandlers>
……
在EvevntHandler代码中,用户可以定义service函数(RemoteObjectInvoker),同时也定义了结果处理的类、方法和参数。
来看看 LoginService.as代码::
package com.ny.flex.mate.service
{
import com.ny.flex.mate.vo.User;
public class LoginService
{
[Bindable]
public var authUserName:String;
[Bindable]
public var viewStackSelectedIndex:int ;
public function onResult_Authenticate(user:User):void{
authUserName = user.userName;
viewStackSelectedIndex = 1;
}
}
}
Service类处理结果,返回绑定的对象。然后我们就需要更新目标视窗。
Mate另一个闪光点就是注射(Injecting)可绑定的对象到目标视窗!用户只需要在EventMap类中增加另一个标签Injector。(Coolest 部分):
<Injectors target=”{BuddyListView}“>
<PropertyInjector targetKey=”authUserName”
source=”{LoginService}”
sourceKey=”authUserName“/>
</Injectors>
<Injectors target=”{Flex_Mate}“>
<PropertyInjector targetKey=”viewStackSelectedIndex”
source=”{LoginService}”
sourceKey=”viewStackSelectedIndex“/>
</Injectors>
在此定义目标视窗、目标关键词,资源服务对象和资源关键词。 你根本不需要写任何glue code。
最后定义目标视窗: BuddyListView.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="Buddy List of {authUserName}" creationComplete="getBuddyList()" width="500" height="320">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import com.ny.flex.mate.event.GetBuddyListEvent;
[Bindable]
public var authUserName:String;
[Bindable]
public var buddyCollection:ArrayCollection;
private function getBuddyList():void{
var getBuddyListEvent:GetBuddyListEvent = new GetBuddyListEvent(GetBuddyListEvent.GET_BUDDY_LIST);
getBuddyListEvent.authUserName = authUserName;
dispatchEvent(getBuddyListEvent);
}
]]>
</mx:Script>
<mx:DataGrid id="buddyList" dataProvider="{buddyCollection}" borderStyle="none" width="100%" height="100%" >
<mx:columns>
<mx:DataGridColumn dataField="firstName" headerText="First Name"/>
<mx:DataGridColumn dataField="lastName" headerText="Last Name"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
整个开发流程是这样的:
Action–>Dispatch Event–>Config Handler–>create service–>Inject Bindable Object –>another Action….
整个项目结构图 见附件
总结:
在我5篇blog中讨论过的Flex编程框架中,哪一个是最好的呢?
我认为中央管理(central management)最适合进阶水准的小型项目。因为无须学习新的框架,并且也一样有清晰的架构。 而且 他也是走向框架的起点。
对于Mate和Cairngorm,在我看来Mate略占上风,原因如下:
对于Cairngorm:
1,Cairngorm过于复杂,学习曲线较高
2,我觉得Cairngorm有一些垃圾代码(例如Frontcontroller,event 和Command)。
对于Mate:
1,比Cairngorm更简单易学,貌似继承和发扬了Flex的特质。
2,从EventMap中得益,因为无须编写在事件和服务之间的黏着代码。
但另一个方面, EventMap也会带来痛苦,试想一下,用户有50个行为和100个对象需要绑定,那就需要在EventMap中写入大量的configration代码。那么EventMap就成为一个灾难。
因此,如果用户使用Cairngorm,就可以选用 Cairngorm without FrontContoller的方案。
对于Mate,如果使用Meta标签来代替EventMap,就无须设置太多的东西,示例如下:
[EventHadler ={name ="myHandler", serviceclass="myservice" result , taget ...}]
MateDispatch(myevent).
我在期待着它的来临。
- 大小: 26.2 KB
分享到:
相关推荐
Mybatis-Mate为 MyBatis-Plus ... <artifactId>mybatis-mate-starter <version>1.2.4 注解(实体分包使用) <groupId>com.baomidou</groupId> <artifactId>mybatis-mate-annotation <version>1.2.4 </dependency>
基于:Radiant-MATE 主题 Kenneth Wimer、James Schriver 和 Andrea Cmitan 手动安装 将zip文件解压到themes目录即/usr/share/themes/ 要在 MATE 中设置主题,请转到System -> Preferences -> Appearance并选择OSX...
官网下载的适用于树莓派4B的ubuntu-mate-20.04.1-desktop-armhf+raspi种子
FANUC POWER-MATE-E FANUC 0I
数控系统外设通讯 fanuc-0i-mate-mc tc.pdf数控系统外设通讯 fanuc-0i-mate-mc tc.pdf数控系统外设通讯 fanuc-0i-mate-mc tc.pdf数控系统外设通讯 fanuc-0i-mate-mc tc.pdf数控系统外设通讯 fanuc-0i-mate-mc tc.pdf...
麒麟系统进程 mate-indicators 补丁包,用于解决mate-indicators 进程占用异常的问题,x86架构与arm架构都有
Flex Mate框架swc包及Mate用法。
Mate的mate-panel的命令小程序具有增加的功能,可以选择自定义图标。 要求 您至少需要: 面板 伴侣共通 make-4.3 gtk + -3.14.0 glib-2.36.0 libgtop-2.12.0 libmate面板 libwnck libnl3 波尔基特 自体 yelp...
超低厚度微型 MATE-N-LOK 连接器系统采用超低厚度设计,并具备微型 MATE-N-LOK 系列连接器的可靠性和优质性能。
kali-linux-mate-2016.2-amd64.torrent 黑客 专用 系统 种子 内含大量专用工具。 通过本页面下载后的操作与本人无关!!!
2. Files for R-30iB Mate Plus GSD File: GSDML-V2.33-Fanuc-A05B2600R834V910M-20180411.xml Device Icon: GSDML-01B7-0013-R30IBMatePlus.bmp 3. Files for R-30iB Compact Plus GSD File: GSDML-V2.33-Fanuc...
欢迎大家下载,多提宝贵意见!!!(*^__^*)
针对树莓派的Ubuntu稳定版桌面系统,文件含有百度网盘下载链接
发那科-LR-mate-200ic机器人样本pdf,发那科-LR-mate-200ic机器人样本
FANUC数控系统0i Mate-MB操作说明书
伴侣擎天柱NVIDIA Optimus GPU切换器 用 :heart_with_ribbon: 为了安装的Ubuntu sudo apt install mate-optimus费朵拉sudo dnf install mate-optimus配置除非您具有兼容的系统并且安装了适当的驱动程序,否则MATE ...
FANUC数控系统0i Mate-TB操作说明书
储存库内容/硬件-所有Eagle设计文件(.brd,.sch)文献资料-BlueSMiRF和Bluetooth Mate的基本连接指南。 -SparkFun产品的3D模型。当前产品版本 -BlueSMiRF金牌:RN-41模块 -BlueSMiRF银:RN-42模块淘汰的产品版本 -...
ubuntu1804 针对树莓派的镜像,可以下载后利用百度网盘或者迅雷等下载镜像文件,然后按照教程安装
mate-control-center:用于配置MATE桌面的实用程序