有没有听说过这个奇怪的词汇：“Cairngorm”？如果你的回答是“No” && 你是Flex程序员，哪你就看看自己是不是住在一个井底。J 

Cairngorm是Flex的一个MVC框架结构，名字取自苏格兰的一个山脉。（kao，如果是我建立一个自己的框架结构，我就取名叫：“天安门”。）

有关这个框架，在网络上有很多图表用来讨论。下面是我所理解的框架图表：

使用Cairngorm的第一步是建立框架结构的骨架，包括了三个对象：

Model Locater；

Service Locator；

Front Controller；

Model Locator：承载了组件之间的所有的传递的信息和数据，这是一个Bindable（可绑定的）对象。

Service Locator：定义了与数据源（Httpservice，Webservice，Remoteobject）之间通讯的界面。

Front Controller：建立播送事件（Dispatch event）和命令层（command）之间的对应关系（mapping）。  

看一下相关的代码：

BuddyAppModelLocator.as:

Xml代码

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

package com.ny.flex.cairngorm.model
{
      import com.ny.flex.cairngorm.vo.User;
      
      import mx.collections.ArrayCollection;
      
      [Bindable]
      public class BuddyAppModelLocator
      {
            public var buddyList:ArrayCollection=new ArrayCollection();
            public var loginUser:User=new User();
            public var viewStackSelectedIndex :int = 0;
            
            static private var __instance:BuddyAppModelLocator=null;
            
            static public function getInstance():BuddyAppModelLocator
            {
                  if(__instance == null)
                  {
                        __instance=new BuddyAppModelLocator();
                  }
                  return __instance;
            }
      }
}

在Model Locator代码中，定义了三个public的变量，buddyList：用来存放由数据库获取的密友列表；loginUser：定义一个User类型对象；viewStackSelectedIndex：定义viewStack指向的视窗。

几乎所有的服务层返回的信息都需要在Model Locator中有一个相应的对象。

BuddyServiceLocator.mxml:

Xml代码

1. <?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>  

<?xml version=”1.0″ encoding=”utf-8″?>
<cairngorm:ServiceLocator xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:cairngorm=”http://www.adobe.com/2006/cairngorm“>
      <mx:RemoteObject id=”buddyRo“  destination=”flexmvcRO” >
            
      </mx:RemoteObject>
</cairngorm:ServiceLocator>

上述代码定义了程序将要调用的RemoteObject ，RemoteObject 所调用的Destination需要和remote_config.xml文件中的Destination相一致。在此，Destination的值为“flexmvcRO”。

BuddyListController.as:

Xml代码

1. package com.ny.flex.cairngorm.control   
2. {   
3.       import com.adobe.cairngorm.control.FrontController;   
4.       import com.ny.flex.cairngorm.command.GetBuddyListCommand;   
5.       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.       public class BuddyListController extends FrontController   
10.       {   
11.             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. }  

package com.ny.flex.cairngorm.control
{
      import com.adobe.cairngorm.control.FrontController;
      import com.ny.flex.cairngorm.command.GetBuddyListCommand;
      import com.ny.flex.cairngorm.command.LoginCommand;
      import com.ny.flex.cairngorm.event.GetBuddyListEvent;
      import com.ny.flex.cairngorm.event.LoginEvent;
 
      public class BuddyListController extends FrontController
      {
            public function BuddyListController()
            {
                  super();
                  addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);      
                  addCommand(GetBuddyListEvent.GET_BUDDY_LIST_EVENT,
GetBuddyListCommand);
            }
            
      }
}

很显然，上述的Controller代码是事件和命令的对应处理的地方。

如何能将这些乱七八糟的东西结合在一起？其Magic的地方是在主页（Main application）上，代码如下：

BuddList_Main_Cairngorm.mxml:

Xml代码

1. <?xml version=”1.0″ encoding=”utf-8″?>  
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]  
7.       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>  

<?xml version=”1.0″ encoding=”utf-8″?>
<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%“>
<mx:Script>
      <![CDATA[
            import com.ny.flex.cairngorm.model.BuddyAppModelLocator;
      [Bindable]
      public var myModel:BuddyAppModelLocator = BuddyAppModelLocator.getInstance();
      ]]>
</mx:Script>
 
      <service:BuddyServiceLocator id=”myservice“/>
      <controller:BuddyListController id=”myController“/>
 
    <mx:HBox  horizontalAlign=”center” verticalAlign=”top“  width=”100%” height=”100%” y=”0” x=”0“>
    <mx:ViewStack id=”viewStack“  resizeToContent=”true” selectedIndex=”{myModel.viewStackSelectedIndex}” >
        <views:LoginView  />
        <views:BuddyListView/>
    </mx:ViewStack>
    </mx:HBox>
</mx:Application>

现在用户可以建立视图组件，并从这些组件中播送事件:

LoginView.mxml:

Xml代码

1. <EM>      <![CDATA[  
2.             import com.ny.flex.cairngorm.event.LoginEvent;  
3.             import com.ny.flex.cairngorm.vo.User;  
4.             import mx.validators.Validator;  
5.             private function login():void{  
6.                   if(Validator.validateAll(validators).length == 0){  
7.                         var loginUser:User = new User();  
8.                         loginUser.userName=username.text;  
9.                         loginUser.password=password.text;  
10.                         var loginEvent:LoginEvent = new LoginEvent();  
11.                         loginEvent.loginUser = loginUser;  
12.                         loginEvent.dispatch();  
13.                   }     
14.             }  
15.       ]]>  
16. </mx:Script>  
17.     
18.  <!–  Validators–>  
19.  <mx:Array id=”validators“>  
20.     <mx:StringValidator  id=”userNameValidator” source=”{username}“  property=”text“  required=”true“/>  
21.     <mx:StringValidator  id=”passwordValidator” source=”{password}“  property=”text” required=”true” />  
22.  </mx:Array>       
23.     
24.     
25. <mx:Form id=”loginForm” x=”0” y=”0“>  
26.           <mx:FormItem label=”Username:” >  
27.                <mx:TextInput id=”username” />  
28.            </mx:FormItem>  
29.            <mx:FormItem label=”Password:” >  
30.                <mx:TextInput id=”password” displayAsPassword=”true” />  
31.            </mx:FormItem>  
32.            <mx:FormItem direction=”horizontal” verticalGap=”15” paddingTop=”5” width=”170“>  
33.                <mx:Button id=”loginBtn” label=”Login” click=”login()”/>  
34.            </mx:FormItem>  
35.     </mx:Form>  
36.          
37. </mx:Panel>  
38. </EM>  

      <![CDATA[
            import com.ny.flex.cairngorm.event.LoginEvent;
            import com.ny.flex.cairngorm.vo.User;
            import mx.validators.Validator;
            private function login():void{
                  if(Validator.validateAll(validators).length == 0){
                        var loginUser:User = new User();
                        loginUser.userName=username.text;
                        loginUser.password=password.text;
                        var loginEvent:LoginEvent = new LoginEvent();
                        loginEvent.loginUser = loginUser;
                        loginEvent.dispatch();
                  }   
            }
      ]]>
</mx:Script>
 
 <!–  Validators–>
 <mx:Array id=”validators“>
    <mx:StringValidator  id=”userNameValidator” source=”{username}“  property=”text“  required=”true“/>
    <mx:StringValidator  id=”passwordValidator” source=”{password}“  property=”text” required=”true” />
 </mx:Array>    
 
 
<mx:Form id=”loginForm” x=”0” y=”0“>
          <mx:FormItem label=”Username:” >
               <mx:TextInput id=”username” />
           </mx:FormItem>
           <mx:FormItem label=”Password:” >
               <mx:TextInput id=”password” displayAsPassword=”true” />
           </mx:FormItem>
           <mx:FormItem direction=”horizontal” verticalGap=”15” paddingTop=”5” width=”170“>
               <mx:Button id=”loginBtn” label=”Login” click=”login()”/>
           </mx:FormItem>
    </mx:Form>
      
</mx:Panel>