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

题外话：

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

回顾：

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

进入主题：

       先看一下扩展的类图：

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

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


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

Js代码  收藏代码
  1. draw2d.UserTask=function(configPropCallback){  
  2.     draw2d.Task.call(this,configPropCallback);  
  3.     this.performerType=null;  
  4.     this.dueDate=null;  
  5.     this.priority=null;  
  6.     this.formKey = null;  
  7.     this.expression=null;  
  8.     this.isUseExpression=null;  
  9.     this.assignee=null;  
  10.     this.candidateUsers=new draw2d.ArrayList();  
  11.     this.candidateGroups=new draw2d.ArrayList();  
  12.     this.formProperties=new draw2d.ArrayList();  
  13.     this.taskListeners=new draw2d.ArrayList();  
  14.     this.setTitle("User Task");  
  15. };  
  16. draw2d.UserTask.prototype=new draw2d.Task();  
  17. draw2d.UserTask.prototype.type="draw2d.UserTask";  
  18. draw2d.UserTask.newInstance=function(userTaskXMLNode){  
  19.     var task = new draw2d.UserTask();  
  20.     task.id=userTaskXMLNode.attr('id');  
  21.     task.taskId=userTaskXMLNode.attr('id');  
  22.     task.taskName=userTaskXMLNode.attr('name');  
  23.     task.setContent(userTaskXMLNode.attr('name'));  
  24.     return task;  
  25. };  
  26. draw2d.UserTask.prototype.getIconClassName = function(){  
  27.     return "user-task-icon";  
  28. };  
  29. draw2d.UserTask.prototype.getStartElementXML=function(){  
  30.     var xml='<userTask ';  
  31.     xml=xml+this.getGeneralXML();  
  32.     xml=xml+this.getPerformersXML();  
  33.     xml=xml+'> ';  
  34.     return xml;  
  35. };  
  36. draw2d.UserTask.prototype.getEndElementXML=function(){  
  37.     var xml = '</userTask> ';  
  38.     return xml;  
  39. };  
  40. draw2d.UserTask.prototype.getDocumentationXML=function(){  
  41.     if(this.documentation==null||this.documentation=='')return '';  
  42.     var xml='<documentation>';  
  43.     xml=xml+this.documentation;  
  44.     xml=xml+'</documentation>';  
  45.     return xml;  
  46. };  
  47. draw2d.UserTask.prototype.getPerformersXML=function(){  
  48.     var xml='';  
  49.     if(this.isUseExpression){  
  50.         if(this.expression!=null&&this.expression!=''){  
  51.             if(this.performerType=='assignee'){  
  52.                 xml=xml+'activiti:assignee="'+this.expression+'" ';  
  53.             }else if(this.performerType=='candidateUsers'){  
  54.                 xml=xml+'activiti:candidateUsers="'+this.expression+'" ';  
  55.             }else if(this.performerType=='candidateGroups'){  
  56.                 xml=xml+'activiti:candidateGroups="'+this.expression+'" ';  
  57.             }  
  58.         }  
  59.     }else{  
  60.         if(this.performerType=='assignee'){  
  61.             if(this.assignee!=null&&this.assignee!='')  
  62.                 xml=xml+this.assignee;  
  63.         }else if(this.performerType=='candidateUsers'){  
  64.             for(var i=0;i<this.candidateUsers.getSize();i++){  
  65.                 var user = this.candidateUsers.get(i);  
  66.                 xml=xml+user.sso+',';  
  67.             }  
  68.         }else if(this.performerType=='candidateGroups'){  
  69.             for(var i=0;i<this.candidateGroups.getSize();i++){  
  70.                 var group = this.candidateGroups.get(i);  
  71.                 xml=xml+group+',';  
  72.             }  
  73.         }  
  74.     }  
  75.     if(this.dueDate!=null&&this.dueDate!=''){  
  76.         xml=xml+'activiti:dueDate="'+this.dueDate+'" '  
  77.     }  
  78.     if(this.formKey != null && this.formKey != ""){  
  79.         xml=xml+'activiti:formKey="'+this.formKey+'" ';  
  80.     }  
  81.     if(this.priority!=null&&this.priority!=''){  
  82.         xml=xml+'activiti:priority="'+this.priority+'" '  
  83.     }  
  84.       
  85.     return xml;  
  86. };  
  87. draw2d.UserTask.prototype.getExtensionElementsXML=function(){  
  88.     if(this.listeners.getSize()==0&&this.formProperties.getSize()==0)return '';  
  89.     var xml = '<extensionElements> ';  
  90.     xml=xml+this.getFormPropertiesXML();  
  91.     xml=xml+this.getListenersXML();  
  92.     xml=xml+'</extensionElements> ';  
  93.     return xml;  
  94. };  
  95. draw2d.UserTask.prototype.getListenersXML=function(){  
  96.     var xml = draw2d.Task.prototype.getListenersXML.call(this);  
  97.     for(var i=0;i<this.taskListeners.getSize();i++){  
  98.         var listener = this.taskListeners.get(i);  
  99.         xml=xml+listener.toXML();  
  100.     }  
  101.     return xml;  
  102. };  
  103. draw2d.UserTask.prototype.getFormPropertiesXML=function(){  
  104.     var xml = '';  
  105.     for(var i=0;i<this.formProperties.getSize();i++){  
  106.         var formProperty = this.formProperties.get(i);  
  107.         xml=xml+formProperty.toXML();  
  108.     }  
  109.     return xml;  
  110. };  
  111. draw2d.UserTask.prototype.toXML=function(){  
  112.     var xml=this.getStartElementXML();  
  113.     xml=xml+this.getDocumentationXML();  
  114.     xml=xml+this.getExtensionElementsXML();  
  115.     xml=xml+this.getMultiInstanceXML();  
  116.     xml=xml+this.getEndElementXML();  
  117.     return xml;  
  118. }  
  119. draw2d.UserTask.prototype.getCandidateUser=function(sso){  
  120.     for(var i=0;i<this.candidateUsers.getSize();i++){  
  121.         var candidate = this.candidateUsers.get(i);  
  122.         if(candidate.sso===sso){  
  123.             return candidate;  
  124.         }  
  125.     }  
  126.     return null;  
  127. };  
  128. draw2d.UserTask.prototype.deleteCandidateUser=function(sso){  
  129.     var candidate = this.getCandidateUser(sso);  
  130.     this.candidateUsers.remove(candidate);  
  131. };  
  132. draw2d.UserTask.prototype.addCandidateUser=function(user){  
  133.     if(this.getCandidateUser(user.sso)==null)  
  134.         this.candidateUsers.add(user);  
  135. };  
  136. draw2d.UserTask.prototype.getCandidateGroup=function(name){  
  137.     for(var i=0;i<this.candidateGroups.getSize();i++){  
  138.         var candidate = this.candidateGroups.get(i);  
  139.         if(candidate===name){  
  140.             return candidate;  
  141.         }  
  142.     }  
  143.     return null;  
  144. };  
  145. draw2d.UserTask.prototype.deleteCandidateGroup=function(name){  
  146.     var candidate = this.getCandidateGroup(name);  
  147.     this.candidateGroups.remove(candidate);  
  148. };  
  149. draw2d.UserTask.prototype.addCandidateGroup=function(name){  
  150.     if(!this.candidateGroups.contains(name))  
  151.         this.candidateGroups.add(name);  
  152. };  
  153. draw2d.UserTask.prototype.getTaskListener=function(id){  
  154.     for(var i=0;i<this.taskListeners.getSize();i++){  
  155.         var listener = this.taskListeners.get(i);  
  156.         if(listener.getId()=== id){  
  157.             return listener;  
  158.         }  
  159.     }  
  160. };  
  161. draw2d.UserTask.prototype.deleteTaskListener=function(id){  
  162.     var listener = this.getTaskListener(id);  
  163.     this.taskListeners.remove(listener);  
  164. };  
  165. draw2d.UserTask.prototype.addTaskListener=function(listener){  
  166.     this.taskListeners.add(listener);  
  167. };  
  168. draw2d.UserTask.prototype.setTaskListeners=function(listeners){  
  169.     this.taskListeners = listeners;  
  170. };  
  171. draw2d.UserTask.prototype.getFormProperties=function(id){  
  172.     for(var i=0;i<this.formProperties.getSize();i++){  
  173.         var prop = this.formProperties.get(i);  
  174.         if(prop.id== id){  
  175.             return prop;  
  176.         }  
  177.     }  
  178. };  
  179. draw2d.UserTask.prototype.deleteFormProperties=function(id){  
  180.     var prop = this.getFormProperties(id);  
  181.     this.formProperties.remove(prop);  
  182. };  
  183. draw2d.UserTask.prototype.addFormProperties=function(prop){  
  184.     this.formProperties.add(prop);  
  185. };  
  186. draw2d.UserTask.prototype.setFormProperties=function(props){  
  187.     this.formProperties = props;  
  188. };  

 
 请注意代码中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/

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telwanggs/p/5302277.html