Mate-基于标签的框架

　　Mate 将会成为Flex领域的另一个热点。它使用设置（configuration）来调用Service，处理结果，同样也使用设置文件来更新绑定对象（Bindable object）。从某个角度来说：Mate是Flex领域的"springframework"。
　　Mate有两个架构层面的图表。一个是来自Yakov Fain of Farata Systems，另一个来自ASFusion。我更喜欢后者，其构架图如下：
　　http://mate.asfusion.com/assets/content/diagrams/t wo_way_view_injection.png
　　
　　来看看用Mate的编程方式来建立buddyList应用程序。
　　1，建立Mate的核心组件：EventMap。
　　EventMap是Mate的心脏，它黏着了所有的组件和控件。其代码如下：
　　BuddyListEventMap.mxml: Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=%3C%3Fxml%20version%3D%E2%80% 9D1.0%E2%80%B3%20encoding%3D%E2%80%9Dutf-8%E2%80%B3 %3F%3E%0A%20%20%0A%3CEventMap%20xmlns%3D%E2%80%9Dht tp%3A%2F%2Fmate.asfusion.com%2F%E2%80%9D%20%0A%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20xmlns%3Amx%3Dhttp%3A %2F%2Fwww.adobe.com%2F2006%2Fmxml%3E%0A%0A%3C%2FEve ntMap%3E%0A">
　　
　　
　　
　　
　　其它内容稍后再填写，现在我们需要告诉主程序（Main Application）初始化EventMap：
　　主程序 Flex_Mate.mxml: Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=%3C%3Fxml%20version%3D%221.0% 22%20encoding%3D%22utf-8%22%3F%3E%0A%3Cmx%3AApplica tion%20%20xmlns%3Amap%3D%22com.ny.flex.mate.map.*%2 2%20xmlns%3Aviews%3D%22com.ny.flex.mate.views.*%22% 20xmlns%3Amx%3D%22http%3A%2F%2Fwww.adobe.com%2F2006 %2Fmxml%22%20layout%3D%22absolute%22%3E%0A%3Cmx%3AS cript%3E%0A%09%3C!%5BCDATA%5B%0A%09%09%5BBindable%5 D%0A%09%09public%20var%20viewStackSelectedIndex%20% 3Aint%20%3D%200%3B%0A%09%5D%5D%3E%0A%3C%2Fmx%3AScri pt%3E%0A%3Cspan%20style%3D%22color%3A%20%23ff6600%3 B%22%3E%3Cstrong%3E%3Cem%3E%3Cmap%3ABuddyListEventM ap%2F%3E%3C%2Fem%3E%3C%2Fstrong%3E%3C%2Fspan%3E%0A% 20%20%20%20%3Cmx%3AHBox%20%20horizontalAlign%3D%22c enter%22%20verticalAlign%3D%22top%22%20%20width%3D% 22100%25%22%20height%3D%22100%25%22%20y%3D%220%22%2 0x%3D%220%22%3E%0A%20%20%20%20%3Cmx%3AViewStack%20i d%3D%22viewStack%22%20%20resizeToContent%3D%22true% 22%20selectedIndex%3D%22%7BviewStackSelectedIndex%7 D%22%20%3E%0A%20%20%20%20%20%20%20%20%3Cviews%3ALog inView%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cvie ws%3ABuddyListView%2F%3E%0A%20%20%20%20%3C%2Fmx%3AV iewStack%3E%0A%20%20%20%20%3C%2Fmx%3AHBox%3E%0A%3C% 2Fmx%3AApplication%3E%0A">
　　
　　
　　
　　
　　
　　
　　style="color: #ff6600;">
　　
　　
　　
　　
　　
　　
　　
　　2. 建立LoginView : Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=%3C%3Fxml%20version%3D%221.0% 22%20encoding%3D%22utf-8%22%3F%3E%0A%3Cmx%3APanel%2 0xmlns%3Amx%3D%22http%3A%2F%2Fwww.adobe.com%2F2006% 2Fmxml%22%20layout%3D%22absolute%22%20width%3D%2230 0%22%20height%3D%22200%22%20horizontalAlign%3D%22ce nter%22%20verticalAlign%3D%22middle%22%20title%3D%2 2Flex%20Cirngorm%20Login%22%3E%0A%20%3Cmx%3AScript% 3E%0A%09%3C!%5BCDATA%5B%0A%09%09import%20com.ny.fle x.mate.event.LoginEvent%3B%0A%09%09import%20com.ny. flex.mate.vo.User%3B%0A%09%09import%20mx.validators .Validator%3B%0A%09%09private%20function%20login()% 3Avoid%7B%0A%09%09%09if(Validator.validateAll(valid ators).length%20%3D%3D%200)%7B%0A%09%09%09%09var%20 loginUser%3AUser%20%3D%20new%20User()%3B%0A%09%09%0 9%09loginUser.userName%3Dusername.text%3B%0A%09%09% 09%09loginUser.password%3Dpassword.text%3B%0A%09%09 %09%09%3Cspan%20style%3D%22color%3A%20%23ff6600%3B% 22%3E%3Cstrong%3E%3Cem%3Evar%20loginEvent%3ALoginEv ent%20%3D%20new%20LoginEvent(LoginEvent.LOGIN)%3B%0 A%09%09%09%09loginEvent.loginUser%20%3D%20loginUser %3B%0A%09%09%09%09dispatchEvent(loginEvent)%3B%3C%2 Fem%3E%3C%2Fstrong%3E%3C%2Fspan%3E%0A%09%09%09%7D%2 0%20%20%0A%09%09%7D%0A%09%5D%5D%3E%0A%3C%2Fmx%3AScr ipt%3E%0A%0A%20%3C!--%20%20Validators--%3E%0A%20%3C mx%3AArray%20id%3D%22validators%22%3E%0A%20%20%20%2 0%3Cmx%3AStringValidator%20%20id%3D%22userNameValid ator%22%20source%3D%22%7Busername%7D%22%20%20proper ty%3D%22text%22%20%20required%3D%22true%22%2F%3E%0A %20%20%20%20%3Cmx%3AStringValidator%20%20id%3D%22pa sswordValidator%22%20source%3D%22%7Bpassword%7D%22% 20%20property%3D%22text%22%20required%3D%22true%22% 20%2F%3E%0A%20%3C%2Fmx%3AArray%3E%20%20%20%20%0A%0A %0A%3Cmx%3AForm%20id%3D%22loginForm%22%20x%3D%220%2 2%20y%3D%220%22%3E%0A%20%20%20%20%20%20%20%20%20%20 %3Cmx%3AFormItem%20label%3D%22Username%3A%22%20%3E% 0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cm x%3ATextInput%20id%3D%22username%22%20%2F%3E%0A%20% 20%20%20%20%20%20%20%20%20%20%3C%2Fmx%3AFormItem%3E %0A%20%20%20%20%20%20%20%20%20%20%20%3Cmx%3AFormIte m%20label%3D%22Password%3A%22%20%3E%0A%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%3Cmx%3ATextInput%2 0id%3D%22password%22%20displayAsPassword%3D%22true% 22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3C% 2Fmx%3AFormItem%3E%0A%20%20%20%20%20%20%20%20%20%20 %20%3Cmx%3AFormItem%20direction%3D%22horizontal%22% 20verticalGap%3D%2215%22%20paddingTop%3D%225%22%20w idth%3D%22170%22%3E%0A%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%3Cmx%3AButton%20id%3D%22loginBtn%2 2%20label%3D%22Login%22%20click%3D%22login()%22%2F% 3E%0A%20%20%20%20%20%20%20%20%20%20%20%3C%2Fmx%3AFo rmItem%3E%0A%20%20%20%20%3C%2Fmx%3AForm%3E%0A%20%20 %20%09%0A%3C%2Fmx%3APanel%3E%0A">
　　
　　
　　Flex Cirngorm Login">
　　
　　style="color: #ff6600;">var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
　　loginEvent.loginUser = loginUser;
　　dispatchEvent(loginEvent);
　　}
　　}
　　]]>
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　从上面可以看出在方法login()中发送(dispatch)了LoginEvent, 来看看LoginEvent代码： Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=package%20com.ny.flex.mate.ev ent%0A%7B%0A%09import%20com.ny.flex.mate.vo.User%3B %0A%09%0A%09import%20flash.events.Event%3B%0A%0A%09 public%20class%20LoginEvent%20extends%20Event%0A%09 %7B%0A%09%09public%20static%20const%20LOGIN%3AStrin g%20%3D%20%22login%22%3B%0A%09%09public%20var%20%20 loginUser%3AUser%3B%0A%09%09public%20function%20Log inEvent(type%3AString%2C%20%3Cspan%20style%3D%22col or%3A%20%23ff6600%3B%22%3E%3Cstrong%3E%3Cem%3Ebubbl es%3ABoolean%3Dtrue%3C%2Fem%3E%3C%2Fstrong%3E%3C%2F span%3E%2C%20cancelable%3ABoolean%3Dfalse)%0A%09%09 %7B%0A%09%09%09super(type%2C%20bubbles%2C%20cancela ble)%3B%0A%09%09%7D%0A%09%09%0A%09%7D%0A%7D">
　　
　　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, style="color: #ff6600;">bubbles:Boolean=true, cancelable:Boolean=false)
　　{
　　super(type, bubbles, cancelable);
　　}
　　} }
　　在代码中"bubbles"属性必须为"true"，以使得上层的组件（EventMap）可以处理它。
　　Mate的魔法完全存在于EventMap中，LoginEvent在这里被标签化处理： Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=%E2%80%A6..%0A%20%0A%3CEventH andlers%20type%3D%E2%80%9D%7BLoginEvent.LOGIN%7D%E2 %80%9C%3E%0A%20%20%20%20%20%3CRemoteObjectInvoker%2 0destination%3D%E2%80%9DflexmvcRO%E2%80%9D%20%0A%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20method%3D%E2 %80%9Dauthenticate%E2%80%9D%20%0A%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20arguments%3D%E2%80%9D%7Beve nt.loginUser%7D%E2%80%9C%3E%0A%20%0A%20%20%20%20%20 %20%20%20%20%3CresultHandlers%3E%0A%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%3CMethodInvoker%20gen erator%3D%E2%80%9D%7B%3Cspan%20style%3D%22color%3A% 20%23ff6600%3B%22%3E%3Cstrong%3E%3Cem%3ELoginServic e%3C%2Fem%3E%3C%2Fstrong%3E%3C%2Fspan%3E%7D%E2%80%9 D%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20method%3D%E2%80%9D%3Csp an%20style%3D%22color%3A%20%23ff0000%3B%22%3E%3Cstr ong%3E%3Cem%3EonResult_Authenticate%3C%2Fem%3E%3C%2 Fstrong%3E%3C%2Fspan%3E%E2%80%9D%20%0A%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20arguments% 3D%E2%80%9D%7B%3Cspan%20style%3D%22color%3A%20%2380 0000%3B%22%3E%3Cstrong%3E%3Cem%3EresultObject%3C%2F em%3E%3C%2Fstrong%3E%3C%2Fspan%3E%7D%E2%80%9C%2F%3E %0A%20%20%20%20%20%20%20%20%3C%2FresultHandlers%3E% 0A%20%20%20%20%3C%2FRemoteObjectInvoker%3E%0A%20%3C %2FEventHandlers%3E%0A%E2%80%A6%E2%80%A6%0A">
　　
　　…..
　　
　　
　　
　　style="color: #ff6600;">LoginService}"
　　method="style="color: #ff0000;">onResult_Authenticate"
　　arguments="{style="color: #800000;">resultObject}"/>
　　
　　
　　
　　……
　　在EvevntHandler代码中，用户可以定义service函数（RemoteObjectInvoker），同时也定义了结果处理的类、方法和参数。
　　来看看 LoginService.as代码：: Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=package%20com.ny.flex.mate.se rvice%0A%7B%0A%09import%20com.ny.flex.mate.vo.User% 3B%0A%09%0A%09public%20class%20%3Cspan%20style%3D%2 2color%3A%20%23ff6600%3B%22%3E%3Cstrong%3E%3Cem%3EL oginService%3C%2Fem%3E%3C%2Fstrong%3E%3C%2Fspan%3E% 0A%09%7B%0A%09%09%5BBindable%5D%0A%09%09public%20va r%20authUserName%3AString%3B%0A%09%09%5BBindable%5D %0A%09%09public%20var%20viewStackSelectedIndex%3Ain t%20%3B%0A%0A%09%09public%20function%20%20%3Cspan%2 0style%3D%22color%3A%20%23ff0000%3B%22%3E%3Cstrong% 3E%3Cem%3EonResult_Authenticate%3C%2Fem%3E%3C%2Fstr ong%3E%3C%2Fspan%3E(%3Cspan%20style%3D%22color%3A%2 0%23800000%3B%22%3E%3Cstrong%3E%3Cem%3Euser%3AUser% 3C%2Fem%3E%3C%2Fstrong%3E%3C%2Fspan%3E)%3Avoid%7B%0 A%09%09%09authUserName%20%3D%20user.userName%3B%0A% 09%09%09viewStackSelectedIndex%20%3D%201%3B%0A%09%0 9%7D%0A%09%09%0A%09%7D%0A%7D">
　　
　　package com.ny.flex.mate.service
　　{
　　import com.ny.flex.mate.vo.User;
　　public class style="color: #ff6600;">LoginService
　　{
　　[Bindable]
　　public var authUserName:String;
　　[Bindable]
　　public var viewStackSelectedIndex:int ;
　　public function style="color: #ff0000;">onResult_Authenticate(style="color: #800000;">user:User):void{
　　authUserName = user.userName;
　　viewStackSelectedIndex = 1;
　　}
　　} }
　　Service类处理结果，返回绑定的对象。然后我们就需要更新目标视窗。
　　Mate另一个闪光点就是注射（Injecting）可绑定的对象到目标视窗！用户只需要在EventMap类中增加另一个标签Injector。（Coolest 部分）： Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=%3CInjectors%20target%3D%E2%8 0%9D%7BBuddyListView%7D%E2%80%9C%3E%0A%20%20%20%20% 20%20%20%20%20%20%20%3CPropertyInjector%20targetKey %3D%E2%80%9DauthUserName%E2%80%9D%20%20%20%20%20%0A %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20source%3D%E2%80%9D%7BLoginService %7D%E2%80%9D%20%0A%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20sourceKey%3D%E2 %80%9DauthUserName%E2%80%9C%2F%3E%0A%20%0A%20%3C%2F Injectors%3E%0A%20%0A%3CInjectors%20target%3D%E2%80 %9D%7BFlex_Mate%7D%E2%80%9C%3E%0A%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%3CPropertyInjector%20targe tKey%3D%E2%80%9DviewStackSelectedIndex%E2%80%9D%20% 0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20source% 3D%E2%80%9D%7BLoginService%7D%E2%80%9D%0A%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20sourceKey%3D%E2%80% 9DviewStackSelectedIndex%E2%80%9C%2F%3E%0A%20%0A%20 %3C%2FInjectors%3E%0A%20%0A%20%0A">
　　
　　
　　
　　
　　
　　
　　
　　在此定义目标视窗、目标关键词，资源服务对象和资源关键词。 你根本不需要写任何glue code。
　　最后定义目标视窗： BuddyListView.mxml： Xml代码 type="application/x-shockwave-flash" width="14" height="15" src="http://houwei.iteye.com/javascripts/syntaxhig hlighter/clipboard_new.swf" pluginspage="http://www.macromedia.com/go/getflash player" allowscriptaccess="always" quality="high" flashvars="clipboard=%3C%3Fxml%20version%3D%221.0% 22%20encoding%3D%22utf-8%22%3F%3E%0A%3Cmx%3APanel%2 0xmlns%3Amx%3D%22http%3A%2F%2Fwww.adobe.com%2F2006% 2Fmxml%22%20title%3D%22Buddy%20List%20of%20%20%7Bau thUserName%7D%22%20creationComplete%3D%22getBuddyLi st()%22%20width%3D%22500%22%20height%3D%22320%22%3E %0A%3Cmx%3AScript%3E%0A%09%3C!%5BCDATA%5B%0A%09%09i mport%20mx.collections.ArrayCollection%3B%0A%09%09i mport%20com.ny.flex.mate.event.GetBuddyListEvent%3B %0A%09%20%20%20%5BBindable%5D%0A%09%20%20%20public% 20var%20authUserName%3AString%3B%0A%09%20%20%20%5BB indable%5D%0A%09%20%20%20public%20var%20buddyCollec tion%3AArrayCollection%3B%0A%09%20%20%20%0A%09%20%2 0%20private%20function%20getBuddyList()%3Avoid%7B%0 A%09%09%09var%20getBuddyListEvent%3AGetBuddyListEve nt%20%3D%20new%20GetBuddyListEvent(GetBuddyListEven t.GET_BUDDY_LIST)%3B%0A%09%09%09getBuddyListEvent.a uthUserName%20%3D%20authUserName%3B%0A%09%09%09disp atchEvent(getBuddyListEvent)%3B%0A%09%09%7D%0A%09%5 D%5D%3E%0A%3C%2Fmx%3AScript%3E%0A%0A%20%3Cmx%3AData Grid%20id%3D%22buddyList%22%20%20dataProvider%3D%22 %7BbuddyCollection%7D%22%20%20borderStyle%3D%22none %22%20width%3D%22100%25%22%20height%3D%22100%25%22% 20%3E%0A%20%20%20%20%20%20%20%3Cmx%3Acolumns%3E%0A% 20%20%20%20%20%20%20%20%3Cmx%3ADataGridColumn%20dat aField%3D%22firstName%22%20headerText%3D%22First%20 Name%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cmx%3ADat aGridColumn%20dataField%3D%22lastName%22%20headerTe xt%3D%22Last%20Name%22%2F%3E%0A%20%20%20%20%3C%2Fmx %3Acolumns%3E%0A%0A%20%3C%2Fmx%3ADataGrid%3E%0A%3C% 2Fmx%3APanel%3E%0A">
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　整个开发流程是这样的：
　　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).
　　From: http://houwei.iteye.com/blog/224084
　　From: