Flex的MVC框架结构-Cairngorm

原文地址：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代码  

1. 1.  <EM>package com.ny.flex.cairngorm.model      
2. 2.  {      
3. 3.        import com.ny.flex.cairngorm.vo.User;      
4. 4.              
5. 5.        import mx.collections.ArrayCollection;      
6. 6.              
7. 7.        [Bindable]      
8. 8.        public class BuddyAppModelLocator      
9. 9.        {      
10. 10.             public var buddyList:ArrayCollection=new ArrayCollection();      
11. 11.             public var loginUser:User=new User();      
12. 12.             public var viewStackSelectedindex :int = 0;      
13. 13.                   
14. 14.             static private var __instance:BuddyAppModelLocator=null;      
15. 15.                   
16. 16.             public function getInstance():BuddyAppModelLocator      
17. 17.             {      
18. 18.                   if(__instance == null)      
19. 19.                   {      
20. 20.                         __instance=new BuddyAppModelLocator();      
21. 21.                   }      
22. 22.                   return __instance;      
23. 23.             }      
24. 24.       }      
25. 25. }      
26. 26. </EM>  

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

1.  <EM><EM><?xml version=”1.0″ encoding=”utf-8″?>     

2.  <cairngorm:ServiceLocator xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:cairngorm=”http://www.adobe.com/2006/cairngorm“>     

3.        <mx:RemoteObject id=”buddyRo“  destination=”flexmvcRO” >     

4.                    

5.        </mx:RemoteObject>     

6.  </cairngorm:ServiceLocator>     

7.  </EM></EM>    

上述代码定义了程序将要调用的RemoteObject ，RemoteObject 所调用的Destination需要和remote_config.xml文件中的Destination相一致。在此，Destination的值为“flexmvcRO”。 
BuddyListController.as: 
1.  <EM><EM><STRONG>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. </STRONG></EM></EM>  

很显然，上述的Controller代码是事件和命令的对应处理的地方。 
如何能将这些乱七八糟的东西结合在一起？其Magic的地方是在主页（Main application）上，代码如下： 
BuddList_Main_Cairngorm.mxml: 
1.  <EM><EM><STRONG><?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. </STRONG></EM></EM>