- 浏览: 128977 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
ccqy66:
博主,我想请教一个问题,如果在注册我的agentlib之前,我 ...
浅谈jvm中Instrumentation的实现 -
zxjlwt:
学习了。http://surenpi.com
javaagent加载机制分析 -
dxm1986:
假笨越来越深入了。。。。
从日志上理解java调试机制 -
kely39:
高深
从日志上理解java调试机制 -
chainhou:
楼主是在阿里支付宝啊? 选中“Allow terminatio ...
从日志上理解java调试机制
前几天学了下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中存的就是普通的数据,一般的话都是最小单位的数据,是不能进行再次分解的数据,代码如下:
设成单例类的话我们可以保证系统的数据得到同意,并且我们会把它设置为绑定模式,可以和接下来说的view包下的视图类进行数据绑定。view包下前面说了,是存放相关的视图的,可以是as的也可以是mxml的,看大家的意思了,比如说我们可以存放些自定义的组建或扩展的组件等,下面是LoginPanel.mxml的代码:
接下来我们说说event包,其实这个包我们和接下来说的commands包合并,我在这就分开了,为的是使结构更加清晰哈,在event包下我们存放的是我们自定义的事件,比如下面的LoginEvent.as:
好了,我们继续说说在command包下的东东哈,在这里的话主要是存放我们自定义的事件一旦发生的时候,我们究竟要怎么处理它,所以在这下面是我们自定义的类似监听事件的类,但是在这些类中我们一般只相当于一个事件处理的接口,我们会把真正的处理转交给business中的代理类中,尤其是进行远程调用的时候最常用,下面是我们的LoginCommand类:
再说说这个控制类,也就是control包下的类,这个下面主要是负责分发事件的,我们要把我们的自定义事件和我们的相应的处理方法关联起来,都是在这里进行的,通常一个类就可以了,下面是LoginControl.as的源码:
最后我们就说说我们的代理类哈,代理类前面已经说了是我们的真正的处理类,我们把视图区的数据传到这里进行处理,最好把结果返回到相应的IResponsder接口实现类中,下面是我们的LoginDelegate.as的源码:
好了,基本介绍完了,我们可以测试下了哈,下面是测试代码CairngormTest.mxml:
看看效果吧,当我们运行的时候界面是这样的:
当我们点击submit时如果成功则出现的结果是这样的:
当我们输入的账号密码错误时,出现如下的界面:
好了,这Cairngorm的小demo就到这了,希望能让大家有所收获...
呵呵.知道看了,看错了.没有一个new
很详细的教程,我来顶顶先
呵呵,谢谢兄弟哈,相互学习啦
我们新建工程,有一个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
" 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包,其实这个包我们和接下来说的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);
}
黑体部份传进去的参数类型是不是有点问题呀?
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);
}
黑体部份传进去的参数类型是不是有点问题呀?
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,但是感觉不错啊
发表评论
-
Flex+Hibernate无法级联操作解决方案
2010-06-22 11:08 1858本文最初发布在http://www.lovestblo ... -
新版博客发布啦
2010-06-03 12:40 1410呵呵,废话不多说了,有兴趣的朋友就来我博客转转吧,聆听您宝贵的 ... -
Flex博客&&Flex Blog&&Flex版本博客
2010-04-30 00:18 1673呵呵,博客开发蛮久了,不过发现在google" ... -
本人因为最近急需钱用,想出售自己部分flex+java作品(工作流系统,博客系统)
2009-10-02 23:09 528前段时间因为自己电脑被盗,损失惨重,现在由于工作需 ... -
AIR版本OsWorkFlow设计器(新增变直线为折线,导入文件生成流程图功能)
2009-09-05 18:14 6608(欢迎大家光临个人博客:http://www.lovestbl ... -
Flex+Spring+Hibernate在myEclipse中的整合(图片说明)
2009-08-04 15:25 3914本文最先发布在个人博客,http://www.lovestbl ... -
OSWorkflow画图工具flex版终于完工了
2009-07-31 22:42 5319欢迎大家提出意见,多余的话就不多说了,花了10天的作品,辛苦啊 ... -
Flex版OSWorkflow界面展示(山寨版)
2009-07-24 23:13 1916这个暑假本来打 ... -
flex中文问题,访问中文路径问题
2009-04-30 01:32 2825本文最先发表在本人个人java+flex技术博客htt ... -
Flex与java交互之数据库数据读取
2009-03-27 20:19 2668嘿,先向大家宣传下我站啊,http://www.love ... -
Flex+Spring+Hibernate整合问题解析
2009-01-21 23:33 0好久没来这写东西了,最近在为自己的一个博客做准备,想通过 ... -
Flex+J2EE+Lcds在myEclipse中的配置
2008-10-14 18:42 6952学Flex才十来天,其中遇到不少的问题,都是自己一点一点 ... -
如何自定义事件
2008-10-08 11:44 1345曾经在学习自定义 ... -
谈谈Flex中的事件流的理解
2008-09-09 19:46 1988今天上课的时候看了Flex的事件流,看得云里雾里的,回来 ...
相关推荐
Flex流行MVC框架之Cairngorm
flex框架之Cairngorm框架,包括Cairngorm框架
flex框架之Cairngorm框架,一个用Cairngorm与后台通信实例
flex开发系列书籍:Cairngorm_MVC_框架
flex MVC框架搭建步骤 Cairngorm
Cairngorm 学习笔记 Cairngorm 学习笔记
附件是关于 Flash/Flex 几个重要框架 Cairngorm、Mate、PureMVC以及Swiz 的典型例子,由 Tony Hillerson 提供 Homepage: http://insideria.com
Spring Actionscript IOC Flex Cairngorm MVC
非常好的东西,喜欢的下载下来吧spring 3.0jdbcTemplete+flex4.6+pureMvc+cairngorm2.2.2+blazeds, 最新出炉,可以选择pureMvc和cairngorm2.2.2两种框架
Flex开发框架cairngorm入门实例教程,有需要的人可以看一下
Flex中的MVC框架Cairngorm和puremvc
Flex框架Cairngorm经典案例源码 完全掌握Cairngorm
前台FLex工程(单独工程Cairngorm)使用Cairngorm框架与后台java工程(FLexToJava)进行数据交互。功能点: ①flex提交表单保存到数据库; ②flex向后台请求,后台返回List集合,flex将集合填充到combox 附带:...
flex例子使用Cairngorm框架。
这是一个运用flex的cairngorm框架的实例 是一个登陆
本文对Flex轻量级开发框架Cairngorm进行了详细的描述,相信对急于想学些本框架的开发人员来讲有很大用处。
Flex的Cairngorm框架工程 Java后台