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

阅读更多

题外话：

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

回顾：

       前几篇介绍了一下设计器的界面和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='\n';
	return xml;
};
draw2d.UserTask.prototype.getEndElementXML=function(){
	var xml = '\n';
	return xml;
};
draw2d.UserTask.prototype.getDocumentationXML=function(){
	if(this.documentation==null||this.documentation=='')return '';
	var xml='';
	xml=xml+this.documentation;
	xml=xml+'';
	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\n';
	return xml;
};
draw2d.UserTask.prototype.getListenersXML=function(){
	var xml = draw2d.Task.prototype.getListenersXML.call(this);
	for(var i=0;i 
  
 
 请注意代码中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/
 
  
 
 
  
优惠多多，欢迎光临！
 
  
 
 
 

• 
• 大小: 102.3 KB

• 
• 大小: 127.1 KB

• 查看图片附件