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

前幾天學(xué)了下Flex的一MVC流行框架Cairngorm，并自己小試牛刀一把，暫作了一網(wǎng)站后臺(tái)，通過項(xiàng)目讓我現(xiàn)在覺得Cairngorm并不是一個(gè)如此神奇的東西，只要我們大家都能按照它走一遍就會(huì)有所收獲，我們就會(huì)對(duì)MVC有個(gè)基本的了解，也會(huì)對(duì)Cairngorm有一個(gè)初步了解，希望大家通過我的這篇文章也能寫出一個(gè)demo出來，當(dāng)然是能在不看我這篇demo或者別人的demo的前提下寫出來啦，呵呵，首先要說的是，這個(gè)框架并不是一定要在lcds下才能運(yùn)行的，所以大家可以簡單的建個(gè)Flex項(xiàng)目就OK了，下面就開始我們的Demo。在最后會(huì)把整個(gè)工程源碼提供出來，歡迎下載。 我們新建工程，有一個(gè)Cairngrom的swc包一定要引進(jìn)去才行的哈，不然是不能成功的，所以大家可以Cairngrom的官方網(wǎng)站上去下載哈，我在這里提供地址，方便大家去下載 先把我剛寫的一個(gè)小demo的部署結(jié)構(gòu)給大家看看， 下面我會(huì)一一講解每個(gè)包中應(yīng)方的類，每個(gè)包的命名都是很規(guī)范的，這樣大家就很清晰的理解你寫的代碼的意思，所以建議大家不要輕易改變這么命名。我先說說這里的包，既然是MVC框架的話，當(dāng)然我們要把哪些是M，哪些是V以及哪些是C給分出來。M主要是模型，我們從命名也許也能猜到了，model和vo應(yīng)該都?xì)w屬于該層了，它主要是存放的是數(shù)據(jù)模型，vo中存的就是普通的數(shù)據(jù)，一般的話都是最小單位的數(shù)據(jù)，是不能進(jìn)行再次分解的數(shù)據(jù)，代碼如下： Java代碼 1. packageorg.rjb.vo 2. 3. importcom.adobe.cairngorm.vo.IValueObject; 4. /一般情況下，我們需要實(shí)現(xiàn)框架中的IValueObject接口 5. publicclassUserVOimplementsIValueObject 6. /存放用戶名 7. publicvaruserName:String; 8. /存放密碼 9. publicvarpassword:String; 10. 11. package org.rjb.voimport com.adobe.cairngorm.vo.IValueObject; /一般情況下，我們需要實(shí)現(xiàn)框架中的IValueObject接口public class UserVO implements IValueObject/存放用戶名public var userName:String;/存放密碼public var password:String;而model中的數(shù)據(jù)一般是包括相應(yīng)的VO對(duì)象以及一些相關(guān)的應(yīng)用變量，比如說系統(tǒng)狀態(tài)什么的，當(dāng)然要按自己的意思來了，并且我們一般把它做成單例類，前面我有篇文章就是講單例模式的，并對(duì)比了java和actionscript3.0中不同的實(shí)現(xiàn)方式，如果還不是很了解的話大家可以去參考下。下面是改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對(duì)象 10. publicvaruserVO:UserVO; 11. /存放一些狀態(tài)變量 12. publicvarstate:String="User-Login" 13. /單例對(duì)象 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對(duì)象public var userVO:UserVO;/存放一些狀態(tài)變量public var state:String="User-Login"/單例對(duì)象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設(shè)成單例類的話我們可以保證系統(tǒng)的數(shù)據(jù)得到同意，并且我們會(huì)把它設(shè)置為綁定模式，可以和接下來說的view包下的視圖類進(jìn)行數(shù)據(jù)綁定。view包下前面說了，是存放相關(guān)的視圖的，可以是as的也可以是mxml的，看大家的意思了，比如說我們可以存放些自定義的組建或擴(kuò)展的組件等，下面是LoginPanel.mxml的代碼: Java代碼 1. <?xmlversion="1.0"encoding="utf-8"?> 2. <mx:Panelxmlns:mx=" 3. <mx:Script> 4. <!CDATA 5. importorg.rjb.model.UserModelLocator; 6. importcom.adobe.cairngorm.control.CairngormEventDispatcher; 7. importorg.rjb.event.LoginEvent; 8. importorg.rjb.vo.UserVO; 9. Bindable 10. privatevarmodelLovator:UserModelLocator=UserModelLocator.getInstance(); 11. /提交的出來方法 12. privatefunctionsubmit():void 13. varuserVO:UserVO=newUserVO; 14. userVO.userName=this.userName.text; 15. userVO.password=this.password.text; 16. varloginEvent:LoginEvent=newLoginEvent(userVO); 17. CairngormEventDispatcher.getInstance().dispatchEvent(loginEvent); 18. 19. /重置的出來方法 20. privatefunctionreset():void 21. this.userName.text="" 22. this.password.text="" 23. 24. /返回的處理方法 25. privatefunctionreturnToLogin():void 26. this.currentState="" 27. modelLovator.state="User-Login" 28. reset(); 29. 30. > 31. </mx:Script> 32. <mx:states> 33. <mx:Statename="success"> 34. <mx:RemoveChildtarget="form1"/> 35. <mx:AddChildposition="lastChild"relativeTo="vbox1"> 36. <mx:Texttext="LOGINSUCCESS"horizontalCenter="0"verticalCenter="35"fontFamily="CourierNew"fontSize="36"color="#EC175D"id="text1"/> 37. </mx:AddChild> 38. <mx:AddChildposition="lastChild"relativeTo="vbox1"> 39. <mx:Buttonx="220"y="205"label="return"click="returnToLogin()"/> 40. </mx:AddChild> 41. </mx:State> 42. <mx:Statename="fail"> 43. <mx:RemoveChildtarget="form1"/> 44. <mx:AddChildposition="lastChild"relativeTo="vbox1"> 45. <mx:Texttext="FAILLOGIN"fontSize="36"fontFamily="Georgia"color="#0F19E2"horizontalCenter="0"verticalCenter="0"/> 46. </mx:AddChild> 47. <mx:AddChildposition="lastChild"relativeTo="vbox1"> 48. <mx:Buttonx="232"y="188"label="return"click="returnToLogin()"/> 49. </mx:AddChild> 50. </mx:State> 51. </mx:states> 52. <mx:VBoxhorizontalAlign="center"verticalAlign="middle"horizontalCenter="0"verticalCenter="0"id="vbox1"> 53. <mx:TextfontSize="18"text="modelLovator.state"enabled="true"id="info"/> 54. <mx:FormhorizontalCenter="4"verticalCenter="1"id="form1"> 55. <mx:FormItemlabel="username:"horizontalAlign="center"required="true"> 56. <mx:TextInputid="userName"text="ljp"/> 57. </mx:FormItem> 58. <mx:FormItemlabel="password:"horizontalAlign="center"required="true"> 59. <mx:TextInputdisplayAsPassword="true"id="password"text="pass"/> 60. </mx:FormItem> 61. <mx:FormItem> 62. <mx:HBox> 63. <mx:Buttonlabel="submit"click="submit()"/> 64. <mx:Buttonlabel="reset"click="reset()"/> 65. </mx:HBox> 66. 67. </mx:FormItem> 68. </mx:Form> 69. </mx:VBox> 70. </mx:Panel><?xml version="1.0" encoding="utf-8"?><mx:Panel xmlns:mx=" layout="absolute" width="400" height="300" horizontalAlign="center" verticalAlign="middle"><mx:Script><!CDATAimport org.rjb.model.UserModelLocator;import com.adobe.cairngorm.control.CairngormEventDispatcher;import org.rjb.event.LoginEvent;import org.rjb.vo.UserVO;Bindableprivate var modelLovator:UserModelLocator=UserModelLocator.getInstance();/提交的出來方法private function submit():voidvar userVO:UserVO=new UserVO;userVO.userName=this.userName.text;userVO.password=this.password.text;var loginEvent:LoginEvent=new LoginEvent(userVO);CairngormEventDispatcher.getInstance().dispatchEvent(loginEvent);/重置的出來方法private function reset():voidthis.userName.text=""this.password.text=""/返回的處理方法private function returnToLogin():voidthis.currentState=""modelLovator.state="User-Login"reset();></mx:Script><mx:states><mx:State name="success"><mx:RemoveChild target="form1"/><mx:AddChild position="lastChild" relativeTo="vbox1"><mx:Text text="LOGIN SUCCESS" horizontalCenter="0" verticalCenter="35" fontFamily="Courier New" fontSize="36" color="#EC175D" id="text1"/></mx:AddChild><mx:AddChild position="lastChild" relativeTo="vbox1"><mx:Button x="220" y="205" label="return" click="returnToLogin()"/></mx:AddChild></mx:State><mx:State name="fail"><mx:RemoveChild target="form1"/><mx:AddChild position="lastChild" relativeTo="vbox1"><mx:Text text="FAIL LOGIN" fontSize="36" fontFamily="Georgia" color="#0F19E2" horizontalCenter="0" verticalCenter="0"/></mx:AddChild><mx:AddChild position="lastChild" relativeTo="vbox1"><mx:Button x="232" y="188" label="return" click="returnToLogin()"/></mx:AddChild></mx:State></mx:states><mx:VBox horizontalAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="0" id="vbox1"><mx:Text fontSize="18" text="modelLovator.state" enabled="true" id="info"/><mx:Form horizontalCenter="4" verticalCenter="1" id="form1"><mx:FormItem label="username:" horizontalAlign="center" required="true"><mx:TextInput id="userName" text="ljp"/></mx:FormItem><mx:FormItem label="password:" horizontalAlign="center" required="true"><mx:TextInput displayAsPassword="true" id="password" text="pass"/></mx:FormItem><mx:FormItem> <mx:HBox> <mx:Button label="submit" click="submit()"/> <mx:Button label="reset" click="reset()"/> </mx:HBox></mx:FormItem> </mx:Form></mx:VBox></mx:Panel>接下來我們說說event包，其實(shí)這個(gè)包我們和接下來說的commands包合并，我在這就分開了，為的是使結(jié)構(gòu)更加清晰哈，在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. /我們可以在這里加入額外的變量，當(dāng)然是我們需要的哈 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"/我們可以在這里加入額外的變量，當(dāng)然是我們需要的哈public var userVO:UserVO;public function LoginEvent(userVO:UserVO)super(LOGIN_EVENT);this.userVO=userVO;override public function clone():Eventreturn new LoginEvent(userVO);好了，我們繼續(xù)說說在command包下的東東哈，在這里的話主要是存放我們自定義的事件一旦發(fā)生的時(shí)候，我們究竟要怎么處理它，所以在這下面是我們自定義的類似監(jiān)聽事件的類，但是在這些類中我們一般只相當(dāng)于一個(gè)事件處理的接口，我們會(huì)把真正的處理轉(zhuǎn)交給business中的代理類中，尤其是進(jìn)行遠(yuǎn)程調(diào)用的時(shí)候最常用，下面是我們的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. /引用單例數(shù)據(jù)模型 18. publicvaruserModelLocator:UserModelLocator=UserModelLocator.getInstance(); 19. 20. publicfunctionLoginCommand() 21. 22. 23. 24. /此處為處理入口，一般我們轉(zhuǎn)交給代理類處理 25. publicfunctionexecute(event:CairngormEvent):void 26. varloginDelegate:LoginDelegate=newLoginDelegate(this); 27. varloginEvent:LoginEvent=LoginEvent(event); 28. loginDelegate.login(loginEvent.userVO); 29. 30. /返回的結(jié)果進(jìn)行處理 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. /處理過程出錯(cuò)時(shí)的處理 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/引用單例數(shù)據(jù)模型public var userModelLocator:UserModelLocator=UserModelLocator.getInstance();public function LoginCommand() /此處為處理入口，一般我們轉(zhuǎn)交給代理類處理public function execute(event:CairngormEvent):voidvar loginDelegate:LoginDelegate=new LoginDelegate(this);var loginEvent:LoginEvent=LoginEvent(event);loginDelegate.login(loginEvent.userVO);/返回的結(jié)果進(jìn)行處理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"/處理過程出錯(cuò)時(shí)的處理public function fault(info:Object):voidmx.controls.Alert.show(info+"");再說說這個(gè)控制類，也就是control包下的類，這個(gè)下面主要是負(fù)責(zé)分發(fā)事件的，我們要把我們的自定義事件和我們的相應(yīng)的處理方法關(guān)聯(lián)起來，都是在這里進(jìn)行的，通常一個(gè)類就可以了，下面是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);最后我們就說說我們的代理類哈，代理類前面已經(jīng)說了是我們的真正的處理類，我們把視圖區(qū)的數(shù)據(jù)傳到這里進(jìn)行處理，最好把結(jié)果返回到相應(yīng)的IResponsder接口實(shí)現(xiàn)類中，下面是我們的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);好了，基本介紹完了，我們可以測(cè)試下了哈，下面是測(cè)試代碼CairngormTest.mxml： Java代碼 1. <?xmlversion="1.0"encoding="utf-8"?> 2. <mx:Applicationxmlns:mx="3. xmlns:view="org.rjb.view.*"4. xmlns:control="org.rjb.control.*"5. > 6. <view:LoginPanelid="loginPanel"verticalCenter="0"horizontalCenter="0"/> 7. <control:LoginControlid="control"/> 8. 9. </mx:Application><?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=" layout="absolute" xmlns:view="org.rjb.view.*" xmlns:control="org.rjb.control.*" ><view:LoginPanel id="loginPanel" verticalCenter="0" horizontalCenter="0"/><control:LoginControl id="control" /></mx:Application>, 看看效果吧，當(dāng)我們運(yùn)行的時(shí)候界面是這樣的： 當(dāng)我們點(diǎn)擊submit時(shí)如果成功則出現(xiàn)的結(jié)果是這樣的： 當(dāng)我們輸入的賬號(hào)密碼錯(cuò)誤時(shí)，出現(xiàn)如下的界面： 好了，這Cairngorm的小demo就到這了，希望能讓大家有所收獲.