PureMVCFlexMVC框架.docx
- 文档编号:18098921
- 上传时间:2023-08-13
- 格式:DOCX
- 页数:23
- 大小:96.19KB
PureMVCFlexMVC框架.docx
《PureMVCFlexMVC框架.docx》由会员分享,可在线阅读,更多相关《PureMVCFlexMVC框架.docx(23页珍藏版)》请在冰点文库上搜索。
PureMVCFlexMVC框架
今天学习PureMVC,看了教程,写了Demo,记录并分享学习过程。
教程参考:
http:
//puremvc.org/component/option,com_wrapper/Itemid,183/
PureMVC使用观察者模式,将代码分离为三个离散的层:
模式、视图和控制器,这三部分由三个单例模式类管理,分别是Model、View和Controller,三者合称为核心层或核心角色。
PureMVC中还有另外一个单例模式类——Façade,Façade提供了与核心层通信的唯一接口,以简化开发复杂度。
PureMVC的通信不采用Flash的EventDispatcher/Event,是因为PureMVC可能运行在没有FlashEvent和EventDispatcher类的环境中。
PureMVC架构示意图:
由图很明显可以知道PureMVC的层次结构:
1.Model层:
由ValueObject和Proxy组成。
Proxy负责操作数据模型,与远程服务通信存取数据。
Proxy发送Notification,但不接收Notification,比如Proxy从远程服务接收到数据或数据被更新时,都要发送Notification告诉系统,由View层和Controller层来接收并做相应反馈到界面。
2.View层:
由UI和对应的Mediator组成。
Mediator保存一个或多个ViewComponent的引用,通过ViewComponent自身提供的API管理它们。
Mediator既能发送Notification也能接受Notification,主要职责是处理ViewComponent派发的事件和系统其它部分发出来的Notification(通知)。
3.Controller层:
由Command和Facade组成。
Command实现应用程序的业务逻辑。
可以获取Proxy对象并与之交互,发送Notification,执行其它的Command。
用于复杂的或系统范围的操作,如应用程序的“启动”和“关闭”。
Command接收通知也可以发出通知。
实际Command类可以继承自SimpleCommand(对于单独业务),也可以继承自MacroCommand(如果需要执行多个业务逻辑)。
Facade类应用单例模式,负责初始化核心层(Model,View和Controller),并能访问它们的public方法。
在实际的应用中,只需要继承Facade类创建一个具体的Facade类(一般命名为ApplicationFacade)就可以实现整个的MVC模式,并不需要在代码中导入编写Model,View和Controller的类。
Facade和Proxy只能发送Notification,Mediator既可以发送也可以接收Notification,Notification被映射到Command,同时Command也可以发送Notification,这是一种“发布/订阅”机制,所有的观察者都可以收到相同的通知。
例如多个书刊订阅者可以订阅同一份杂志,当杂志有新刊物出版时,所有的订阅者都会被通知。
下面开始写例子PureMVCDemo:
完成用户登录在后台进行验证合法性,并反馈给前台。
版本说明:
Flex:
Flex4
ActionScript:
ActionScript3.0
JavaJDK:
jdk1.6.0_20
PureMVC:
PureMVC_AS3_2_0_4,官方网站提供多种语言的资源包下载,在这里用ActionScript版本,下载链接http:
//trac.puremvc.org/PureMVC_AS3/。
将下载到的资源文件PureMVC_AS3_2_0_4.swc拷贝到Flex工程的libs目录下即可。
工具及环境和Java后台服务应用的建立过程介绍:
详见我的上篇文章,BlazeDS实现Flex和Java通信的Demo
1、后台Java服务端项目工程PureMVCDemo组成:
相应代码:
UserVO.java
packagenet.dreamhui.java;
publicclassUserVO{
publicStringuserName;
publicStringpassWord;
publicUserVO()
{
//和ActionScript对应得构造方法
}
//getters&setters
publicStringgetUserName(){
returnuserName;
}
publicvoidsetUserName(StringuserName){
this.userName=userName;
}
publicStringgetPassWord(){
returnpassWord;
}
publicvoidsetPassWord(StringpassWord){
this.passWord=passWord;
}
}
LoginUser.java
packagenet.dreamhui.java;
publicclassLoginUser{
publicUserVOcurrentUser;
privateStringuName;
privateStringpWord;
//Flex端要调用的服务
publicUserVOlogin(UserVOpar_user)
{
//UserVOpar_user2=UserVO(par_user);
uName=par_user.userName;
pWord=par_user.passWord;
if(uName.equalsIgnoreCase("wwh")&&pWord.equalsIgnoreCase("wwh"))
{
returnpar_user;
//return"欢迎用户:
"+uName;
}
else{
returnnull;
//return"用户名或密码错误,请重新输入";
}
}
}
配置文件remoting-config.xml要添加的内容:
2,前台Flex工程PureMVCDemo工程组成:
相应代码(按照开发流程):
LoginPanel.mxml
xmlversion="1.0"encoding="utf-8"?
>
Panelxmlns: fx=" xmlns: s="library: // xmlns: mx="library: // title="请登陆"currentState="initState" creationComplete="lvcreationComplete(event)"> --~~~~~~~~~~~~~~~~~~~~~~Script~~~~~~~~~~~~~~~~~~~~~~--> Script> [CDATA[ importmx.controls.Alert; importmx.core.UIComponent; importmx.events.FlexEvent; importmx.events.ValidationResultEvent; importmx.rpc.events.FaultEvent; importmx.rpc.events.ResultEvent; importmx.validators.Validator; importnet.dreamhui.controller.events.LoginEvent; importnet.dreamhui.model.vo.UserVO; /***************************************************/ privatevarvalidObjs: Array; [Bindable] privatevar_currUser: UserVO;//=newUserVO(); /***************************************************/ protectedfunctionlvcreationComplete(event: FlexEvent): void { validObjs=[unSV,pwSV]; } protectedfunctionsubmit(event: MouseEvent): void { varvalidatorResults: Array; validatorResults=Validator.validateAll(validObjs); if(validatorResults.length==0) { varuser: UserVO=newUserVO(); user.userName=uName.text; user.passWord=pWord.text; varlgEvent: LoginEvent=newLoginEvent(LoginEvent.LOGIN_USER); lgEvent.data=user; dispatchEvent(lgEvent); //Alert.show("dispatchEvent"); //派发事件 } else { //定义校验出错事件 varvEvent: ValidationResultEvent; //取出第一个出错事件 vEvent=validatorResults[0]asValidationResultEvent; //将光标定位到第一个出错的组件上 (vEvent.target.sourceasUIComponent).setFocus(); } } /**~~~~~~~~~~~~~~~~~~~getters&setters~~~~~~~~~~~~~~~~~~~**/ [Bindable] publicfunctiongetcurrUser(): UserVO { return_currUser; } publicfunctionsetcurrUser(value: UserVO): void { _currUser=value; } ]]> Script> --~~~~~~~~~~~~~~~~~~~~~~states~~~~~~~~~~~~~~~~~~~~~~--> states> Statename="initState"/> Statename="loginState"/> states> --~~~~~~~~~~~~~~~~~~~~~~Declarations~~~~~~~~~~~~~~~~~~~~~~--> Declarations> --定义用户名和密码的输入校验类--> StringValidatorid="unSV" source="{uName}" property="text" required="true" maxLength="10" tooLongError="用户名最长为10位" requiredFieldError="请填写用户名"/> StringValidatorid="pwSV" source="{pWord}" property="text" required="true" maxLength="10" tooLongError="密码最长为10位" requiredFieldError="请填写密码"/> Declarations> --~~~~~~~~~~~~~~~~~~~~~~UIComponents~~~~~~~~~~~~~~~~~~~~~~--> FormincludeIn="initState"> FormItemlabel="用户名"> TextInputid="uName"/> FormItem> FormItemlabel="密码"> TextInputid="pWord"displayAsPassword="true"/> FormItem> FormItem> Buttonid="submitBtn"click="submit(event)"label="登陆"right="0"/> FormItem> Form> HGroupincludeIn="loginState"top="20"left="10"> Labeltext="欢迎尊贵的用户: "/> Labelid="cuName"text="{currUser.userName}"/> HGroup> Panel> UserVO.as packagenet.dreamhui.model.vo { [Bindable] [RemoteClass(alias="net.dreamhui.java.UserVO")] publicclassUserVO { privatevar_userName: String; privatevar_passWord: String; /** *为了实现远程Class之间的绑定,构造方法必须形式上完全一致, *包括参数的个数和类型,否则会出现异常。 **/ publicfunctionUserVO() { } //getters&setters publicfunctiongetuserName(): String { return_userName; } publicfunctionsetuserName(value: String): void { _userName=value; } publicfunctiongetpassWord(): String { return_passWord; } publicfunctionsetpassWord(value: String): void { _passWord=value; } } } LoginEvent.as packagenet.dreamhui.controller.events { importflash.events.Event; publicclassLoginEventextendsEvent { privatevar_data: Object; publicstaticconstLOGIN_USER: String="loginUser"; publicfunctionLoginEvent(type: String,bubbles: Boolean=false,cancelable: Boolean=false) { super(type,bubbles,cancelable); } publicfunctiongetdata(): Object { return_data; } publicfunctionsetdata(value: Object): void { _data=value; } } } LoginPanelMediator.as packagenet.dreamhui.view { importnet.dreamhui.controller.ApplicationFacade; importnet.dreamhui.controller.events.LoginEvent; importnet.dreamhui.model.LoginProxy; importnet.dreamhui.model.vo.UserVO; importnet.dreamhui.view.ui.LoginPanel; importmx.controls.Alert; importorg.puremvc.as3.interfaces.IMediator; importorg.puremvc.as3.interfaces.INotification; importorg.puremvc.as3.patterns.mediator.Mediator; publicclassLoginPanelMediatorextendsMediatorimplementsIMediator { publicstaticconstNAME: String="LoginPanelMediator"; publicfunctionLoginPanelMediator(viewComponent: LoginPanel) { super(NAME,viewComponent); viewComponent.addEventListener(LoginEvent.LOGIN_USER,login); //添加视图事件监听,当点击“登录”按钮时触发 } /** *处理事件监听,Mediator发送通知,递交给Command处理业务 **/ publicfunctionlogin(event: LoginEvent): void { //Alert.show("LoginPanelMediatorlogin"); varlgUser: UserVO=event.dataasUserVO; sendNotification(ApplicationFacade.USER_LOGIN,lgUser); /** *发送通知USER_LOGIN并携带参数UserVO对象lgUser *在ApplicationFacade中registerCommand(USER_LOGIN,LoginCommand); *该句将ApplicationFacade.USER_LOGIN注册给LoginCommand,当通知被发出后, *将转向执行LoginCommand的excute方法 **/ } /** *注册该Mediator感兴趣的通知Notification,以数组形式返回 **/ overridepublicfunctionlistNotificationInterests(): Array { return[LoginProxy.LOGIN_YES,LoginProxy.LOGIN_NO]; } /** *处理感兴趣的Notification,即根据通知,操作View视图的属性、状态等; *此处的通知来源可以是本身、其他的Mediator或Command或Proxy,所有能发出通知的地方 **/ overridepublicfunctionhandleNotification(notification: INotification): void { switch(notification.getName()) { caseLoginProxy.LOGIN_YES: //通知来源LoginProxy,如果用户名和密码正确 loginPanel.currUser=notification.getBody()asUserVO; loginPanel.currentState="loginState"; break; caseLoginProxy.LOGIN_NO: //通知来源LoginProxy,如果用户名或密码错误或远程服务调用失败 //Alert.show("用户名或密码错误,请重新填写"); Alert.show(notification.getBody().toString()); } } /** *获取对应的视图实例 **/ protectedfunctiongetloginPanel(): LoginPanel { returnviewComponentasLoginPanel; } } } LoginCommand.as packagenet.dreamhui.controller.business { importnet.dreamhui.model.LoginProxy; importnet.dreamhui.model.vo.UserVO; importmx.controls.Alert; importorg.puremvc.as3.interfaces.INotification; importmand.SimpleCommand; /** *因为LoginCommand只处理一个单一业务,即调用后台Java程序,返回 *用户名和密码的匹配正确与否,所以继承自SimpleCommand **/ publicclassLoginCommandextendsSimpleCommand { overridepublicfunctionexecute(notification: INotification): void { //Al
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- PureMVCFlexMVC 框架
![提示](https://static.bingdoc.com/images/bang_tan.gif)