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

前几天学了下Flex的一MVC流行框架Cairngorm，并自己小试牛刀一把，暂作了一网站后台，通过项目让我现在觉得Cairngorm并不是一个如此神奇的东西，只要我们大家都能按照它走一遍就会有所收获，我们就会对MVC有个基本的了解，也会对Cairngorm有一个初步了解，希望大家通过我的这篇文章也能写出一个demo出来，当然是能在不看我这篇demo或者别人的demo的前提下写出来啦，呵呵，首先要说的是，这个框架并不是一定要在lcds下才能运行的，所以大家可以简单的建个Flex项目就OK了，下面就开始我们的Demo。在最后会把整个工程源码提供出来，欢迎下载。 我们新建工程，有一个Cairngrom的swc包一定要引进去才行的哈，不然是不能成功的，所以大家可以Cairngrom的官方网站上去下载哈，我在这里提供地址，方便大家去下载 先把我刚写的一个小demo的部署结构给大家看看， 下面我会一一讲解每个包中应方的类，每个包的命名都是很规范的，这样大家就很清晰的理解你写的代码的意思，所以建议大家不要轻易改变这么命名。我先说说这里的包，既然是MVC框架的话，当然我们要把哪些是M，哪些是V以及哪些是C给分出来。M主要是模型，我们从命名也许也能猜到了，model和vo应该都归属于该层了，它主要是存放的是数据模型，vo中存的就是普通的数据，一般的话都是最小单位的数据，是不能进行再次分解的数据，代码如下： 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.IValueObject; /一般情况下，我们需要实现框架中的IValueObject接口public class UserVO implements IValueObject/存放用户名public var userName:String;/存放密码public var password:String;而model中的数据一般是包括相应的VO对象以及一些相关的应用变量，比如说系统状态什么的，当然要按自己的意思来了，并且我们一般把它做成单例类，前面我有篇文章就是讲单例模式的，并对比了java和actionscript3.0中不同的实现方式，如果还不是很了解的话大家可以去参考下。下面是改model类： Java代码 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. privatestaticvarmodelLocator: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(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-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 Only Have One UserModelLocator );class SingleClass设成单例类的话我们可以保证系统的数据得到同意，并且我们会把它设置为绑定模式，可以和接下来说的view包下的视图类进行数据绑定。view包下前面说了，是存放相关的视图的，可以是as的也可以是mxml的，看大家的意思了，比如说我们可以存放些自定义的组建或扩展的组件等，下面是LoginPanel.mxml的代码: Java代码 1. 2. mx:Panelxmlns:mx= 3. 4. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 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.Event; 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; 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 LOGIN_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包下的东东哈，在这里的话主要是存放我们自定义的事件一旦发生的时候，我们究竟要怎么处理它，所以在这下面是我们自定义的类似监听事件的类，但是在这些类中我们一般只相当于一个事件处理的接口，我们会把真正的处理转交给business中的代理类中，尤其是进行远程调用的时候最常用，下面是我们的LoginCommand类： Java代码 1. mand 2. 3. mands.ICommand; 4. importcom.adobe.cairngorm.control.CairngormEvent; 5. 6. importmx.controls.Alert; 7. importmx.core.Application; 8. importmx.rpc.IResponder; 9. importmx.rpc.events.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(); 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. 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. userModelLocator.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;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 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.toString();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(info+);再说说这个控制类，也就是control包下的类，这个下面主要是负责分发事件的，我们要把我们的自定义事件和我们的相应的处理方法关联起来，都是在这里进行的，通常一个类就可以了，下面是LoginControl.as的源码： Java代码 1. packageorg.rjb.control 2. 3. importcom.adobe.cairngorm.control.FrontController; 4. 5. importorg.rjb.event.LoginEvent; 6. mand.LoginCommand; 7. 8. publicclassLoginControlextendsFrontController 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.event.LoginEvent; import mand.LoginCommand; public class LoginControl extends FrontControllerpublic function LoginControl()this.initialiseCommands();public function initialiseCommands():voidthis.addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);最后我们就说说我们的代理类哈，代理类前面已经说了是我们的真正的处理类，我们把视图区的数据传到这里进行处理，最好把结果返回到相应的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; 12. 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 LoginDelegatepublic 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就到这了，希望能让大家有所收获.