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

《flex流行mvc框架之cairngorm小試牛刀》由會員分享，可在線閱讀，更多相關(guān)《flex流行mvc框架之cairngorm小試牛刀（10頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、前幾天學(xué)了下Flex的一MVC流行框架Cairngorm，并自己小試牛刀一把，暫作了一網(wǎng)站后臺，通過項目讓我現(xiàn)在覺得Cairngorm并不是一個如此神奇的東西，只要我們大家都能按照它走一遍就會有所收獲，我們就會對MVC有個基本的了解，也會對Cairngorm有一個初步了解，希望大家通過我的這篇文章也能寫出一個demo出來，當(dāng)然是能在不看我這篇demo或者別人的demo的前提下寫出來啦，呵呵，首先要說的是，這個框架并不是一定要在lcds下才能運行的，所以大家可以簡單的建個Flex項目就OK了，下面就開始我們的Demo。在最后會把整個工程源碼提供出來，歡迎下載。 我們新建工程，有一個Cairngr

2、om的swc包一定要引進去才行的哈，不然是不能成功的，所以大家可以Cairngrom的官方網(wǎng)站上去下載哈，我在這里提供地址，方便大家去下載 先把我剛寫的一個小demo的部署結(jié)構(gòu)給大家看看， 下面我會一一講解每個包中應(yīng)方的類，每個包的命名都是很規(guī)范的，這樣大家就很清晰的理解你寫的代碼的意思，所以建議大家不要輕易改變這么命名。我先說說這里的包，既然是MVC框架的話，當(dāng)然我們要把哪些是M，哪些是V以及哪些是C給分出來。M主要是模型，我們從命名也許也能猜到了，model和vo應(yīng)該都歸屬于該層了，它主要是存放的是數(shù)據(jù)模型，vo中存的就是普通的數(shù)據(jù)，一般的話都是最小單位的數(shù)據(jù)，是不能進行再次分解的數(shù)據(jù)，代

3、碼如下： Java代碼 1. packageorg.rjb.vo 2. 3. importcom.adobe.cairngorm.vo.IValueObject; 4. /一般情況下，我們需要實現(xiàn)框架中的IValueObject接口 5. publicclassUserVOimplementsIValueObject 6. /存放用戶名 7. publicvaruserName:String; 8. /存放密碼 9. publicvarpassword:String; 10. 11. package org.rjb.voimport com.adobe.cairngorm.vo.IValueO

4、bject; /一般情況下，我們需要實現(xiàn)框架中的IValueObject接口public class UserVO implements IValueObject/存放用戶名public var userName:String;/存放密碼public var password:String;而model中的數(shù)據(jù)一般是包括相應(yīng)的VO對象以及一些相關(guān)的應(yīng)用變量，比如說系統(tǒng)狀態(tài)什么的，當(dāng)然要按自己的意思來了，并且我們一般把它做成單例類，前面我有篇文章就是講單例模式的，并對比了java和actionscript3.0中不同的實現(xiàn)方式，如果還不是很了解的話大家可以去參考下。下面是改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. /存放一些狀態(tài)變量 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;/存放一些狀態(tài)變量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設(shè)成單例類的話我們可以保證系統(tǒng)的數(shù)據(jù)得到同意，并且我們會把它設(shè)置為綁定模式，可以和接下來說的view包下的視圖類進行數(shù)據(jù)綁定。view包下前面說了，是存放相關(guān)的視圖的，可以是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.

10、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包合并，我在這就分開了，為的是使結(jié)構(gòu)更加清晰哈，在event包下我們存放的是我們自定義的事件，比如下面的LoginEvent.as: Java代碼 1. packageorg.rjb.event 2. 3. importcom.adobe.cairngorm.control.CairngormEvent; 4. 5. impor

11、tflash.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.

12、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

13、 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ā)生的時候，我們究竟要怎么處理它，所以在

14、這下面是我們自定義的類似監(jiān)聽事件的類，但是在這些類中我們一般只相當(dāng)于一個事件處理的接口，我們會把真正的處理轉(zhuǎn)交給business中的代理類中，尤其是進行遠程調(diào)用的時候最常用，下面是我們的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.r

15、pc.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.getInstanc

16、e(); 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é)果進行

17、處理 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. userModel

18、Locator.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.IResp

19、onder;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 func

20、tion LoginCommand() /此處為處理入口，一般我們轉(zhuǎn)交給代理類處理public function execute(event:CairngormEvent):voidvar loginDelegate:LoginDelegate=new LoginDelegate(this);var loginEvent:LoginEvent=LoginEvent(event);loginDelegate.login(loginEvent.userVO);/返回的結(jié)果進行處理public function result(data:Object):voidvar result:String=da

21、ta.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.sho

22、w(info+);再說說這個控制類，也就是control包下的類，這個下面主要是負責(zé)分發(fā)事件的，我們要把我們的自定義事件和我們的相應(yīng)的處理方法關(guān)聯(lián)起來，都是在這里進行的，通常一個類就可以了，下面是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. publicclassLoginControlext

23、endsFrontController 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.ev

24、ent.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ù)傳到這里進行處理，最好把結(jié)果返

25、回到相應(yīng)的IResponsder接口實現(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

26、. 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 LoginDele

27、gatepublic 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. , 看看效果吧，當(dāng)我們運行的時候界面是這樣的： 當(dāng)我們點擊submit時如果成功則出現(xiàn)的結(jié)果是這樣的： 當(dāng)我們輸入的賬號密碼錯誤時，出現(xiàn)如下的界面： 好了，這Cairngorm的小demo就到這了，希望能讓大家有所收獲.