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

题外话：

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

回顾：

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

进入主题：

先看一下扩展的类图：

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

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

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

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. return xml;
85. };
86. draw2d.UserTask.prototype.getExtensionElementsXML=function(){
87. if(this.listeners.getSize()==0&&this.formProperties.getSize()==0)return '';
88. var xml = '<extensionElements>\n';
89. xml=xml+this.getFormPropertiesXML();
90. xml=xml+this.getListenersXML();
91. xml=xml+'</extensionElements>\n';
92. return xml;
93. };
94. draw2d.UserTask.prototype.getListenersXML=function(){
95. var xml = draw2d.Task.prototype.getListenersXML.call(this);
96. for(var i=0;i<this.taskListeners.getSize();i++){
97. var listener = this.taskListeners.get(i);
98. xml=xml+listener.toXML();
99. }
100. return xml;
101. };
102. draw2d.UserTask.prototype.getFormPropertiesXML=function(){
103. var xml = '';
104. for(var i=0;i<this.formProperties.getSize();i++){
105. var formProperty = this.formProperties.get(i);
106. xml=xml+formProperty.toXML();
107. }
108. return xml;
109. };
110. draw2d.UserTask.prototype.toXML=function(){
111. var xml=this.getStartElementXML();
112. xml=xml+this.getDocumentationXML();
113. xml=xml+this.getExtensionElementsXML();
114. xml=xml+this.getMultiInstanceXML();
115. xml=xml+this.getEndElementXML();
116. return xml;
117. }
118. draw2d.UserTask.prototype.getCandidateUser=function(sso){
119. for(var i=0;i<this.candidateUsers.getSize();i++){
120. var candidate = this.candidateUsers.get(i);
121. if(candidate.sso===sso){
122. return candidate;
123. }
124. }
125. return null;
126. };
127. draw2d.UserTask.prototype.deleteCandidateUser=function(sso){
128. var candidate = this.getCandidateUser(sso);
129. this.candidateUsers.remove(candidate);
130. };
131. draw2d.UserTask.prototype.addCandidateUser=function(user){
132. if(this.getCandidateUser(user.sso)==null)
133. this.candidateUsers.add(user);
134. };
135. draw2d.UserTask.prototype.getCandidateGroup=function(name){
136. for(var i=0;i<this.candidateGroups.getSize();i++){
137. var candidate = this.candidateGroups.get(i);
138. if(candidate===name){
139. return candidate;
140. }
141. }
142. return null;
143. };
144. draw2d.UserTask.prototype.deleteCandidateGroup=function(name){
145. var candidate = this.getCandidateGroup(name);
146. this.candidateGroups.remove(candidate);
147. };
148. draw2d.UserTask.prototype.addCandidateGroup=function(name){
149. if(!this.candidateGroups.contains(name))
150. this.candidateGroups.add(name);
151. };
152. draw2d.UserTask.prototype.getTaskListener=function(id){
153. for(var i=0;i<this.taskListeners.getSize();i++){
154. var listener = this.taskListeners.get(i);
155. if(listener.getId()=== id){
156. return listener;
157. }
158. }
159. };
160. draw2d.UserTask.prototype.deleteTaskListener=function(id){
161. var listener = this.getTaskListener(id);
162. this.taskListeners.remove(listener);
163. };
164. draw2d.UserTask.prototype.addTaskListener=function(listener){
165. this.taskListeners.add(listener);
166. };
167. draw2d.UserTask.prototype.setTaskListeners=function(listeners){
168. this.taskListeners = listeners;
169. };
170. draw2d.UserTask.prototype.getFormProperties=function(id){
171. for(var i=0;i<this.formProperties.getSize();i++){
172. var prop = this.formProperties.get(i);
173. if(prop.id== id){
174. return prop;
175. }
176. }
177. };
178. draw2d.UserTask.prototype.deleteFormProperties=function(id){
179. var prop = this.getFormProperties(id);
180. this.formProperties.remove(prop);
181. };
182. draw2d.UserTask.prototype.addFormProperties=function(prop){
183. this.formProperties.add(prop);
184. };
185. draw2d.UserTask.prototype.setFormProperties=function(props){
186. this.formProperties = props;
187. };

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