去年做的一个流程设计器,跟大家分享下。
由于我们平台要加入工作流的支持,必须设计一个WEB端的流程设计器,刚开始并没有什么概念,于是在网上查找资料,发现网上找的资源要么乱七八糟,要么各种BUG,一些做得比较好的又没有分享源码,很头痛,最终还是决定自己设计。
当时看了一篇博文,博主的流程设计器确实不错,但是并没有分享源码,通过截图我决定参考他的样式,这是原文地址:http://lipinliang.iteye.com/blog/578822
主要使用的技术:VML(缺点:只支持IE浏览器)、Ext(在一个比较大,因为我们平台使用Ext做的,所以使用Ext作为外层框架,使用的并不多,外层框架和一些事件机制以及DOM元素的选择)和JS操作XML。
设计器缺陷:由于时间原因,并没有一个整体的构思,没有使用类思想,纯粹的function方法,代码看起来比较乱,重用方法不够抽象,使得后面难以更新。并且没有加入自定义表单的支持,所以是面对程序员开发的。
前段时间刚做完表单设计器,于是决定重新开发流程设计器,使用类思想,两者结合,达到面向客户、开发迅速、不需要编码的目的,并且方便扩展,阅读清晰。新的流程设计器使用的画图技术是拉斐尔,兼容全浏览器,有兴趣的可以了解下。http://raphaeljs.com
事先申明,代码并不是很规范,可能很难阅读,仅供参考,有需要源码的请留下你的邮箱地址。
因为前期是直接通过记事本开发,因需使用平台内的功能以及结合JBPM,后面转入J2EE平台开发,所以这个版本的功能并不是很全,其他功能在平台上实现。
下载的打包文件忘了把Ext打包了,这边补上,查看index.html里的JS引入路径,版本是3.3。
下载地址:流程设计器Ext下载地址
CSDN不让修改资源,重新整合了一份上传,里面已包含Ext文件,这边提供下载地址:流程设计器
下面是截图介绍:
1.流程设计器主界面,采用Ext的border布局,分为工具条区、属性栏区和工作区。通过左侧选择功能对应的在右边作图,下方则是节点的属性设置,并且可以实时查看生成的XML文件。
2.XML代码实时查看,并且可以通过修改XML来编辑流程图。
3.节点的选中以及连线
4.节点属性
流程定义(基本信息、涌到定义、SQL脚本、消息提醒、邮件发送):
任务节点(基本信息、转换模式、任务委派、业务表单、SQL脚本、消息提醒、邮件发送):
流程转换节点(基本信息、动态委派、转换条件、SQL脚本、消息提醒、邮件发送):
分支合并节点
CSDN下载地址:流程设计器http://download.csdn.net/detail/wind2154/4235584
- 大小: 67 KB
- 大小: 42.6 KB
- 大小: 8.4 KB
- 大小: 17 KB
- 大小: 33.5 KB
- 大小: 28.7 KB
- 大小: 35 KB
- 大小: 37.5 KB
- 大小: 23 KB
- 大小: 36 KB
- 大小: 31.6 KB
- 大小: 33.5 KB
- 大小: 22.1 KB
- 大小: 29.6 KB
分享到:
相关推荐
忙活了一个星期左右,查找各种资料,终于将Activiti的流程设计器分离出来,与SpringMVC,spring整合了起来,先把工程分享出来,等有时间了在慢慢讲解具体的整合步骤。工程下载之后直接可以运行,只需要改一下数据库...
web流程设计器雏形(java版的JBPM)
基于Java开发的OA系统(包含了流程设计器,表单设计器,权限管理,简单报表管理等功能).zip 基于Java开发的OA系统(包含了流程设计器,表单设计器,权限管理,简单报表管理等功能).zip 基于Java开发的OA系统...
VUE + bpmn 流程设计器 demo方便大家,VUE + bpmn 流程设计器 demo方便大家
基于web的流程设计器,jsplumb+jqueryUI实现,支持拖拽功能,支持主流浏览器,可用于二次开发。
基于Silverlight 3+VS2008开发实现的流程设计器 (附源码)
easyui实现的Activiti工作流引擎web版流程设计器 跨浏览器流程设计器 打开文件 processDesigner\wf\designer\index.html
流程设计器,html5纯canvas编写的流程设计器,声明:绝对原创拒绝盗版
Activiti 6.0 流程设计器汉化,替换Activiti-App下的activiti-app-logic-6.0.0.jar 文件
shedworkflow流程设计器(EXT+JS技术实现) 目前有个缺点,无法绘制并行节点,需要用户自己 修改源代码,向作者表示感谢............
WEB端的流程设计器 主要使用的技术:VML(缺点:只支持IE浏览器)、Ext和JS操作XML。 事先申明,代码并不是很规范,可能很难阅读,有需要源码的我可以提供,仅供参考。
真正的国产工作流引擎、json 格式实例模型、仿钉钉审批流程设计器。
国内最容易使用和开发的流程设计器 1、界面简洁,容易操作,用户体验好 支持子流程 转出条件 步骤权限控制 结合表单设计器 步骤独立样式 会签控制 jQuery + jsPlumb + Bootstrap 我们参考了很多相关流程设计器,...
分享个自己写的WEB流程设计器。基于jquery, raphael实现,采用MVC框架backbone组织代码,参考了网上的myflow(不知来源),codiqa上的设计器。不过,很抱歉的是,目前不能画折线,只作为分享、学习用,有需要的可以...
在SpringBoot中集成flowable流程引擎及modeler可视化流程设计器项目完整源码,附有使用说明文档 1、使用开发工具eclipse或者idea等导入项目myflow 2、配置application.properties中的数据库连接,修改用户名和登录...
oryx editor 流程设计器文档,开源oryx 流程设计文档。
代码为activiti 流程设计器示例,另: jeecg + activiti 流程设计器整合 链接:https://blog.csdn.net/anysun7/article/details/79970420
WEB 流程设计器、基于以下js开发:小巧轻便。可以自己二次开发。 适用于大多数浏览器。主要用的js有raphael-min.js,myflow.js,myflow.editors.js raphael.js 是一个小巧的图形图像动画处理的JS包、基于SVG和VML...