工作流之流程设计器

去年做的一个流程设计器,跟大家分享下。

由于我们平台要加入工作流的支持,必须设计一个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脚本、消息提醒、邮件发送):



分支合并节点



 


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML工作流设计是一种用于创建、编辑和管理工作流程的工具。它可以帮助用户通过可视化界面来设计工作流,并生成相应的HTML代码。 HTML工作流设计具有以下主要功能: 1. 可视化设计界面:用户可以通过拖放操作来创建工作流的各个步骤和任务,并通过连接线来定义它们的顺序和依赖关系。这使得设计和修改工作流变得非常简单和直观。 2. 属性设置和配置:通过工作流设计,用户可以为每个步骤和任务设置不同的属性和配置项。例如,可以为任务指定执行者、截止日期、优先级等信息,以便更好地管理和监控工作流的执行过程。 3. 自动生成HTML代码:设计完成后,工作流设计可以自动生成对应的HTML代码。这些代码包括HTML标签、属性和事件,以及与后服务的交互逻辑,以确保工作流在网页中的正常显示和运行。 4. 可扩展性和定制化:HTML工作流设计通常提供了一些预定义的步骤和任务模板,但同时也支持用户自定义和扩展。用户可以根据自己的需求添加新的步骤或任务,或修改现有的模板,以满足特定的业务需求。 总结来说,HTML工作流设计是一种简化工作流程管理的工具,它通过可视化设计界面和自动生成HTML代码的方式,帮助用户快速创建和定制工作流,并提供了丰富的属性设置和配置项,以适应不同的业务需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值