Mate－基于标签的框架

最新推荐文章于 2024-06-16 11:41:46 发布

babylon_0049

最新推荐文章于 2024-06-16 11:41:46 发布

阅读量776

点赞数

分类专栏： Flex 文章标签：框架 encoding flex xml login application

69 篇文章 0 订阅

订阅专栏

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

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

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

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

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

BuddyListEventMap.mxml:

Xml代码

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

主程序 Flex_Mate.mxml:

Xml代码

<?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代码

<?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>
<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代码：

Xml代码

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在这里被标签化处理：

Xml代码

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

来看看 LoginService.as代码：:

Xml代码

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

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

Xml代码

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

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

Xml代码

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