基于easyui开发Web版Activiti流程定制器详解（六）——Draw2d的扩展（一）

最新推荐文章于 2024-04-09 10:01:08 发布

最新推荐文章于 2024-04-09 10:01:08 发布 · 333 阅读

文章标签：

#easyui #Activiti #工作流 #设计器

Activiti设计器专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用自定义类扩展Draw2d库，以支持在Activiti流程设计中创建特定类型的任务节点，如UserTask。通过实现特定方法，可以为流程图添加用户指定的任务属性，如参与者、截止日期、优先级等，从而更灵活地定制流程设计。

题外话：

最近在忙公司的云项目空闲时间不是很多，所以很久没来更新，今天补上一篇！

回顾：

前几篇介绍了一下设计器的界面和Draw2d基础知识，这篇讲解一下本设计器如何扩展Draw2d。

进入主题：

先看一下扩展的类图：

其中有颜色标注的类即是扩展类，其中Node、Port、InputPort、OutputPort是Draw2d提供的类，其余都是扩展类。

这里重点介绍几个核心类以及相关重要的方法，如下：

上图中黄色部分负责生成Activiti流程文件中Task对应的XML片段，所以对于不同类型Task需要实现的方法，例如UserTask，代码如下：

draw2d.UserTask=function(configPropCallback){
	draw2d.Task.call(this,configPropCallback);
	this.performerType=null;
	this.dueDate=null;
	this.priority=null;
	this.formKey = null;
	this.expression=null;
	this.isUseExpression=null;
	this.assignee=null;
	this.candidateUsers=new draw2d.ArrayList();
	this.candidateGroups=new draw2d.ArrayList();
	this.formProperties=new draw2d.ArrayList();
	this.taskListeners=new draw2d.ArrayList();
	this.setTitle("User Task");
};
draw2d.UserTask.prototype=new draw2d.Task();
draw2d.UserTask.prototype.type="draw2d.UserTask";
draw2d.UserTask.newInstance=function(userTaskXMLNode){
	var task = new draw2d.UserTask();
	task.id=userTaskXMLNode.attr('id');
	task.taskId=userTaskXMLNode.attr('id');
	task.taskName=userTaskXMLNode.attr('name');
	task.setContent(userTaskXMLNode.attr('name'));
	return task;
};
draw2d.UserTask.prototype.getIconClassName = function(){
	return "user-task-icon";
};
draw2d.UserTask.prototype.getStartElementXML=function(){
	var xml='<userTask ';
	xml=xml+this.getGeneralXML();
	xml=xml+this.getPerformersXML();
	xml=xml+'>\n';
	return xml;
};
draw2d.UserTask.prototype.getEndElementXML=function(){
	var xml = '</userTask>\n';
	return xml;
};
draw2d.UserTask.prototype.getDocumentationXML=function(){
	if(this.documentation==null||this.documentation=='')return '';
	var xml='<documentation>';
	xml=xml+this.documentation;
	xml=xml+'</documentation>';
	return xml;
};
draw2d.UserTask.prototype.getPerformersXML=function(){
	var xml='';
	if(this.isUseExpression){
		if(this.expression!=null&&this.expression!=''){
			if(this.performerType=='assignee'){
				xml=xml+'activiti:assignee="'+this.expression+'" ';
			}else if(this.performerType=='candidateUsers'){
				xml=xml+'activiti:candidateUsers="'+this.expression+'" ';
			}else if(this.performerType=='candidateGroups'){
				xml=xml+'activiti:candidateGroups="'+this.expression+'" ';
			}
		}
	}else{
		if(this.performerType=='assignee'){
			if(this.assignee!=null&&this.assignee!='')
				xml=xml+this.assignee;
		}else if(this.performerType=='candidateUsers'){
			for(var i=0;i<this.candidateUsers.getSize();i++){
				var user = this.candidateUsers.get(i);
				xml=xml+user.sso+',';
			}
		}else if(this.performerType=='candidateGroups'){
			for(var i=0;i<this.candidateGroups.getSize();i++){
				var group = this.candidateGroups.get(i);
				xml=xml+group+',';
			}
		}
	}
	if(this.dueDate!=null&&this.dueDate!=''){
		xml=xml+'activiti:dueDate="'+this.dueDate+'" '
	}
	if(this.formKey != null && this.formKey != ""){
		xml=xml+'activiti:formKey="'+this.formKey+'" ';
	}
	if(this.priority!=null&&this.priority!=''){
		xml=xml+'activiti:priority="'+this.priority+'" '
	}
	
	return xml;
};
draw2d.UserTask.prototype.getExtensionElementsXML=function(){
	if(this.listeners.getSize()==0&&this.formProperties.getSize()==0)return '';
	var xml = '<extensionElements>\n';
	xml=xml+this.getFormPropertiesXML();
	xml=xml+this.getListenersXML();
	xml=xml+'</extensionElements>\n';
	return xml;
};
draw2d.UserTask.prototype.getListenersXML=function(){
	var xml = draw2d.Task.prototype.getListenersXML.call(this);
	for(var i=0;i<this.taskListeners.getSize();i++){
		var listener = this.taskListeners.get(i);
		xml=xml+listener.toXML();
	}
	return xml;
};
draw2d.UserTask.prototype.getFormPropertiesXML=function(){
	var xml = '';
	for(var i=0;i<this.formProperties.getSize();i++){
		var formProperty = this.formProperties.get(i);
		xml=xml+formProperty.toXML();
	}
	return xml;
};
draw2d.UserTask.prototype.toXML=function(){
	var xml=this.getStartElementXML();
	xml=xml+this.getDocumentationXML();
	xml=xml+this.getExtensionElementsXML();
	xml=xml+this.getMultiInstanceXML();
	xml=xml+this.getEndElementXML();
	return xml;
}
draw2d.UserTask.prototype.getCandidateUser=function(sso){
	for(var i=0;i<this.candidateUsers.getSize();i++){
		var candidate = this.candidateUsers.get(i);
		if(candidate.sso===sso){
			return candidate;
		}
	}
	return null;
};
draw2d.UserTask.prototype.deleteCandidateUser=function(sso){
	var candidate = this.getCandidateUser(sso);
	this.candidateUsers.remove(candidate);
};
draw2d.UserTask.prototype.addCandidateUser=function(user){
	if(this.getCandidateUser(user.sso)==null)
		this.candidateUsers.add(user);
};
draw2d.UserTask.prototype.getCandidateGroup=function(name){
	for(var i=0;i<this.candidateGroups.getSize();i++){
		var candidate = this.candidateGroups.get(i);
		if(candidate===name){
			return candidate;
		}
	}
	return null;
};
draw2d.UserTask.prototype.deleteCandidateGroup=function(name){
	var candidate = this.getCandidateGroup(name);
	this.candidateGroups.remove(candidate);
};
draw2d.UserTask.prototype.addCandidateGroup=function(name){
	if(!this.candidateGroups.contains(name))
		this.candidateGroups.add(name);
};
draw2d.UserTask.prototype.getTaskListener=function(id){
	for(var i=0;i<this.taskListeners.getSize();i++){
		var listener = this.taskListeners.get(i);
		if(listener.getId()=== id){
			return listener;
		}
	}
};
draw2d.UserTask.prototype.deleteTaskListener=function(id){
	var listener = this.getTaskListener(id);
	this.taskListeners.remove(listener);
};
draw2d.UserTask.prototype.addTaskListener=function(listener){
	this.taskListeners.add(listener);
};
draw2d.UserTask.prototype.setTaskListeners=function(listeners){
	this.taskListeners = listeners;
};
draw2d.UserTask.prototype.getFormProperties=function(id){
	for(var i=0;i<this.formProperties.getSize();i++){
		var prop = this.formProperties.get(i);
		if(prop.id== id){
			return prop;
		}
	}
};
draw2d.UserTask.prototype.deleteFormProperties=function(id){
	var prop = this.getFormProperties(id);
	this.formProperties.remove(prop);
};
draw2d.UserTask.prototype.addFormProperties=function(prop){
	this.formProperties.add(prop);
};
draw2d.UserTask.prototype.setFormProperties=function(props){
	this.formProperties = props;
};

请注意代码中toXML方法，这个方法负责产生UserTask节点的XML代码片段，它调用了其他几个方法：getStartElementXML、getDocumentationXML、getExtensionElementsXML、getMultiInstanceXML、getEndElementXML,不同类型的Task可能不需要调用所以这些方法，可以根据需要选择性调用（当然这取决于Activiti流程文件的规范），当然对于不同类型的Task你也可以添加一些自定义的方法，如：生成操作人的方法（代码中getPerformersXML方法）等等。

由于Activiti设计的Task类型比较多，这里就不一一介绍了有兴趣可以去查看一下源代码还是很好理解的，有问题可以给我留言！

时间有限就先写到这吧！下一篇介绍一下其他扩展类，敬请关注。。。。。。

定制器下载地址

http://lisonghua2010.iteye.com/admin/blogs/1490165

为了大家下载方便，最近开通的Github下载地址：

https://github.com/lisonghua/activiti-designer

Activit官方文档地址

http://activiti.org/userguide/index.html

-------------------------------------------------华丽分割线---------------------------------------------------------------------

温馨提示，下面是广告时间（不喜请绕行）

推广一下本人的小店：

http://tianya-zahuopu.taobao.com/