Flex的MVC框架结构-Cairngorm

发布时间：2020-12-15 04:55:56 所属栏目：百科来源：网络整理

导读：原文地址：http://zengxiangshun.iteye.com/blog/1098239 Cairngorm是Flex的一个MVC框架结构? ? 使用Cairngorm的第一步是建立框架结构的骨架，包括了三个对象：? Model Locater；? Service Locator；? Front Controller；? Model Locator：承载了组件之间的

原文地址：http://zengxiangshun.iteye.com/blog/1098239

Cairngorm是Flex的一个MVC框架结构?

?
使用Cairngorm的第一步是建立框架结构的骨架，包括了三个对象：?
Model Locater；?
Service Locator；?
Front Controller；?
Model Locator：承载了组件之间的所有的传递的信息和数据，这是一个Bindable（可绑定的）对象。?
Service Locator：定义了与数据源（Httpservice，Webservice，Remoteobject）之间通讯的界面。?
Front Controller：建立播送事件（Dispatch event）和命令层（command）之间的对应关系（mapping）。??
看一下相关的代码：?
BuddyAppModelLocator.as:?
Xml代码?????

    Java代码?? 
   
??<EM>package?com.ny.flex.cairngorm.model??????
??{??????
????????import?com.ny.flex.cairngorm.vo.User;??????
??????????????
????????import?mx.collections.ArrayCollection;??????
??????????????
????????[Bindable]??????
????????public?class?BuddyAppModelLocator??????
????????{??????
?????????????public?var?buddyList:ArrayCollection=new?ArrayCollection();??????
?????????????public?var?loginUser:User=new?User();??????
?????????????public?var?viewStackSelectedIndex?:int?=?0;??????
???????????????????
?????????????static?private?var?__instance:BuddyAppModelLocator=null;??????
???????????????????
?????????????public?function?getInstance():BuddyAppModelLocator??????
?????????????{??????
???????????????????if(__instance?==?null)??????
???????????????????{??????
?????????????????????????__instance=new?BuddyAppModelLocator();??????
???????????????????}??????
???????????????????return?__instance;??????
?????????????}??????
???????}??????
?}??????
?</EM>??

??
在Model Locator代码中，定义了三个public的变量，buddyList：用来存放由数据库获取的密友列表；loginUser：定义一个User类型对象；viewStackSelectedIndex：定义viewStack指向的视窗。?
几乎所有的服务层返回的信息都需要在Model Locator中有一个相应的对象。?
BuddyServiceLocator.mxml:?
Xml代码?????

??<EM><EM><?xml?version=”1.0″?encoding=”utf-8″?>?????
 
??<cairngorm:ServiceLocator?xmlns:mx=”http://www.adobe.com/2006/mxml”?xmlns:cairngorm=”http://www.adobe.com/2006/cairngorm“>?????
????????<mx:RemoteObject?id=”buddyRo“??destination=”flexmvcRO”?>?????
????????????????????
????????</mx:RemoteObject>?????
??</cairngorm:ServiceLocator>?????
??</EM></EM>????

上述代码定义了程序将要调用的RemoteObject ，RemoteObject 所调用的Destination需要和remote_config.xml文件中的Destination相一致。在此，Destination的值为“flexmvcRO”。?
BuddyListController.as:?
1.??package?com.ny.flex.cairngorm.control??????

import?com.adobe.cairngorm.control.FrontController;??????

4.????????import?com.ny.flex.cairngorm.command.GetBuddyListCommand;??????

import?com.ny.flex.cairngorm.command.LoginCommand;??????

6.????????import?com.ny.flex.cairngorm.event.GetBuddyListEvent;??????

7.????????import?com.ny.flex.cairngorm.event.LoginEvent;??????

8.?????????

9.????????class?BuddyListController?extends?FrontController??????

10.???????{??????

public?function?BuddyListController()??????

12.?????????????{??????

13.???????????????????super();??????

14.???????????????????addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);????????????

15.???????????????????addCommand(GetBuddyListEvent.GET_BUDDY_LIST_EVENT,??????

16.?GetBuddyListCommand);??????

17.?????????????}??????

18.???????????????????

19.???????}??????

20.?}??????

21.???

很显然，上述的Controller代码是事件和命令的对应处理的地方。?
如何能将这些乱七八糟的东西结合在一起？其Magic的地方是在主页（Main application）上，代码如下：?
BuddList_Main_Cairngorm.mxml:?
1.??<?xml?version=”2.??<mx:Application?xmlns:mx=”http://www.adobe.com/2006/mxml“??xmlns:service=”com.ny.flex.cairngorm.service.*“??xmlns:controller=”com.ny.flex.cairngorm.control.*”?xmlns:views=”com.ny.flex.cairngorm.views.*”?layout=”absolute“??width=”100%”?height=”100%“>?????

3.??<mx:Script>?????

4.????????<![CDATA[?????

5.??????????????import?com.ny.flex.cairngorm.model.BuddyAppModelLocator;?????

6.????????[Bindable]?????

public?var?myModel:BuddyAppModelLocator?=?BuddyAppModelLocator.getInstance();?????

8.????????]]>?????

9.??</mx:Script>?????

10.????????

11.???????<service:BuddyServiceLocator?id=”myservice“/>?????

12.???????<controller:BuddyListController?id=”myController“/>?????

13.????????

14.?????<mx:HBox??horizontalAlign=”center”?verticalAlign=”top“??width=”100%”?height=”100%”?y=”0”?x=”0“>?????

15.?????<mx:ViewStack?id=”viewStack“??resizeToContent=”true”?selectedIndex=”{myModel.viewStackSelectedIndex}”?>?????

16.?????????<views:LoginView??/>?????

17.?????????<views:BuddyListView/>?????

18.?????</mx:ViewStack>?????

19.?????</mx:HBox>?????

20.?</mx:Application>?????

21.????

现在用户可以建立视图组件，并从这些组件中播送事件:?
LoginView.mxml:?
1.????????<![CDATA[?????

2.??????????????import?com.ny.flex.cairngorm.event.LoginEvent;?????

3.??????????????import?com.ny.flex.cairngorm.vo.User;?????

4.??????????????import?mx.validators.Validator;?????

private?function?login():void{?????

6.????????????????????if(Validator.validateAll(validators).length?==?0){?????

7.??????????????????????????var?loginUser:User?=?new?User();?????

8.??????????????????????????loginUser.userName=username.text;?????

9.??????????????????????????loginUser.password=password.text;?????

10.?????????????????????????var?loginEvent:LoginEvent?=?new?LoginEvent();?????

11.?????????????????????????loginEvent.loginUser?=?loginUser;?????

12.?????????????????????????loginEvent.dispatch();?????

13.???????????????????}????????

14.?????????????}?????

15.???????]]>?????

16.?</mx:Script>?????

17.????????

18.??<!–??Validators–>?????

19.??<mx:Array?id=”validators“>?????

20.?????<mx:StringValidator??id=”userNameValidator”?source=”{username}“??property=”text“??required=”true“/>?????

21.?????<mx:StringValidator??id=”passwordValidator”?source=”{password}“??property=”text”?required=”true”?/>?????

22.??</mx:Array>??????????

23.????????

24.????????

25.?<mx:Form?id=”loginForm”?x=”0”?y=”26.???????????<mx:FormItem?label=”Username:”?>?????

27.????????????????<mx:TextInput?id=”username”?/>?????

28.????????????</mx:FormItem>?????

29.????????????<mx:FormItem?label=”Password:”?>?????

30.????????????????<mx:TextInput?id=”password”?displayAsPassword=”31.????????????</mx:FormItem>?????

32.????????????<mx:FormItem?direction=”horizontal”?verticalGap=”15”?paddingTop=”5”?width=”170“>?????

33.????????????????<mx:Button?id=”loginBtn”?label=”Login”?click=”login()”/>?????

34.????????????</mx:FormItem>?????

35.?????</mx:Form>?????

36.?????????????

37.?</mx:Panel>?????

38.???

每一个动作都需要建立一个相应的事件：?
LoginEvent.as:?
1.??package?com.ny.flex.cairngorm.event??????

import?com.adobe.cairngorm.control.CairngormEvent;??????

5.??????????????

import?flash.events.Event;??????

7.?????????

class?LoginEvent?extends?CairngormEvent??????

static?var?LOGIN_EVENT:String?=?“loginEvent”??????

public??var??loginUser:User?;??????

12.???????????????????

13.?????????????public?function?LoginEvent()??????

14.?????????????{??????

15.???????????????????super(LOGIN_EVENT);??????

16.?????????????}??????

18.?????????????override?public?function?clone()?:?Event??????

19.?????????????{??????

20.???????????????????return?new?LoginEvent();??????

21.?????????????}??????

22.???????}??????

23.?}??????

24.?????

每一个事件都要对应于一个命令：?
LoginCommand.as:?
package?com.ny.flex.cairngorm.command??????

import?com.adobe.cairngorm.commands.ICommand;??????

import?com.ny.flex.cairngorm.model.BuddyAppModelLocator;??????

import?com.ny.flex.cairngorm.service.LoginDelegate;??????

9.??????????????

10.???????import?mx.controls.Alert;??????

11.???????import?mx.rpc.IResponder;??????

12.????????

13.???????class?LoginCommand?implements?ICommand,?IResponder??????

14.???????{??????

15.?????????????public?function?LoginCommand()??????

16.?????????????{??????

18.????????

19.?????????????public?function?execute(event:CairngormEvent):void??????

20.?????????????{??????

21.???????????????????var?loginEvent:LoginEvent?=?LoginEvent(event);??????

22.???????????????????var?user:User?=?loginEvent.loginUser;??????

23.???????????????????var?lgoinService?:LoginDelegate???????

24.?=??new?LoginDelegate(this);??????

25.???????????????????lgoinService.authenticate(user);??????

26.?????????????}??????

27.???????????????????

28.?????????????public?function?result(event:Object):29.?????????????{??????

30.???????????????????var?authUser:User?=?User(event.result);??????

31.???????????????????BuddyAppModelLocator.getInstance().loginUser?=?authUser;??????

32.???????????????????BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;??????

33.?????????????}??????

34.???????????????????

35.?????????????public?function?fault(info:Object):36.?????????????{??????

37.???????????????????Alert.show(“Login?Fail?Error?“);??????

38.?????????????}??????

39.???????????????????

40.???????}??????

41.?}??????

42.?????

然后，在Front Controller（前端控制器）中build对应关系：?
addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);?
命令层需要完成商务逻辑，用户需要在执行方法中加入商务逻辑代码：?
1.????????????????????var?lgoinService?:LoginDelegate?=????????

2.??????????????????????????????????????????????3.????????????????????lgoinService.authenticate(user);??????

4.?????

Delegate（代表）用来通过服务层（Service Locator）调用数据源：?
LoginDelegate.as:?
package?com.ny.flex.cairngorm.service??????

import?com.adobe.cairngorm.business.ServiceLocator;??????

7.??????????????

class?LoginDelegate??????

private?var?responder:IResponder;??????

private?var?service:Object;??????

public?function?LoginDelegate(responder?:IResponder){??????

14.???????????????this.service?=???????

15.????????????????????????????ServiceLocator.getInstance()??????

16.?????????????????????????????????????????.getRemoteObject(“buddyRo”);??????

17.???????????????this.responder?=?responder;??????

18.?????????????}??????

19.???????????????????

20.?????????????public?function??authenticate(user:User):void{??????

21.???????????????????var?call:Object?=?service.authenticate(user);??????

22.???????????????????call.addResponder(responder);??????

26.????????

27.????

返回的结果将回复到命令层(LoginCommand.as)的结果方法中，在此方法中Model被更新，然后数据被绑定到结果视图上：?
1.??????????????2.??????????????{??????

3.????????????????????var?authUser:User?=?User(event.result);??????

4.????????????????????BuddyAppModelLocator.getInstance().loginUser?????

5.??????????????????????????????????????????????????????????????????????????????????????=?authUser;??????

6.??????????????????????????BuddyAppModelLocator.getInstance().viewStackSelectedIndex=7.??????????????}??????

8.?????

其它的视图工作流程同上，整个密友列表项目的结构如下图所示：?

（编辑：李大同）

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