去年做的一个流程设计器,跟大家分享下。
由于我们平台要加入工作流的支持,必须设计一个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
分享到:
相关推荐
《camunda流程设计器V5.14.0版本:深入解析与应用》 camunda流程设计器,作为一款专业的企业级工作流和业务流程管理(BPM)工具,一直以来都深受IT行业的青睐。其最新发布的V5.14.0版本,不仅在功能上有所增强,...
Web流程设计器是一款基于Java开发的流程自动化工具,其核心是JBPM(Java Business Process Management)工作流引擎。JBPM是一个开源的企业级工作流管理系统,它提供了业务流程的建模、部署、执行和监控功能,旨在...
在这个“Activiti工作流整合Web流程设计器整合”主题中,我们将深入探讨如何将Activiti与Web流程设计器集成,以实现直观、高效的流程设计和管理。 首先,我们要理解什么是Activiti。Activiti是由Alfresco开发的一款...
**JavaScript拖拽流程设计器** 在Web开发中,创建交互式用户界面是提升用户体验的重要手段,而流程设计器就是其中的一种。JavaScript作为最广泛使用的客户端脚本语言,为实现这样的功能提供了强大的支持。本文将...
Vue 流程设计器是基于 Vue.js 的前端组件,用于创建和编辑流程图。Vue.js 是一个流行的、轻量级的JavaScript框架,它以其声明式编程和组件化特性著称,适用于构建用户界面。在 Vue 流程设计器中,开发者可以利用 Vue...
忙活了一个星期左右,查找各种资料,终于将Activiti的流程设计器分离出来,与SpringMVC,spring整合了起来,先把工程分享出来,等有时间了在慢慢讲解具体的整合步骤。工程下载之后直接可以运行,只需要改一下数据库...
在“VUE + bpmn 流程设计器 demo”项目中,我们看到的是一个基于 Vue.js 的实现,利用 BPMN 2.0 规范的库来创建流程设计器的示例。这个demo的目的是为了简化开发过程,帮助开发者快速理解和实现BPMN流程设计功能。 ...
在本文中,我们将深入探讨如何使用jsPlumb和jQuery UI库构建一个基于Web的流程设计器,该设计器具有拖拽功能,并适用于多种主流浏览器。这个工具对于业务流程建模、工作流设计以及任何需要图形化表示流程的应用场景...
基于VUE+JsPlumb的流程设计器源码.zip基于VUE+JsPlumb的流程设计器源码.zip基于VUE+JsPlumb的流程设计器源码.zip基于VUE+JsPlumb的流程设计器源码.zip基于VUE+JsPlumb的流程设计器源码.zip基于VUE+JsPlumb的流程设计...
"shedworkflow流程设计器"是一款基于EXT+JS技术构建的流程设计工具,主要用于创建和编辑工作流。EXT+JS是一个强大的JavaScript框架,它提供了丰富的UI组件和数据绑定功能,使得开发者可以构建出交互性强、用户体验...
在本文中,我们将深入探讨如何使用Silverlight 3和Visual Studio 2008来开发一个功能完备的工作流程设计器。工作流程设计器是企业信息化系统中不可或缺的部分,它允许用户自定义和配置业务流程,提高效率并确保流程...
标题中的“easyui实现的Activiti工作流引擎web版流程设计器”揭示了本文将要讨论的重点,即如何利用EasyUI框架来构建一个基于Web的流程设计工具,该工具是基于Activiti工作流引擎的。EasyUI是一个轻量级的JavaScript...
在文件列表中,"练习"可能是包含使用流程设计器的示例或者练习项目,而"js"目录可能包含了实现流程设计器功能的JavaScript代码。这些代码可能包括了Canvas的绘图函数、事件监听器、数据模型的定义以及与用户交互相关...
《Silverlight版流程设计器——构建在线流程设计的实践探索》 在信息技术日新月异的今天,企业对高效、直观的流程管理工具的需求日益增强。其中,基于Silverlight技术的流程设计器凭借其丰富的图形表现力和强大的...
《Silverlight流程设计器详解》 在信息技术领域,流程设计器是一种重要的工具,它允许开发者和业务人员可视化地构建和编辑工作流程。本篇文章将深入探讨基于Silverlight技术的流程设计器,介绍其特性、功能以及如何...
流程设计器是一种用于创建和编辑工作流或业务流程的工具,通常在Web环境下使用。这个特定的流程设计器采用了新技术栈来实现其功能,特别是在一个WEB端的环境中。让我们深入了解一下其中涉及的技术及其优缺点。 首先...
【js版的流程设计器】是一种基于JavaScript技术实现的可视化工具,用于创建和编辑工作流或业务流程。在软件开发领域,流程设计器通常被用来帮助非技术人员以图形化方式定义和理解复杂的业务逻辑,使得业务流程的建模...
**基于JavaScript的可视化流程设计器**是一种用于创建和编辑工作流或业务流程的工具,它允许用户通过图形化界面拖放组件来构建流程图,而无需编写复杂的代码。这种设计器广泛应用于业务自动化、流程管理、软件开发等...
基于Java开发的OA系统(包含了流程设计器,表单设计器,权限管理,简单报表管理等功能).zip 基于Java开发的OA系统(包含了流程设计器,表单设计器,权限管理,简单报表管理等功能).zip 基于Java开发的OA系统...