2024年4月20日发(作者：)

jBPM Web Designer（jBPM Web 设计器、jBPM 流程设计器、工作流程设计器）

支持不同格式日期字符串自动解析的日期工具 ...

2010-01-25

jBPM Web Designer（jBPM Web 设计器、jBPM 流程设计器、工作流程设计器）

文章分类:Web前端

研究jBPM已有一段时间了，今天终于决定拿点东西出来，但请大家原谅不能分享

源码。之所以拿出来，希望通过交流认识到更多技术一线的同志们，结点人缘。本人不才

只念完了高中，求职路屡战屡败，只好踏实地弄点东西出来撑下门面，希望有所帮助，找

到一份满意的工作。

大多研究JBPM的，对其引擎的扩展开发都不曾苦恼，但提及其可视化设计工具都

希望能有一款WEB版设计器。

苦恼过后，便有了开发设计器的冲动。首先通过网上找到的WEB流程设计工具，多

半是非流程研究人员的产品，拿来用要经过大量的修改，不太可取，也不容易修改，参考

倒是有些价值，在此谢过；另外由于刚学会了JavaScript在页面实现的拖曳功能。鉴于

此便开始了行动，现在想想还有些大胆。由于一直没抽出时间来，拖了两个多月，终于写

下了这篇文章。

基于javaScript+css+vml的jBPM web designer，由于使用了vml只支持IE浏览

器（IE5+），其中没有使用任何javaScript开发框架，但模仿了extJs框架的css界面风

格。开发过程中参考了extJs、prototype、jQuery等javaScript开发框架；参考了

jBPM designer eclipse 插件；参考了shine Workflow Designer截图、以及圈子中

shappy1978贴出来的截图（当时还回帖希望这位大哥分享源码，结果失望，也就狠下心

来独干，造自己的轮子）；还参考了webflow、XiorkFlow、EMSFlow（applet）等，

XiorkFlow是早期看过的流程设计工具。在此谢过以上提供的参考。

以下以贴图方式介绍jBPM3 web designer。

1、流程设计器主界面，采用纯JS且面向对象的编程方式（事件处理机制swing、

extjs思想中毒很深）开发，动态生成div等HTML代码，利用外部样式表以实现多风格

支持，根据窗口大小自适应宽高，以使编辑区域最大可视化，仿jBPM designer eclipse

插件布局与操作习惯（其中个人觉得属性输入要比eclipse 插件方便些），仿extJs框架

的css界面风格。主界面分为三部分，工具栏、编辑区、属性栏，支持鼠标拖动设定大小

及最大化、最小化、还原功能。编辑区支持网格显示。目前设计器支持开始、结束、分

支、合并、决策、任务、邮件7种节点（可以容易扩展新节点）并可以通过鼠标拖曳操作

编辑大小，流程转换可以通过鼠标操作支持直线及折线。节点的连接操作进行验证，如只

允许拖入一个开始节点；开始节点只允许单个from连接；结束节点只允许to连接，但