`

整合activiti在线流程设计器(ACTIVITI-MODELER 5.18.0)

阅读更多

1.概述前言

一直以来都是从事大量的工作流相关的项目,用过很多商用的工作流产品,包括国内与国外的,尽管商用的工作产品在UI操作上比较人性化,但个人用户觉得,这东西只需要一些初级用户,对于我们一直在为一些高级的客户提供一些专业的数据整合、流程梳理、系统间的数据穿透时,这些系统因为不开源,给项目的实施带来巨大的风险,在一些项目栽过跟头后,我更偏向于使用开源的平台了。但开源平台最大的难点是在于你是否有足够的技术人员来学习及掌握它,否则,它也一样面临项目实施失败的风险。后来在一些项目上使用JBPM4,Activiti5,发现Activiti5的流程功能真的很强大,几乎是无所不能。套用一句广告语,老板再也不担心我的流程实现了。在实施国外的项目时,流程的设计几乎是交给开发人员来处理的,因此用Activiti的合适的。但在国内,我们的客户则提出更高的要求,要求普通的人员也可以参与流程的设计要求。Activiti后续的版本也在完善这些功能,特别是Activiti-5.18版本,Activiti-Modeler的建模工具几乎进行了重写,看来Activiti的开源团队也慢慢意识了这点,加大了人力在这方面的投入,以目前的使用,可以达到商用级别,通过功能的扩展,可以很好实现在线流程建模。

为了平台未来的延伸扩展,我建议直接使用该团队的Activiti-Modeler,原因很简单,可以有效跟着团队进行产品的升级,当然我们也需要扩展自己的特色功能,这块我在后面不断把文章写出来,以供大家学习。
在此,先展示一下我在JSAAS平台上初步整合Activiti-Modeler的效果: 
Activiti可视化流程设计器

说实话,虽然这设计器还有一些小小的缺陷,但仍然阻止不了我爱它,因为全新自己开发这东西,那是比较要命的,呵呵,苦逼的程序员呀。于是我多么希望在我的Activiti的流程应用里,直接就带这么一款应用。

现实提美好的, 整合是苦逼的,于是就有本文的出现。

在我的博客前一篇中,已经有说明如何利用Activiti-Modeler的源码跑起来,加至eclipse下运行起来,在本文中即是以该文为基础,进行本文的说明及整合。

2. 整合ACTIVITI-MODELER的要求

Activiti-Modeler 5.18用了新的WEB框架,其是基于Spring-Mvc 4.0以上的框架,同时用了VAADIN的RIA的UI,特别是后者,这框架带有太多的jar包,虽然它也是结合了spring来使用,要整合这玩意,几乎就得把这东西加入我们的项目中,同时还需要整合它的用户管理,这是要命的。我们的出发点,仅是用它的前端画图处理功能,后端的流程逻辑处理即由我们来实现。
于是我研究了一下Activiti-webapp-explorer2项目,发现要实现我以上的目标,原来很简单。以下假定我的环境要求,以下为我的原项目的环境,是基于Spring 3的,我的平台可直接转为Spring4.0,特别是Spring-MVC的环境也转成4.0

3. 整合步骤

3.1. 把前端的设计器文件从ACTIVITI-WEBAPP-EXPLORER2拷至我平台上新建的目录PROCESS-EDITOR,如下图所示:


同时把resources下的stencilset.json文件拷至我的项目中的resources目录下。

3.2.在SPRING项目中加入ACTIVITI 5.18的依赖引用,注意,不能直接从EXPLORER项目中直接取,那样会带有很多无用的JAR包,以下为精简后的POM引用。

		<dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-engine</artifactId>
        	<version>5.18.0</version>
        </dependency>
        <dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-spring</artifactId>
        	<version>5.18.0</version>
        	<exclusions>
        		<exclusion>
        			<artifactId>commons-dbcp</artifactId>
        			<groupId>commons-dbcp</groupId>
        		</exclusion>
        	</exclusions>
        </dependency>
        <dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-diagram-rest</artifactId>
        	<version>5.18.0</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-transcoder</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-dom</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-json-converter</artifactId>
        	<version>5.18.0</version>
        	<exclusions>
        		<exclusion>
        			<artifactId>commons-collections</artifactId>
        			<groupId>commons-collections</groupId>
        		</exclusion>
        	</exclusions>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-bridge</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-css</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-anim</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-codec</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-ext</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-gvt</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-script</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-parser</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-svg-dom</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-svggen</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-util</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-xml</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>org.apache.xmlgraphics</groupId>
        	<artifactId>batik-js</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>xml-apis</groupId>
        	<artifactId>xml-apis-ext</artifactId>
        	<version>1.3.04</version>
        </dependency>
        <dependency>
        	<groupId>xml-apis</groupId>
        	<artifactId>xml-apis</artifactId>
        	<version>1.3.04</version>
        </dependency>
        <dependency>
        	<groupId>org.apache.xmlgraphics</groupId>
        	<artifactId>xmlgraphics-commons</artifactId>
        	<version>1.2</version>
        </dependency>
        <dependency>
        	<groupId>batik</groupId>
        	<artifactId>batik-awt-util</artifactId>
        	<version>1.7</version>
        </dependency>
        <dependency>
        	<groupId>commons-collections</groupId>
        	<artifactId>commons-collections</artifactId>
        	<version>3.2.1</version>
        </dependency>
        <dependency>
        	<groupId>commons-lang</groupId>
        	<artifactId>commons-lang</artifactId>
        	<version>2.6</version>
        </dependency>
	
				

如不采用common-dbcp的数据源时,以上配置排除该包的引用,Batik的包主要是用来解析html中的svg的内容,包比较多,但都不大。

3.3.配置如下的SPRING-ACTIVITI.XML文件,其格式如下所示(可从ACTIVITI-WEBAPP-EXPLORER2下的RESOURCES的ACTIVITI-CUSTOM-CONTEXT.XML文件拷出来),把以下的一些用到EXPLORER表单的配置信息删除。因为我们不采用其表单的配置信息。


    注意点:
  1. 扩展实现自身的idGenerator 
    目的是为了产生唯一的数据主键,方法很多,请自行实现,不扩展也可以。
  2. 配置对应的数据连接信息及数据源、事务等

3.4 .在SPRING的配置文件中引入SPRING-ACTIVITI.XML,启动应用程序即可,可看到其已经把数据库表创建出来。

3.5. 处理ACTIVITI-MODERLER的后台处理的配置。即创建模型设计、保存、更新等内容,它需要与后端进行交互处理。我们看了ACTIVITI-WEBAPP-EXPLORER2的WEB.XML就清楚其后台交互的处理模式。

简要说明:explorer2这个项目在启动后,就会spring mvc4进行包扫描,把(请参考org.activiti.explorer.servlet.DispatcherServletConfiguration),org.activiti.rest.editor、org.activiti.rest.diagram包下的Controller扫描至响应映射中来,为的就是实现编辑器及设计模型的流程展示时,相应有对应的controller服务。

因此,我们比较好的办法就是重写这些controller即可,这些controller的实现也很简单,在这里,我最简单的做法就是把这些类直接拷到我的项目中,重命名了包名。(当然也可以直接把以上两包通过pom依赖加进来),本人不想自己的项目带有太多的依赖包,所以不直接引用了。

拷完后,我这里的包如下所示:

在SpringMVC中加载这些包,注意,SpringMvc需要为4.0以上的,这样才能比较好支持RestController的注解方式,否则,请用旧的方式来支持这种Rest URL访问。


							<!--加入Spring Activiti-Modeler的运行配置-->
    <context:component-scan base-package="com.redxun.bpm.rest.diagram"/>
	<context:component-scan base-package="com.redxun.bpm.rest.editor"/>
						

在web.xml中配置拦截这些访问路径

<servlet-mapping>
    	<servlet-name>springMvc</servlet-name>
    	<url-pattern>/service/*</url-pattern>
</servlet-mapping>
							

3.6. 修改PROCESS-EDITOR下的一些配置文件,以支持我们的在线流程设计

A)去掉Activiti Afresco的logo标题栏,并且把样式上的空白栏去掉修改modeler.html中的以下内容,注意不要把该文本删除,建议加style=”display:none”,删除后其会造成底层下的一些内容有40个像数的东西显示不出来。

	<div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="main-header">
	    <div class="navbar-header">
            <a href="" ng-click="backToLanding()" class="navbar-brand"
               title="{{'GENERAL.MAIN-TITLE' | translate}}"><span
                    class="sr-only">{{'GENERAL.MAIN-TITLE' | translate}}</span></a>
        </div>
	</div>
						

B)在editor-app/css/style-common.css中,把以下样式的padding-top部分改为0px;

.wrapper.full {
    padding: 40px 0px 0px 0px;
    overflow: hidden;
    max-width: 100%;
    min-width: 100%;
}
						
						

C)在modeler.html中加上CloseWindow的函数

<script type="text/javascript">
		function CloseWindow(action) {
		    if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
		    else window.close();            
		}
	</script>
						
						

目的是为了保存模型时,可以关闭当前的弹出的mini窗口,修改保存后弹出的窗口的保存及关闭动作,如下所示,把editor-app/configuration/toolbar-default-action.js的以下函数:

$scope.saveAndClose = function () {
    	$scope.save(function() {
    		window.location.href = "./";
    	});
};
							

改成以下:

	$scope.saveAndClose = function () {
    	$scope.save(function() {
    		CloseWindow('ok');
    	});
    };
								
							

D) 修改editor-app编辑器的根目录,如app-cfg.js

ACTIVITI.CONFIG = {
		'contextRoot' : '/activiti-explorer/service',
};
							

改成自己的根目录:

ACTIVITI.CONFIG = {
	'contextRoot' : '/redxun_web/service',
};
							

在实际的项目中,可以把这些ContextRoot改成动态的获值方式

至此,重启你的应用后,可直接进入目录访问modeler.html页面。直接访问该页面时,框架会出现,但是没有出现你想要的内容。这是因为后台出错了,这个页面要能正常访问要求必须传入Activiti的设计Model的Id,即act_re_model表中的主键,访问路径如: Myroot/process-editor/modeler.html?modelId=12312312。 但这个表的记录怎么产生,这里需要调用一下Acitiviti的API来创建,如下代码片段可以实现该功能。

	String descp=request.getParameter("description");
            ObjectMapper objectMapper = new ObjectMapper();
            ObjectNode editorNode = objectMapper.createObjectNode();
            editorNode.put("id", "canvas");
            editorNode.put("resourceId", "canvas");
            ObjectNode stencilSetNode = objectMapper.createObjectNode();
            stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");
            editorNode.set("stencilset", stencilSetNode);
            Model modelData = repositoryService.newModel();
            
            ObjectNode modelObjectNode = objectMapper.createObjectNode();
            modelObjectNode.put(MODEL_NAME, actReModel.getName());
            modelObjectNode.put(MODEL_REVISION, 1);
            //String description = null;
           
            modelObjectNode.put(MODEL_DESCRIPTION, descp);
            modelData.setMetaInfo(modelObjectNode.toString());
            modelData.setName(actReModel.getName());
            
            repositoryService.saveModel(modelData);
            repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));

至此,整合创建完成,后续我们会基于Activiti上进行扩展,以实现流程在线定义,流程人员挂接、表单关联、代办事项、代理、转办、归档等复杂的中国特色流程的需求。 在线访问整合效果,如:

流程管理模块下的流程模型设计

分享到:
评论
1 楼 xxxx1243 2015-12-04  
有整合完的代码么,我也在整合,没成功.郁闷

相关推荐

    Activiti在线流程设计器

    忙活了一个星期左右,查找各种资料,终于将Activiti的流程设计器分离出来,与SpringMVC,spring整合了起来,先把工程分享出来,等有时间了在慢慢讲解具体的整合步骤。工程下载之后直接可以运行,只需要改一下数据库...

    activiti-modeler工作流网页版设计器

    7. **权限与协作**: Activiti-Modeler还支持角色和权限管理,这意味着可以控制谁可以查看、编辑和部署流程模型,从而确保了流程设计的安全性。 8. **版本控制**: 对于大型项目,版本控制功能至关重要。Activiti-...

    idea可扩展的activiti流程设计器camunda-modeler-3.0.0-win-x64.zip

    idea可扩展的activiti流程设计器camunda-modeler-3.0.0-win-x64.zip,可代替actiBPM插件,使用介绍https://blog.csdn.net/Arsenalzjx/article/details/96288482

    springboot2.0.3+activiti.5.22.0+oracle在线流程设计器(Activiti-Modeler )整合

    7. 网页设计器整合:Activiti Modeler与SpringBoot应用无缝集成,用户在Web端即可进行全流程设计,降低了系统部署和使用的复杂度。 这个项目不仅提供了完整的流程管理功能,而且具有良好的扩展性和可定制性,对于...

    activiti5.9的编辑组件activiti-modeler

    在实际项目中,这个工具可以作为流程设计阶段的核心部分,帮助团队快速创建符合BPMN标准的流程图。 在提供的文件名称列表中,“oryx.debug.js”可能是Activiti Modeler中用于调试的JavaScript文件。Oryx是一个开源...

    activiti-modeler-5.18流程设计器整合springmvc+spring例子

    Activiti的流程设计器分离出来,与SpringMVC,spring整合了起来,先把工程分享出来,等有时间了在慢慢讲解具体的整合步骤。工程下载之后直接可以运行,只需要改一下数据库连接。访问...

    Activiti 6.0 流程设计器汉化

    Activiti 6.0 流程设计器汉化,替换Activiti-App下的activiti-app-logic-6.0.0.jar 文件,既然是技术分享,为什么没有免费资源分数,我只想分享一下,便于那些没有积分的,结果还得2积分,没有积分的可以加我QQ

    camunda-modeler-3.0.0-win-x64 activiti流程图插件

    总的来说,camunda-modeler-3.0.0-win-x64 activiti流程图插件是企业级流程管理和自动化的重要工具,结合了Camunda BPM的强大功能和Activiti的灵活性,提供了高效、直观的流程设计环境。通过这些底层库文件的支持,...

    activiti-modeler集成到spring项目

    7. **交互接口**:创建RESTful API或基于Spring MVC的控制器,使`activiti-modeler`可以与后台交互,进行流程部署、启动、查询、任务处理等操作。 8. **安全控制**:确保用户只有在登录后才能访问流程设计和管理...

    springBoot-activiti-modeler-master.zip

    本文将深入探讨如何在SpringBoot项目中集成Activiti,并集成Activiti Modeler作为在线流程设计工具,同时通过Java反射技术实现表单的动态绑定。 一、Activiti简介 Activiti是一款开源的工作流引擎,它支持BPMN 2.0...

    activiti modeler.zip_activiti_activiti-modeler_java_zip

    此外,Activiti Modeler还支持导出和导入流程模型,使得流程设计能够在不同的系统间共享和复用。 在Java环境下,Activiti Modeler通常作为一个Web应用程序运行,它可以被集成到各种企业级应用中,例如Spring Boot...

    SpringBoot 集成 Activiti在线设计器(完整Demo)

    小编 做的这个项目有部分功能用到了 Activiti工作流,目前对工作流的掌握程度是基本会用,我之前写过一篇 Activiti 入门篇,当前这篇文章是属于Activiti 实战部分,如果你想知道Activiti 工作流是如何使用的话,那就...

    IDEA可使用的activiti bpmn流程设计器camunda-modeler-附件资源

    IDEA可使用的activiti bpmn流程设计器camunda-modeler-附件资源

    spring boot整合activiti modeler 实例

    在本实例中,我们将探讨如何将这两个优秀框架整合起来,利用 Activiti Modeler 在 Spring Boot 应用中实现业务流程的可视化设计和执行。 首先,我们需要理解 Spring Boot 如何配置 Activiti。在 Spring Boot 项目中...

    Activiti工作流整合Web流程设计器整合

    Activiti工作流引擎是一款强大的开源工作流解决方案,它基于模型驱动的架构,旨在为企业...而提供的"Activiti整合流程设计器"压缩包文件很可能包含了示例代码、配置文件和教程资源,有助于进一步学习和实践这个主题。

    camunda-modeler-4.8.1-win-x64.zip

    通过Camunda Modeler,用户可以直接在IDE内进行流程设计,并与Activiti引擎无缝集成,实现流程的部署和执行。 总的来说,camunda-modeler 4.8.1版本是一个强大且易用的流程建模工具,通过与IDE的集成和一系列底层库...

    Activiti-modeler集成项目.zip

    在这个"Activiti-modeler集成项目.zip"中,我们将探讨如何将Activiti Modeler与Spring MVC框架集成,创建一个能够支持流程设计和执行的Web应用。 首先,集成Spring MVC和Activiti需要理解这两个组件的基本原理。...

    Activiti6-modeler-demo-master.zip

    项目中的流程设计器可能是基于Activiti提供的Modeler组件,这是一个基于浏览器的工具,允许用户通过拖拽的方式创建流程图。它通常会有一个REST API接口,用于保存和加载流程模型。 4. **流程实例的运行** 设计好...

    activiti-api-spring-integration-example.zip

    Activiti提供了一套基于BPMN 2.0标准的流程定义语言(即 Activiti BPMN Modeler),使得流程设计直观易懂。它支持流程的启动、暂停、继续、终止等操作,并提供了丰富的任务管理、事件处理和规则集成等功能。同时,...

    activiti-in-action-codes-master.zip

    在实际应用中,Activiti 不仅是一个执行引擎,还可以配合使用流程设计器(如Activiti Modeler)进行可视化流程设计,生成对应的BPMN 2.0 XML文件。这些XML文件会被部署到Activiti Engine,然后在运行时执行。 源码...

Global site tag (gtag.js) - Google Analytics