基于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+'>\n';  
34.     return xml;  
35. };  
36. draw2d.UserTask.prototype.getEndElementXML=function(){  
37.     var xml = '</userTask>\n';  
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>\n';  
90.     xml=xml+this.getFormPropertiesXML();  
91.     xml=xml+this.getListenersXML();  
92.     xml=xml+'</extensionElements>\n';  
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/