JBPM4 web设计器实践--命令模式的使用

  目的：在web设计器中使用command模式实现动作的撤销和重做

  当前的一些设想：

  1、构建能够支持单一应用的 application 组件，只能支持一种editor。

  2、application 组件中注册、执行、撤销和重做command，约定一些特定的执行规则，执行参数的使用方式。

$('body',document).application('registerCommand','addTransition',{
	getTitle:function(){
		return '新增连线';
	},
	exec:function(){
		var o = this.options;
		if(o.event){//鼠标事件驱动的动作,不重复执行操作。
			o.event = null;
		}else{
			$('#editor-workflow').workflow('addTransition',o.fromId,o.toId);
		}
	},
	undo:function(){
		var o = this.options;
		$('#editor-workflow').workflow('removeTransition',o.fromId,o.toId);
	}
});

 

  3、在workflow组件中提供鼠标的动作的命令集成

 

$('#editor-workflow').workflow({
    moveCommand:function(event,ui){
        $('body',document).application('executeCommand','move',$.extend({
            event:event
        },ui));
    },//集成鼠标动作的move命令
    addTransitionCommand:function(event,ui){
        $('body',document).application('executeCommand','addTransition',$.extend({
	event:event
        },ui));
    }//集成鼠标动作的addTransition命令
});

 

 

(function($) {
$.widget("youi.application", {
	_init:function(){
		this.commands = [];//执行过的的命令数组，供撤销使用
		this.undoCommands = [];//撤销过的命令数组,供重做使用
		this.registedCommands = [];//map
		
		this.element.addClass('youi-application');
		
		this._defaultHtml();
	},
	
	_defaultHtml:function(){
                               //TODO 增加其他的html
		var preHtmls = ['<div id="application-info" class="application-info"></div>'];
		this.element.prepend(preHtmls.join(''));
	},
	
	/* 系统执行命令相关函数 **/
	executeCommand:function(command,options){
		if(typeof(command)=='string'){
			options = $.extend({},command.defaults,options);
			command = $.extend({options:options},this.registedCommands[command]);
		}
		this.commands.push(command);
		this.exec();
		this.undoCommands = [];//清空重做项
	},
	/**
	 * 执行命令
	 */
	exec:function(isRedo){
		if(this.commands.length>0){
			var command = this.commands[this.commands.length-1];
			command.exec(isRedo);
			$.youi.log.info('执行动作：'+command.getTitle());
		}
	},
	/**
	 * 撤销
	 */
	undo:function(){
		if(this.commands.length>0){
			var undoCommand = this.commands.pop();
			undoCommand.undo();
			this.undoCommands.push(undoCommand);
			$.youi.log.info('撤销动作：'+undoCommand.getTitle());
		}
	},
	/**
	 * 重做
	 */
	redo:function(){
		if(this.undoCommands.length>0){
			var redoCommand = this.undoCommands.pop();
			this.commands.push(redoCommand);
			this.exec(true);
			$.youi.log.info('重做动作：'+redoCommand.getTitle());
		}
	},
	/**
	 * 注册命令
	 */
	registerCommand:function(name,command){
		this.registedCommands[name] = command;
	},
	/**
	 * 销毁
	 */
	destroy:function(){
		//TODO
	}
});

$.extend($.youi.application,{
	defaults:{
		menu		 :'',
		toolbar		 :'',
		propertyTable:'',
		type		 :''//dialog page
	}
});
})(jQuery);

   

评论

2 楼 JadeLuo 2010-11-06  

非常感谢你发布的简单集成的效果示例,现在我有个同事在实现类似功能,我主要实现jbpm4的后台功能,做到能够灵活运行Web设计器画出的流程,有兴趣可以交流一下

1 楼 vanlin 2009-10-12  

学习，

确实不错。