`

jBPM Web Designer(jBPM Web 设计器、jBPM 流程设计器、工作流程设计器)

 
阅读更多

大多研究JBPM的,对其引擎的扩展开发都不曾苦恼,但提及其可视化设计工具都希望能有一款WEB版设计器。

    

     苦恼过后,便有了开发设计器的冲动。首先通过网上找到的WEB流程设计工具,多半是非流程研究人员的产品,拿来用要经过大量的修改,不太可取,也不容易修改,参考倒是有些价值,在此谢过;另外由于刚学会了JavaScript在页面实现的拖曳功能。鉴于此便开始了行动,现在想想还有些大胆。由于一直没抽出时间来,拖了两个多月,终于写下了这篇文章。

    

     基于javaScript+css+vml的jBPM web designer,由于使用了vml只支持IE浏览器(IE5+),其中没有使用任何javaScript开发框架,但模仿了extJs框架的css界面风格。开发过程中参考了extJsprototypejQuery等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连接,但支持多个连接;两个节点只能有唯一的同向连接等等。点击编辑区的空白处在属性栏显示流程定义的属性配置,点击节点则在属性栏显示节点的属性配置,点击流程转换或其label同样在属性栏显示其属性配置。在属性栏输入配置信息将自动保存并响应到图形展示上(如输入节点名称,则编辑区中节点显示的文字相应地改变)。整个设计器工作过程相当流畅。所有的配置信息将生成符合JPDL规范的XML流程定义文件。由于最终的产物是XML字符串,这赋予了流程设计器不仅仅能够定义出符合jBPM3的定义文件,稍做修改同样能定义出符合jPBM4,以及其它任何的基本XML的定义文件。

 

2、图形编辑节点及流程转换,利用vml标签获得良好的视觉效果(考虑兼容其它浏览器,可以开发基于svg、canvas或纯js的图形模型)。

 

网格

 

节点选中(节点选中后,可以通过鼠标按下拖动节点,改节点显示位置,也可以通过键w、a、s、d或up、left、dowm、rigth来移动节点,选中的节点能够通过delete键进行删除,连同其所有的form及to转换将一起被删除。当两个节点重叠时,选中节点始终显示于最上面)

 

节点改变大小(光标置于选中节点的高亮指示点上,将出现方向箭头,支持8个方向改变节点大小,同时在节点左上角显示节点的改变后[虚线框]长与宽)

 

 

 

流程转换选中(转换选中后,可以设置转换名称(也可以为空,则没有label,自动进行判断),其作为label,显示于转换中间(与转换线不重叠),也可以手动改变label显示位置,操作和节点的移动一样。选中的转换,按下delete键将被删除。转换名称(label)不管是否被选中,都将显示于节点、流程转换的上面,即不会被盖住)
 

 

 


 

 

转换直线/折线变换(转换选中后,鼠标按下高亮指示点可以将直线改变为折线,折线也可以还原为直线[拖动高亮指示点到靠近相连两高亮指示点确定的线段时自动变为直线],转换名称(label)跟随转换的移动自动重新计算中点位置进行重新显示(与转换线不重叠),节点移动时转换随着节点重新自动连接,若为折线,则节点向外的第一个折点为定点,只有连接点变动)

 



 

 

3、属性配置(属性配置支持自动保存,以免忘记保存,而重新填写)

 

 

 

 

 流程定义(支持基本信息[流程名称、流程描述]、SQL脚本、消息提醒、邮件发送)

 

 

 

 

 

任务节点(支持基本信息、转换模式、任务委派、任务策略、业务表单、SQL脚本、消息提醒、邮件发送)



 

 

 

 

 

SQL脚本、消息提醒、邮件发送参考流程定义截图
 

其它节点(支持基本信息、SQL脚本、消息提醒、邮件发送)

 

参考流程定义

 

流程转换(支持基本信息、动态委派、转换条件、SQL脚本、消息提醒、邮件发送)



 

 

 

SQL脚本、消息提醒、邮件发送参考流程定义截图

 

4、流程监控(绿:已执行,蓝:处理中,灰:未处理,支持流程执行历史手工播放/自动播放)

 

 

 

分享到:
评论

相关推荐

    jbpm designer (基于web的图形化流程设计工具)

    jbpm designer (基于web的图形化流程设计工具)

    JBPM web 设计器

    总结来说,jBPM Web Designer是一个强大的Web流程设计工具,它的出现大大降低了业务流程设计的门槛,提高了工作效率,同时也为jBPM平台带来了更友好的用户体验。随着技术的迭代,它可能已经具备了更多的功能和改进,...

    JBPM4_WebDesigner

    总的来说,JBPM4_WebDesigner是企业进行业务流程管理的理想工具,通过图形化的流程设计和管理,使得业务流程的开发和优化变得更加高效和直观。无论是小型企业还是大型组织,都能从中受益,提升业务流程的自动化水平...

    jbpm4 web设计器的初步方案

    【jbpm4 web设计器的初步方案】主要探讨的是如何利用jbpm4框架构建一个基于Web的流程设计工具。jbPM(Java Business Process Management)是一个开源的业务流程管理系统,它允许开发者设计、执行和管理业务流程。这...

    jbpm流程设计器

    在提供的压缩包文件中,"droolsjbpm-jbpm-designer-6.0.0.Beta1-480-gdc1d8ec.zip"可能是jbpm流程设计器的一个早期版本,而"jbpm-designer-master.zip"则可能是源码仓库的主分支,包含了最新的jbpm流程设计器源代码...

    jbpm-designer工作流

    jbpm-designer是一款基于J2EE的轻量级工作流管理系统,它专为设计和管理业务流程而构建。jbpm-designer提供了一种图形化的用户界面,使得非技术人员也能轻松地设计复杂的业务流程,从而降低了流程管理的门槛。在本文...

    jbpm-jpdl-designer-3.0.13.zip_jbpm_jbpm design_jbpm designer_jbp

    总结来说,jbpm-jpdl-designer-3.0.13是一个jbpm的图形化流程设计工具,使用它可以方便地创建和编辑JPDL文件,而无需直接处理XML。这个工具支持在Eclipse集成开发环境下使用,提供了友好的界面和丰富的功能,有助于...

    oryx-jbpm-designer.zip

    标题“oryx-jbpm-designer.zip”指出的是一个压缩包,其中包含了Oryx项目实现的JbPM流程设计器工具。Oryx是一个开源项目,专注于提供基于Web的BPMN 2.0(业务流程模型与 notation)图形编辑器。这个设计器使用户能够...

    jbpm-designer:用于jBPM的基于Web的BPMN2.0 Designer

    总结来说,jbpm-designer是一个强大的工具,它使业务流程建模变得简单易行,尤其适合那些希望采用BPMN2.0标准进行流程设计的组织。通过JavaScript实现的Web界面使得它易于部署和使用,而其开源性质则提供了无限的...

    jbpm4.rar_jbpm_jbpm designer_jbpm4

    jBPM 4的一大亮点是其图形化设计器(jBPM Designer),这是一个强大的工具,允许开发者通过直观的拖放界面来设计和构建复杂的业务流程。这个设计器支持 BPMN 2.0(Business Process Model and Notation)标准,使得...

    JBPM4_WebDesigner.zip

    这个Web Designer是JBPM4的一部分,用于图形化地设计流程模型。 首先,我们要理解JBPM的核心概念。JBPM是一个开源的工作流管理系统,它提供了一套完整的解决方案来处理业务流程的生命周期,包括建模、部署、执行、...

    jbpm5 web整合例子

    流程设计通常通过jbpm的工作流建模工具(例如jBPM Designer)完成,这些流程图可以是审批流程、订单处理流程等各种业务场景的模拟。 标签中的"spring"表明了项目使用了Spring框架。Spring是一个广泛使用的Java企业...

    jbpm designer

    jbpm designer

    jbpm web实例子(完整版)

    1. **流程定义(Process Definition)**:这是流程设计阶段的工作,通常使用jbpm提供的图形化建模工具(如jBPM Designer)完成。流程定义描述了业务流程的各个步骤、决策点以及它们之间的流转关系。 2. **流程实例...

    jbpm的入门2--流程设计器的安装

    **jbpm入门第二步——流程设计器的安装** 在IT领域,`jbpm`(Java Business Process Management)是一款流行的工作流管理系统,它允许开发者设计、执行和管理业务流程。本篇将详细讲解如何安装并使用jbpm的流程设计...

    jbpm的eclipse的流程设计器插件designer中的gpd.xml文件乱码问题

    Eclipse Designer是jbpm提供的一个强大的图形化流程设计工具,它允许开发者通过拖拽的方式创建流程图,并将其保存为.gpd.xml文件。然而,有时在使用Eclipse Designer时,可能会遇到gpd.xml文件显示乱码的问题,这...

    jbpm designer 2.3

    1. **源代码**:项目的Java源代码,用于实现流程设计的功能。 2. **资源文件**:如图片、配置文件、样例流程等,用于工具的正常运行。 3. **文档**:可能包含用户手册、API文档或者开发指南,帮助理解和使用工具。 4...

    jbpm-designer:定制的jbpm流程编辑器

    在BPM平台产品中,对jbpm的流程设计器(2.4.1)做了大量定制。包括: 本地化 界面简化,功能简化 连接平台获取变量、用户、组、子流程等 增加子系统参数 增强变量、用户、组设置 增加审批、会签设置,在任务图标上增加...

    jbpm工作流整合

    jbpm是一个开源的工作流管理系统,它提供了一套全面的工具和框架,用于设计、执行、监控和优化业务流程。这个压缩包可能包含了一系列的资源,如源代码、配置文件、库和示例项目,旨在帮助用户快速地将jbpm工作流技术...

    JBPM4.4完整可用审批流程

    使用JBPM4.4,开发者可以设计复杂的审批流程,例如请假申请、报销审批等,通过图形化的流程设计器(Business Process Designer)创建流程模型。流程中的每个步骤可以关联到一个任务,任务可以分配给不同的角色或用户...

Global site tag (gtag.js) - Google Analytics