加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Mate－基于标签的框架

发布时间：2020-12-15 01:28:07 所属栏目：百科 来源：网络整理
导读：Mate ? 将会成为 Flex 领域的另一个热点。它使用设置（ configuration ）来调用 Service ，处理结果，同样也使用设置文件来更新绑定对象（ Bindable object ）。从某个角度来说： Mate 是 Flex 领域的“ springframework ”。 ? Mate 有两个架构层面的图表。

Mate

?将会成为Flex领域的另一个热点。它使用设置（configuration）来调用Service，处理结果，同样也使用设置文件来更新绑定对象（Bindable object）。从某个角度来说：Mate是Flex领域的“springframework”。

?

Mate有两个架构层面的图表。一个是来自Yakov Fain of Farata Systems，另一个来自ASFusion。我更喜欢后者，其构架图如下：

?

https://www.52php.cn/res/2020/08-02/21/75602586ff114d28a0c87dbef59ca75b.png

?

?

来看看用Mate的编程方式来建立buddyList应用程序。

1，建立Mate的核心组件：EventMap。

EventMap是Mate的心脏，它黏着了所有的组件和控件。其代码如下：

BuddyListEventMap.mxml:

?

Xml代码? ?

收藏代码

  1. <?xml?version=”1.0″?encoding=”utf-8″?>??
  2. ????
  3. <EventMap?xmlns=”http://mate.asfusion.com/”???
  4. ?????????????????????????????xmlns:mx=http://www.adobe.com/2006/mxml>??
  5. ??
  6. </EventMap>??

?

?

?

?

?

?

?

?

其它内容稍后再填写，现在我们需要告诉主程序（Main Application）初始化EventMap：

主程序?Flex_Mate.mxml:

Xml代码? ?

收藏代码

  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <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">??
  3. <mx:Script>??
  4. ????<![CDATA[?
  5. ????????[Bindable]?
  6. ????????public?var?viewStackSelectedIndex?:int?=?0;?
  7. ????]]>??
  8. </mx:Script>??
  9. <span?style="color:?#ff6600;"><strong><em><map:BuddyListEventMap/></em></strong></span>??
  10. ????<mx:HBox??horizontalAlign="center"?verticalAlign="top"??width="100%"?height="100%"?y="0"?x="0">??
  11. ????<mx:ViewStack?id="viewStack"??resizeToContent="true"?selectedIndex="{viewStackSelectedIndex}"?>??
  12. ????????<views:LoginView??/>??
  13. ????????<views:BuddyListView/>??
  14. ????</mx:ViewStack>??
  15. ????</mx:HBox>??
  16. </mx:Application>??

?

?

?

?

?

?

2.?建立LoginView :

?

Xml代码? ?

收藏代码

  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:Panel?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?width="300"?height="200"?horizontalAlign="center"?verticalAlign="middle"?title="Flex?Cirngorm?Login">??
  3. ?<mx:Script>??
  4. ????<![CDATA[?
  5. ????????import?com.ny.flex.mate.event.LoginEvent;?
  6. ????????import?com.ny.flex.mate.vo.User;?
  7. ????????import?mx.validators.Validator;?
  8. ????????private?function?login():void{?
  9. ????????????if(Validator.validateAll(validators).length?==?0){?
  10. ????????????????var?loginUser:User?=?new?User();?
  11. ????????????????loginUser.userName=username.text;?
  12. ????????????????loginUser.password=password.text;?
  13. ????????????????<span?style="color:?#ff6600;"><strong><em>var?loginEvent:LoginEvent?=?new?LoginEvent(LoginEvent.LOGIN);?
  14. ????????????????loginEvent.loginUser?=?loginUser;?
  15. ????????????????dispatchEvent(loginEvent);</em></strong></span>?
  16. ????????????}????
  17. ????????}?
  18. ????]]>??
  19. </mx:Script>??
  20. ??
  21. ?<!--??Validators-->??
  22. ?<mx:Array?id="validators">??
  23. ????<mx:StringValidator??id="userNameValidator"?source="{username}"??property="text"??required="true"/>??
  24. ????<mx:StringValidator??id="passwordValidator"?source="{password}"??property="text"?required="true"?/>??
  25. ?</mx:Array>??????
  26. ??
  27. ??
  28. <mx:Form?id="loginForm"?x="0"?y="0">??
  29. ??????????<mx:FormItem?label="Username:"?>??
  30. ???????????????<mx:TextInput?id="username"?/>??
  31. ???????????</mx:FormItem>??
  32. ???????????<mx:FormItem?label="Password:"?>??
  33. ???????????????<mx:TextInput?id="password"?displayAsPassword="true"?/>??
  34. ???????????</mx:FormItem>??
  35. ???????????<mx:FormItem?direction="horizontal"?verticalGap="15"?paddingTop="5"?width="170">??
  36. ???????????????<mx:Button?id="loginBtn"?label="Login"?click="login()"/>??
  37. ???????????</mx:FormItem>??
  38. ????</mx:Form>??
  39. ??????
  40. </mx:Panel>??

?

?

?

从上面可以看出在方法login()中发送(dispatch)了LoginEvent,来看看LoginEvent代码：

Xml代码? ?

收藏代码

  1. package?com.ny.flex.mate.event??
  2. {??
  3. ????import?com.ny.flex.mate.vo.User;??
  4. ??????
  5. ????import?flash.events.Event;??
  6. ??
  7. ????public?class?LoginEvent?extends?Event??
  8. ????{??
  9. ????????public?static?const?LOGIN:String?=?"login";??
  10. ????????public?var??loginUser:User;??
  11. ????????public?function?LoginEvent(type:String,?<span?style="color:?#ff6600;"><strong><em>bubbles:Boolean=true</em></strong></span>,?cancelable:Boolean=false)??
  12. ????????{??
  13. ????????????super(type,?bubbles,?cancelable);??
  14. ????????}??
  15. ??????????
  16. ????}??
  17. }??

?

在代码中“bubbles”属性必须为“true”，以使得上层的组件（EventMap）可以处理它。

Mate的魔法完全存在于EventMap中，LoginEvent在这里被标签化处理：

?

?

Xml代码? ?

收藏代码

  1. …..??
  2. ???
  3. <EventHandlers?type=”{LoginEvent.LOGIN}“>??
  4. ?????<RemoteObjectInvoker?destination=”flexmvcRO”???
  5. ????????????????????????????????????????????????method=”authenticate”???
  6. ????????????????????????????????????????????????arguments=”{event.loginUser}“>??
  7. ???
  8. ?????????<resultHandlers>??
  9. ???????????????<MethodInvoker?generator=”{<span?style="color:?#ff6600;"><strong><em>LoginService</em></strong></span>}”???
  10. ?????????????????????????????????????????method=”<span?style="color:?#ff0000;"><strong><em>onResult_Authenticate</em></strong></span>”???
  11. ????????????????????????????????????????????????????arguments=”{<span?style="color:?#800000;"><strong><em>resultObject</em></strong></span>}“/>??
  12. ????????</resultHandlers>??
  13. ????</RemoteObjectInvoker>??
  14. ?</EventHandlers>??
  15. ……??

?

?

?

?

?

在EvevntHandler代码中，用户可以定义service函数（RemoteObjectInvoker），同时也定义了结果处理的类、方法和参数。

来看看?LoginService.as代码：:

?

?

?

Xml代码? ?

收藏代码

  1. package?com.ny.flex.mate.service??
  2. {??
  3. ????import?com.ny.flex.mate.vo.User;??
  4. ??????
  5. ????public?class?<span?style="color:?#ff6600;"><strong><em>LoginService</em></strong></span>??
  6. ????{??
  7. ????????[Bindable]??
  8. ????????public?var?authUserName:String;??
  9. ????????[Bindable]??
  10. ????????public?var?viewStackSelectedIndex:int?;??
  11. ??
  12. ????????public?function??<span?style="color:?#ff0000;"><strong><em>onResult_Authenticate</em></strong></span>(<span?style="color:?#800000;"><strong><em>user:User</em></strong></span>):void{??
  13. ????????????authUserName?=?user.userName;??
  14. ????????????viewStackSelectedIndex?=?1;??
  15. ????????}??
  16. ??????????
  17. ????}??
  18. }??

?

Service类处理结果，返回绑定的对象。然后我们就需要更新目标视窗。

?

Mate另一个闪光点就是注射（Injecting）可绑定的对象到目标视窗！用户只需要在EventMap类中增加另一个标签Injector。（Coolest 部分）：

?

?

Xml代码? ?

收藏代码

  1. <Injectors?target=”{BuddyListView}“>??
  2. ???????????<PropertyInjector?targetKey=”authUserName”???????
  3. ????????????????????????????????????????source=”{LoginService}”???
  4. ????????????????????????????????????????sourceKey=”authUserName“/>??
  5. ???
  6. ?</Injectors>??
  7. ???
  8. <Injectors?target=”{Flex_Mate}“>??
  9. ??????????????<PropertyInjector?targetKey=”viewStackSelectedIndex”???
  10. ???????????????????????????????source=”{LoginService}”??
  11. ???????????????????????????????sourceKey=”viewStackSelectedIndex“/>??
  12. ???
  13. ?</Injectors>??
  14. ???
  15. ???

?

?

在此定义目标视窗、目标关键词，资源服务对象和资源关键词。?你根本不需要写任何glue code。

?

最后定义目标视窗：?BuddyListView.mxml：

Xml代码? ?

收藏代码

  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:Panel?xmlns:mx="http://www.adobe.com/2006/mxml"?title="Buddy?List?of??{authUserName}"?creationComplete="getBuddyList()"?width="500"?height="320">??
  3. <mx:Script>??
  4. ????<![CDATA[?
  5. ????????import?mx.collections.ArrayCollection;?
  6. ????????import?com.ny.flex.mate.event.GetBuddyListEvent;?
  7. ???????[Bindable]?
  8. ???????public?var?authUserName:String;?
  9. ???????[Bindable]?
  10. ???????public?var?buddyCollection:ArrayCollection;?
  11. ????????
  12. ???????private?function?getBuddyList():void{?
  13. ????????????var?getBuddyListEvent:GetBuddyListEvent?=?new?GetBuddyListEvent(GetBuddyListEvent.GET_BUDDY_LIST);?
  14. ????????????getBuddyListEvent.authUserName?=?authUserName;?
  15. ????????????dispatchEvent(getBuddyListEvent);?
  16. ????????}?
  17. ????]]>??
  18. </mx:Script>??
  19. ??
  20. ?<mx:DataGrid?id="buddyList"??dataProvider="{buddyCollection}"??borderStyle="none"?width="100%"?height="100%"?>??
  21. ???????<mx:columns>??
  22. ????????<mx:DataGridColumn?dataField="firstName"?headerText="First?Name"/>??
  23. ????????<mx:DataGridColumn?dataField="lastName"?headerText="Last?Name"/>??
  24. ????</mx:columns>??
  25. ??
  26. ?</mx:DataGrid>??
  27. </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).

?

From:

http://houwei.iteye.com/blog/224084

From:

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同