Flex流行MVC框架之Cairngorm小试牛刀

   前几天学了下Flex的一MVC流行框架Cairngorm，并自己小试牛刀一把，暂作了一网站后台，通过项目让我现在觉得Cairngorm并不是一个如此神奇的东西，只要我们大家都能按照它走一遍就会有所收获，我们就会对MVC有个基本的了解，也会对Cairngorm有一个初步了解，希望大家通过我的这篇文章也能写出一个demo出来，当然是能在不看我这篇demo或者别人的demo的前提下写出来啦，呵呵，首先要说的是，这个框架并不是一定要在lcds下才能运行的，所以大家可以简单的建个Flex项目就OK了，下面就开始我们的Demo。在最后会把整个工程源码提供出来，欢迎下载。
    我们新建工程，有一个Cairngrom的swc包一定要引进去才行的哈，不然是不能成功的，所以大家可以Cairngrom的官方网站上去下载哈，我在这里提供地址，方便大家去下载http://labs.adobe.com/wiki/index.php/Cairngorm，还有更多的关于Cairngorm框架的资料可以访问http://www,cairngormdoc.org，欢迎和大家一起讨论该框架，欢迎大家加我QQ:234281357，也希望能从大家那学到许多东西。
    先把我刚写的一个小demo的部署结构给大家看看，

下面我会一一讲解每个包中应方的类，每个包的命名都是很规范的，这样大家就很清晰的理解你写的代码的意思，所以建议大家不要轻易改变这么命名。我先说说这里的包，既然是MVC框架的话，当然我们要把哪些是M，哪些是V以及哪些是C给分出来。M主要是模型，我们从命名也许也能猜到了，model和vo应该都归属于该层了，它主要是存放的是数据模型，vo中存的就是普通的数据，一般的话都是最小单位的数据，是不能进行再次分解的数据，代码如下：

package org.rjb.vo
{
	import 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类：

package org.rjb.model
{
	import com.adobe.cairngorm.model.ModelLocator;
	
	import org.rjb.vo.UserVO;
    [Bindable]
	public class UserModelLocator implements ModelLocator
	{
		//存放vo对象
		public var userVO:UserVO;
		//存放一些状态变量
		public var state:String="User---Login";
		//单例对象
		private static var modelLocator:UserModelLocator;
		
		public static function getInstance():UserModelLocator{
			if(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的代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" horizontalAlign="center" verticalAlign="middle">
	<mx:Script>
		<![CDATA[
			import org.rjb.model.UserModelLocator;
			import com.adobe.cairngorm.control.CairngormEventDispatcher;
			import org.rjb.event.LoginEvent;
			import org.rjb.vo.UserVO;
			[Bindable]
			private var modelLovator:UserModelLocator=UserModelLocator.getInstance();
			//提交的出来方法
			private function submit():void{
				var 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():void{
				this.userName.text="";
				this.password.text="";
			}
			//返回的处理方法
			private function returnToLogin():void{
				this.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&#xa;" 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&#xa;" 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包，其实这个包我们和接下来说的commands包合并，我在这就分开了，为的是使结构更加清晰哈，在event包下我们存放的是我们自定义的事件，比如下面的LoginEvent.as:

package org.rjb.event
{
	import 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():Event
		{
			return new LoginEvent(userVO);
		}			
	}
}

好了，我们继续说说在command包下的东东哈，在这里的话主要是存放我们自定义的事件一旦发生的时候，我们究竟要怎么处理它，所以在这下面是我们自定义的类似监听事件的类，但是在这些类中我们一般只相当于一个事件处理的接口，我们会把真正的处理转交给business中的代理类中，尤其是进行远程调用的时候最常用，下面是我们的LoginCommand类：

package org.rjb.command
{
	import com.adobe.cairngorm.commands.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):void{
			var loginDelegate:LoginDelegate=new LoginDelegate(this);
			var loginEvent:LoginEvent=LoginEvent(event);
			loginDelegate.login(loginEvent.userVO);
		}
		//返回的结果进行处理
		public function result(data:Object):void{
			var result:String=data.toString();
			if(result=="OK"){
				mx.core.Application.application.loginPanel.currentState="success";
				userModelLocator.state="Login---Result";
			}else{
				mx.core.Application.application.loginPanel.currentState="fail";
			    userModelLocator.state="Login---Result";
			}
		}
		//处理过程出错时的处理
		public function fault(info:Object):void{
			mx.controls.Alert.show(info+"");
		}
		
	}
}

再说说这个控制类，也就是control包下的类，这个下面主要是负责分发事件的，我们要把我们的自定义事件和我们的相应的处理方法关联起来，都是在这里进行的，通常一个类就可以了，下面是LoginControl.as的源码：

package org.rjb.control
{
	import com.adobe.cairngorm.control.FrontController;
	
	import org.rjb.event.LoginEvent;
    import org.rjb.command.LoginCommand;
    
	public class LoginControl extends FrontController
	{
		public function LoginControl(){
			this.initialiseCommands();
		}
		
		public function initialiseCommands():void{
			this.addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);
		}
	}
}

最后我们就说说我们的代理类哈，代理类前面已经说了是我们的真正的处理类，我们把视图区的数据传到这里进行处理，最好把结果返回到相应的IResponsder接口实现类中，下面是我们的LoginDelegate.as的源码：

package org.rjb.business
{
	import mx.rpc.IResponder;
	
	import org.rjb.vo.UserVO;
	
	public class LoginDelegate
	{
		public var responder:IResponder;
		public function LoginDelegate(responder:IResponder){
			this.responder=responder;
		}
		public function login(userVO:UserVO):void{
			var result:Object;
			if(userVO.userName=="ljp"&&userVO.password=="pass"){
				result="OK";
			}else{
				result="Fail";
			}
			responder.result(result);
		}
	}
}

好了，基本介绍完了，我们可以测试下了哈，下面是测试代码CairngormTest.mxml：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 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>

,
看看效果吧，当我们运行的时候界面是这样的：



当我们点击submit时如果成功则出现的结果是这样的：



当我们输入的账号密码错误时，出现如下的界面：


好了，这Cairngorm的小demo就到这了，希望能让大家有所收获...

评论

11 楼 surpass_li 2009-10-23  

学习了,谢谢分享

10 楼 dxm1986 2009-09-22  

dxm1986 写道

假笨这个地方怎么弄的呀?
LoginEvent.as中的构造函数是这样的:
public function LoginEvent(userVO:UserVO)  

LoginCommand类中,

public function execute(event:CairngormEvent):void{  
            var loginDelegate:LoginDelegate=new LoginDelegate (this);  
            var loginEvent:LoginEvent=LoginEvent(event);  
            loginDelegate.login(loginEvent.userVO);  
        }  
黑体部份传进去的参数类型是不是有点问题呀?

呵呵.知道看了,看错了.没有一个new

9 楼 dxm1986 2009-09-22  

假笨这个地方怎么弄的呀?
LoginEvent.as中的构造函数是这样的:
public function LoginEvent(userVO:UserVO)  

LoginCommand类中,

public function execute(event:CairngormEvent):void{  
            var loginDelegate:LoginDelegate=new LoginDelegate (this);  
            var loginEvent:LoginEvent=LoginEvent(event);  
            loginDelegate.login(loginEvent.userVO);  
        }  
黑体部份传进去的参数类型是不是有点问题呀?

8 楼 jiangyaning8 2009-01-06  

兄弟不错太棒了 捧场!

7 楼 wuqiangjun_ql 2008-12-10  

先学习一下，有问题的话还希望版主多多指导。

6 楼 nijiaben 2008-11-07  

gdljg0460 写道

很详细的教程，我来顶顶先

呵呵，谢谢兄弟哈，相互学习啦

5 楼 gdljg0460 2008-11-07  

很详细的教程，我来顶顶先

4 楼 yeowin 2008-10-26  

不错啊，  看样子flex把你f的很爽啊，，嘿嘿

3 楼 qianli2008 2008-10-24  

不错啊，我正在使用mate框架，感觉都不错

2 楼 black.angel 2008-10-24  

好，很详细，我也回去磨磨刀。

1 楼 zhangcong170 2008-10-23  

虽然我不懂flex,但是感觉不错啊