flex流行mvc框架之cairngorm小试牛刀

《flex流行mvc框架之cairngorm小试牛刀》由会员分享，可在线阅读，更多相关《flex流行mvc框架之cairngorm小试牛刀（11页珍藏版）》请在装配图网上搜索。

1、前几天学了下Flex的一MVC流行框架Cairngorm，并自己小试牛刀一把，暂作了一网站后台，通过项目让我现在觉得Cairngorm并不是一个如此神奇的东西，只要我们大家都能按照它走一遍就会有所收获，我们就会对MVC有个基本的了解，也会对Cairngorm有一个初步了解，希望大家通过我的这篇文章也能写出一个demo出来，当然是能在不看我这篇demo或者别人的demo的前提下写出来啦，呵呵，首先要说的是，这个框架并不是一定要在lcds下才能运行的，所以大家可以简单的建个Flex项目就OK了，下面就开始我们的Demo。在最后会把整个工程源码提供出来，欢迎下载。 我们新建工程，有一个Cairngr

2、om的swc包一定要引进去才行的哈，不然是不能成功的，所以大家可以Cairngrom的官方网站上去下载哈，我在这里提供地址，方便大家去下载 先把我刚写的一个小demo的部署结构给大家看看， 下面我会一一讲解每个包中应方的类，每个包的命名都是很规范的，这样大家就很清晰的理解你写的代码的意思，所以建议大家不要轻易改变这么命名。我先说说这里的包，既然是MVC框架的话，当然我们要把哪些是M，哪些是V以及哪些是C给分出来。M主要是模型，我们从命名也许也能猜到了，model和vo应该都归属于该层了，它主要是存放的是数据模型，vo中存的就是普通的数据，一般的话都是最小单位的数据，是不能进行再次分解的数据，代

3、码如下： Java代码 1. packageorg.rjb.vo 2. 3. importcom.adobe.cairngorm.vo.IValueObject; 4. /一般情况下，我们需要实现框架中的IValueObject接口 5. publicclassUserVOimplementsIValueObject 6. /存放用户名 7. publicvaruserName:String; 8. /存放密码 9. publicvarpassword:String; 10. 11. package org.rjb.voimport com.adobe.cairngorm.vo.IValueO

4、bject; /一般情况下，我们需要实现框架中的IValueObject接口public class UserVO implements IValueObject/存放用户名public var userName:String;/存放密码public var password:String;而model中的数据一般是包括相应的VO对象以及一些相关的应用变量，比如说系统状态什么的，当然要按自己的意思来了，并且我们一般把它做成单例类，前面我有篇文章就是讲单例模式的，并对比了java和actionscript3.0中不同的实现方式，如果还不是很了解的话大家可以去参考下。下面是改model类： Jav

5、a代码 1. packageorg.rjb.model 2. 3. importcom.adobe.cairngorm.model.ModelLocator; 4. 5. importorg.rjb.vo.UserVO; 6. Bindable 7. publicclassUserModelLocatorimplementsModelLocator 8. 9. /存放vo对象 10. publicvaruserVO:UserVO; 11. /存放一些状态变量 12. publicvarstate:String=User-Login; 13. /单例对象 14. privatestaticvar

6、modelLocator:UserModelLocator; 15. 16. publicstaticfunctiongetInstance():UserModelLocator 17. if(modelLocator=null) 18. modelLocator=newUserModelLocator(newSingleClass(); 19. 20. returnmodelLocator; 21. 22. 23. publicfunctionUserModelLocator(single:SingleClass) 24. if(single=null) 25. thrownewError(

7、YouCanOnlyHaveOneUserModelLocator); 26. 27. 28. 29. 30. 31. classSingleClasspackage org.rjb.modelimport com.adobe.cairngorm.model.ModelLocator;import org.rjb.vo.UserVO; Bindablepublic class UserModelLocator implements ModelLocator/存放vo对象public var userVO:UserVO;/存放一些状态变量public var state:String=User-

8、Login;/单例对象private static var modelLocator:UserModelLocator;public static function getInstance():UserModelLocatorif(modelLocator=null)modelLocator=new UserModelLocator(new SingleClass();return modelLocator;public function UserModelLocator(single:SingleClass)if(single=null)throw new Error( You Can On

9、ly Have One UserModelLocator );class SingleClass设成单例类的话我们可以保证系统的数据得到同意，并且我们会把它设置为绑定模式，可以和接下来说的view包下的视图类进行数据绑定。view包下前面说了，是存放相关的视图的，可以是as的也可以是mxml的，看大家的意思了，比如说我们可以存放些自定义的组建或扩展的组件等，下面是LoginPanel.mxml的代码: Java代码 1. 2. 3. 4. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50

10、. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 接下来我们说说event包，其实这个包我们和接下来说的commands包合并，我在这就分开了，为的是使结构更加清晰哈，在event包下我们存放的是我们自定义的事件，比如下面的LoginEvent.as: Java代码 1. packageorg.rjb.event 2. 3. importcom.adobe.cairngorm.control.CairngormEvent; 4. 5. importflash.events.Even

11、t; 6. 7. importorg.rjb.vo.UserVO; 8. 9. publicclassLoginEventextendsCairngormEvent 10. 11. /定义事件类型常量 12. publicstaticconstLOGIN_EVENT:String=login; 13. /我们可以在这里加入额外的变量，当然是我们需要的哈 14. publicvaruserVO:UserVO; 15. publicfunctionLoginEvent(userVO:UserVO) 16. 17. super(LOGIN_EVENT); 18. this.userVO=userVO

12、; 19. 20. 21. overridepublicfunctionclone():Event 22. 23. returnnewLoginEvent(userVO); 24. 25. 26. package org.rjb.eventimport com.adobe.cairngorm.control.CairngormEvent;import flash.events.Event;import org.rjb.vo.UserVO;public class LoginEvent extends CairngormEvent/定义事件类型常量public static const LOGI

13、N_EVENT:String=login;/我们可以在这里加入额外的变量，当然是我们需要的哈public var userVO:UserVO;public function LoginEvent(userVO:UserVO)super(LOGIN_EVENT);this.userVO=userVO;override public function clone():Eventreturn new LoginEvent(userVO);好了，我们继续说说在command包下的东东哈，在这里的话主要是存放我们自定义的事件一旦发生的时候，我们究竟要怎么处理它，所以在这下面是我们自定义的类似监听事件的类

14、，但是在这些类中我们一般只相当于一个事件处理的接口，我们会把真正的处理转交给business中的代理类中，尤其是进行远程调用的时候最常用，下面是我们的LoginCommand类： Java代码 1. packagemand 2. 3. importmands.ICommand; 4. importcom.adobe.cairngorm.control.CairngormEvent; 5. 6. importmx.controls.Alert; 7. importmx.core.Application; 8. importmx.rpc.IResponder; 9. importmx.rpc.ev

15、ents.ResultEvent; 10. 11. importorg.rjb.business.LoginDelegate; 12. importorg.rjb.event.LoginEvent; 13. importorg.rjb.model.UserModelLocator; 14. 15. publicclassLoginCommandimplementsICommand,IResponder 16. 17. /引用单例数据模型 18. publicvaruserModelLocator:UserModelLocator=UserModelLocator.getInstance();

16、19. 20. publicfunctionLoginCommand() 21. 22. 23. 24. /此处为处理入口，一般我们转交给代理类处理 25. publicfunctionexecute(event:CairngormEvent):void 26. varloginDelegate:LoginDelegate=newLoginDelegate(this); 27. varloginEvent:LoginEvent=LoginEvent(event); 28. loginDelegate.login(loginEvent.userVO); 29. 30. /返回的结果进行处理 31

17、. publicfunctionresult(data:Object):void 32. varresult:String=data.toString(); 33. if(result=OK) 34. mx.core.Application.application.loginPanel.currentState=success; 35. userModelLocator.state=Login-Result; 36. else 37. mx.core.Application.application.loginPanel.currentState=fail; 38. userModelLocat

18、or.state=Login-Result; 39. 40. 41. /处理过程出错时的处理 42. publicfunctionfault(info:Object):void 43. mx.controls.Alert.show(info+); 44. 45. 46. 47. package mandimport mands.ICommand;import com.adobe.cairngorm.control.CairngormEvent;import mx.controls.Alert;import mx.core.Application;import mx.rpc.IResponder

19、;import mx.rpc.events.ResultEvent;import org.rjb.business.LoginDelegate;import org.rjb.event.LoginEvent;import org.rjb.model.UserModelLocator;public class LoginCommand implements ICommand, IResponder/引用单例数据模型public var userModelLocator:UserModelLocator=UserModelLocator.getInstance();public function

20、LoginCommand() /此处为处理入口，一般我们转交给代理类处理public function execute(event:CairngormEvent):voidvar loginDelegate:LoginDelegate=new LoginDelegate(this);var loginEvent:LoginEvent=LoginEvent(event);loginDelegate.login(loginEvent.userVO);/返回的结果进行处理public function result(data:Object):voidvar result:String=data.to

21、String();if(result=OK)mx.core.Application.application.loginPanel.currentState=success;userModelLocator.state=Login-Result;elsemx.core.Application.application.loginPanel.currentState=fail; userModelLocator.state=Login-Result;/处理过程出错时的处理public function fault(info:Object):voidmx.controls.Alert.show(inf

22、o+);再说说这个控制类，也就是control包下的类，这个下面主要是负责分发事件的，我们要把我们的自定义事件和我们的相应的处理方法关联起来，都是在这里进行的，通常一个类就可以了，下面是LoginControl.as的源码： Java代码 1. packageorg.rjb.control 2. 3. importcom.adobe.cairngorm.control.FrontController; 4. 5. importorg.rjb.event.LoginEvent; 6. importmand.LoginCommand; 7. 8. publicclassLoginControlex

23、tendsFrontController 9. 10. publicfunctionLoginControl() 11. this.initialiseCommands(); 12. 13. 14. publicfunctioninitialiseCommands():void 15. this.addCommand(LoginEvent.LOGIN_EVENT,LoginCommand); 16. 17. 18. package org.rjb.controlimport com.adobe.cairngorm.control.FrontController;import org.rjb.e

24、vent.LoginEvent; import mand.LoginCommand; public class LoginControl extends FrontControllerpublic function LoginControl()this.initialiseCommands();public function initialiseCommands():voidthis.addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);最后我们就说说我们的代理类哈，代理类前面已经说了是我们的真正的处理类，我们把视图区的数据传到这里进行处理，最好把结果

25、返回到相应的IResponsder接口实现类中，下面是我们的LoginDelegate.as的源码： Java代码 1. packageorg.rjb.business 2. 3. importmx.rpc.IResponder; 4. 5. importorg.rjb.vo.UserVO; 6. 7. publicclassLoginDelegate 8. 9. publicvarresponder:IResponder; 10. publicfunctionLoginDelegate(responder:IResponder) 11. this.responder=responder; 1

26、2. 13. publicfunctionlogin(userVO:UserVO):void 14. varresult:Object; 15. if(userVO.userName=ljp&userVO.password=pass) 16. result=OK; 17. else 18. result=Fail; 19. 20. responder.result(result); 21. 22. 23. package org.rjb.businessimport mx.rpc.IResponder;import org.rjb.vo.UserVO;public class LoginDel

27、egatepublic var responder:IResponder;public function LoginDelegate(responder:IResponder)this.responder=responder;public function login(userVO:UserVO):voidvar result:Object;if(userVO.userName=ljp&userVO.password=pass)result=OK;elseresult=Fail;responder.result(result);好了，基本介绍完了，我们可以测试下了哈，下面是测试代码CairngormTest.mxml： Java代码 1. 2. 6. 7. 8. 9. , 看看效果吧，当我们运行的时候界面是这样的： 当我们点击submit时如果成功则出现的结果是这样的： 当我们输入的账号密码错误时，出现如下的界面： 好了，这Cairngorm的小demo就到这了，希望能让大家有所收获.