题外话:
最近在忙公司的云项目空闲时间不是很多,所以很久没来更新,今天补上一篇!
回顾:
前几篇介绍了一下设计器的界面和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/
优惠多多,欢迎光临!
相关推荐
easyui实现的Activiti工作流引擎web版流程设计器 跨浏览器流程设计器 打开文件 processDesigner\wf\designer\index.html
基于easyui实现的activiti模型设计器。
基于draw2d和easyui开发的一个流程管理原型界面,能拖拽,根据拖拽的内容生成xml内容,根据xml自动解析生成界面
EasyUI框架集成Draw2D 组件开发BPM 工作流实例。纯Web版本,下载打开可以直接使用!
easyui实现的Activiti工作流引擎web版流程设计器 跨浏览器流程设计器 1.根据Activit设计器实现了除User Task外的其余节点。 2.重构的JS脚本,更利于扩展。
基于easyui做的一套管理系统 基于easyui做的一套管理系统
基于Draw2d Touch实现的Activiti工作流Web设计器,本设计器完全使用JQuery语法开发,集成Easyui前端框架,支持多种主流浏览器。支持Activiti5以上语法结构。采用目前比较流行的JS库-JQuery。符合BPMN2.0标准。可视化...
目录 背景介绍 *activiti5*,是一个轻量级的工作流和业务流程管理平台。 *优势*,它最大的优势在于采用了PVM(流程虚拟机),基于...easyui、jqueryui plugin以及著名的js框架*draw2d*开发的。 * *题外话*,其
基于easyui中的textbox输入框自定义的颜色选择器及源码
基于hibernate spring struts shiro activiti easyui框架的物流系统,可做毕业设计代码自己看着视频手打的,可以运行,内涵数据库 说明等,适合做毕业设计和课程答辩
easyui开发包,包含所有的demo及开发easyui相关的所有开发包
使用EasyUI开发的web代码,包括权限和部分组织架构
jQuery+EasyUI开发示例(附源码)
easyui开发手册easyui开发手册easyui开发手册easyui开发手册easyui开发手册easyui开发手册easyui开发手册easyui开发手册easyui开发手册
基于EasyUI 官方的帮助。 Application 使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD应用 使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and ...
processDesigner easyui web在线流程设计
基于EasyUI的仓库管理系统
jQuery+EasyUI开发指南宝典