整合Acitiviti在线流程设计器(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-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&
B)在editor-app/css/style-common.css中，把以下样式的padding-top部分改为0
.wrapper.full {
padding: 40px 0px 0px 0
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();
目的是为了保存模型时，可以关闭当前的弹出的mini窗口，修改保存后弹出的窗口的保存及关闭动作，如下所示：
&script type=&text/javascript&&
function CloseWindow(action) {
if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
else window.close();
目的是为了保存模型时，可以关闭当前的弹出的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=。
但这个表的记录怎么产生，这里需要调用一下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 =
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上进行扩展，以实现流程在线定义，流程人员挂接、表单关联、代办事项、代理、转办、归档等复杂的中国特色流程的需求。
在线访问整合效果，如：
:8020/saweb/index.do
流程管理模块下的流程模型设计
相关 [acitiviti 在线 设计] 推荐：
- 开源软件 - ITeye博客
整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0).
一直以来都是从事大量的工作流相关的项目，用过很多商用的工作流产品，包括国内与国外的，尽管商用的工作产品在UI操作上比较人性化，但个人用户觉得，这东西只需要一些初级用户，对于我们一直在为一些高级的客户提供一些专业的数据整合、流程梳理、系统间的数据穿透时，这些系统因为不开源，给项目的实施带来巨大的风险，在一些项目栽过跟头后，我更偏向于使用开源的平台了.
很早就关注到
Canva 这个看起来叼炸天的应用， 创始人包括了有 Google 设计师背景的 Cameron Adams 等，首轮融资 300 万美刀，励志打造一个简单至极人人都能用的傻瓜型图形设计工具. 国庆期间终于收到了测试邀请，今天简单试用了一下，总结一下就是 拖拖拽拽就能做设计但对于天朝用户来说还不够接地气.
- 企业架构 - ITeye博客
一直以来都是从事大量的工作流相关的项目，用过很多商用的工作流产品，包括国内与国外的，尽管商用的工作产品在UI操作上比较人性化，但个人用户觉得，这东西只需要一些初级用户，对于我们一直在为一些高级的客户提供一些专业的数据整合、流程梳理、系统间的数据穿透时，这些系统因为不开源，给项目的实施带来巨大的风险，在一些项目栽过跟头后，我更偏向于使用开源的平台了.
- Esperisto - 小众软件
美家达人 是一款在线工具，帮助你轻松的进行室内设计，家居装修，让不会 CAD 的同学也能设计. 小众推荐过一款 Sweet Home 3D – 室内装潢设计，可以不需要复杂的电脑水平就能自己设计出家居，今天推荐的美家达人，来头不小，属于欧特克公司，就是 AutoCAD 的母公司了. 美家达人拥有更加简单易用的界面，被称作”人人可以用的室内设计软件”.
- 前端观察
大家可能还记得在过去的文章我们我们曾经介绍我们收集的
前端开发人员必备的工具，脚本和资源，在今天的这篇文章中，我们将继续推荐给大家一组我们精挑细选的web开发设计必备的在线工具应用. 相信会在web开发和设计的过程中给你带来方便和快捷. jsfiddle是老牌的在线调试和分享代码的网站，它可以帮助你在线调试javascript/css/html代码， 并且方便的发布到社区，论坛或者社交媒体上与朋友们分享或者提问.
- CSDN博客Web前端推荐文章
最近在网上看到一张帖子感觉不错. 不过是英文版的今天闲着没事锻炼一下英语能力分享给大家看看. 原文地址：
/tools/8-useful-online-tools-for-web-designers-and-developers. 在工作中借助一些非常好用的工具可以让你专注于更重要的事情，进而提高工作效率.
- 幻风阁|kent.zhu'sBlog
我有个习惯，每天晚上睡前会搜罗一遍最新的App用用. 最开始的时候ios的App还相对比较朴实，强调功能的实用性，后来不知何故吹起一阵ios的App必须足够精美的怪风. 于是乎，各类App纷纷上演换装游戏，一个比一个做的精美，即使是一个很工具性的应用也把自己浓妆艳抹的往坐台小姐的风格搞……. 上周末跟Tony和Angela在下厨房喝茶闲聊，我说目前的移动产品设计可以分为2类，一类是做给用户用的，一类是做给设计师们欣赏与收藏的.
- Yu - 创意设计-有趣、时尚、另类的创意
微向上的设计，在倒水完毕的时候可以让水滴顺着杯盖回流到杯子中，而不会随意的滴下来. 虽然是细小的设计，但是考虑的却是生活的便利.
- Mark - 腾讯CDC
　　一个网站的核心是它的功能和内容，而设计则决定了这些功能、内容如何被组织和展现出来. 　　对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上，尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路，一是对现有问题挖掘然后改进，二是提出完全创新的想法.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。如何使用Activiti Rest模块_百度知道
如何使用Activiti Rest模块
提问者采纳
ctiviti REST模块介绍 关于Rest的介绍就免除了。 1：利用现有模块（activiti-rest，主要介绍一下Activiti Rest模块的功能以及如何使用.1 使用REST的好处 简单化.war）代替直接API调用 标准化
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁分享 - 咖啡兔 - HenryYan
这又是一片迟来的博客，上一篇博文还是日写的，因为很多内容都在书（《》）里了已经有详细的解释了，不过由于书里面使用的是5.16.4版本，从5.17.0版本后Activiti Modeler的整合方式有些变化，所以写此博问作为补充内容。
此教程适合Activiti 5.17+版本。
本博客所涉及的内容均可在中找到。
在线demo可以访问
菜单路径：管理模块 -> 流程管理 -> 模型工作区，可以『创建』或者『编辑』模型
上一篇介绍整合Activiti Modeler已经有2年多时间了，自从Activiti 5.17版本发布以后该教程已经不适用了，很多网友也反馈不知道怎么把Activiti Modeler整合到自己的项目中去，为此抽时间为适配5.17+版本的集成方法整理成这篇博文，希望对有需求的网友有帮助。
最新版本的kft-activiti-demo已经使用了5.17+版本的Activiti，并且集成了最新的Activiti Modeler组件，可以下载最新源码：。
1.1 新版Activiti Modeler特性
先来欣赏一下新版的界面，相比上一版漂亮了许多，调性高了~~~
界面布局：上（工具区）、左（组件类目）、右（工作区）、右下（属性区）
Activiti Modeler内部的实现上还是以oryx为图形组件为内核，用angular.js作为界面基本元素的基础组件以及调度oryx的API。
2. 官方Activiti Explorer的集成方式
先从Github下载官方Activiti源码，地址：。
2.1 Activiti Exploer的内部结构-Java
源码目录（如果是zip下载请先解压缩）中找到modules/activiti-webapp-explorer2/src/main子目录，结构如下：
├── assembly
├── java
└── org
└── activiti
├── resources
└── org
└── activiti
└── webapp
├── META-INF
├── VAADIN
├── themes
└── widgetsets
├── WEB-INF
├── diagram-viewer
├── images
└── editor-app
├── configuration
├── css
├── editor
├── fonts
├── i18n
├── images
├── libs
├── partials
├── popups
└── stencilsets
我们需要关注的目录是webapp/editor-app，以及java/org/activiti，目录结构：
新版本的Activiti Explorer放弃了XML方式的配置方式，采用Bean Configuration的方式代替，上图中org/activiti/explorer/conf包中就是各种配置，在org/activiti/explorer/servlet/WebConfigurer类用Servlet 3.0方式配置Servlet映射关系，映射的路径为/service/*。
2.2 Activiti Exploer的内部结构-Web
新版本Activiti Modeler的Web资源不再像旧版那么散乱，新版本只需要关注：
src/main/webapp/editor-app：目录中包含设计器里面所有的资源：angular.js、oryx.js以及配套的插件及css
src/main/webapp/modeler.html：设计器的主页面，用来引入各种web资源
src/main/resources/stencilset.json: bpmn标准里面各种组件的json定义，editor以import使用。
3. 整合到自己的项目中
了解过网友的需求不知道如何整合新版Activiti Modeler的原因有两个：
不知道怎么把注解的方式转换为XML方式
editor-app目录的结构位置
和自己应用的整合参数配置
3.1 Activiti Rest接口与Spring MVC配置
3.1.1 Maven依赖
Activiti Modeler对后台服务的调用通过Spring MVC方式实现，所有的Rest资源统一使用注解RestController标注，所以在整合到自己项目的时候需要依赖Spring MVC，Modeler模块使用的后台服务都存放在activiti-modeler模块中，在自己的项目中添加依赖：
&dependency&
&groupId&org.activiti&/groupId&
&artifactId&activiti-modeler&/artifactId&
&version&5.19.0&/version&
&/dependency&
&dependency&
&groupId&org.activiti&/groupId&
&artifactId&activiti-diagram-rest&/artifactId&
&version&5.19.0&/version&
&/dependency&
模块作用：
activiti-modeler模块提供模型先关的操作：创建、保存、转换json与xml格式等
activiti-diagram-rest模块用来处理流程图有关的功能：流程图布局（layout）、节点高亮等
3.1.2 准备基础服务类
复制文件(/henryyan/kft-activiti-demo/tree/master/src/main/java/org/activiti/explorer) 里面的java文件到自己项目中。
3.1.3 Activiti Spring配置
创建文件src/main/resources/beans/beans-activiti.xml定义Activiti引擎的beans：
&?xml version="1.0" encoding="UTF-8"?&
&beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd"&
&context:component-scan
base-package="org.activiti.conf,org.activiti.rest.editor"&
&context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/&
&/context:component-scan&
&!-- 单例json对象 --&
&bean id="objectMapper" class="com.fasterxml.jackson.databind.ObjectMapper"/&
&!-- 引擎内部提供的UUID生成器，依赖fastxml的java-uuid-generator模块 --&
&bean id="uuidGenerator" class="org.activiti.engine.impl.persistence.StrongUuidGenerator" /&
&!-- Activiti begin --&
&bean id="processEngineConfiguration" class="org.activiti.spring.SpringProcessEngineConfiguration"&
&property name="dataSource" ref="dataSource"/&
&property name="transactionManager" ref="transactionManager"/&
&property name="databaseSchemaUpdate" value="true"/&
&property name="jobExecutorActivate" value="true"/&
&bean id="processEngine" class="org.activiti.spring.ProcessEngineFactoryBean"&
&property name="processEngineConfiguration" ref="processEngineConfiguration"/&
&!-- 7大接口 --&
&bean id="repositoryService" factory-bean="processEngine" factory-method="getRepositoryService"/&
&bean id="runtimeService" factory-bean="processEngine" factory-method="getRuntimeService"/&
&bean id="formService" factory-bean="processEngine" factory-method="getFormService"/&
&bean id="identityService" factory-bean="processEngine" factory-method="getIdentityService"/&
&bean id="taskService" factory-bean="processEngine" factory-method="getTaskService"/&
&bean id="historyService" factory-bean="processEngine" factory-method="getHistoryService"/&
&bean id="managementService" factory-bean="processEngine" factory-method="getManagementService"/&
在spring初始化的时候引入即可，例如在web.xml中使用通配符方式：
&context-param&
&param-name&contextConfigLocation&/param-name&
&param-value&classpath*:/beans/beans-*.xml&/param-value&
&/context-param&
3.1.4 Spring MVC配置
创建文件WEB-INF/spring-mvc-modeler.xml，内容如下：
&?xml version="1.0" encoding="UTF-8"?&
&beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd"&
&!-- 自动扫描且只扫描@Controller --&
&context:component-scan base-package="org.activiti.rest.editor,org.activiti.rest.diagram"&
&context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /&
&/context:component-scan&
&mvc:annotation-driven /&
上面XML中告知spring mvc扫描路径为**
3.1.5 web.xml中配置Servlet服务
在web.xml中配置下面的Servlet：
&servlet-name&ModelRestServlet&/servlet-name&
&servlet-class&org.springframework.web.servlet.DispatcherServlet&/servlet-class&
&init-param&
&param-name&contextConfigLocation&/param-name&
&param-value&/WEB-INF/spring-mvc-modeler.xml&/param-value&
&/init-param&
&load-on-startup&1&/load-on-startup&
&/servlet&
&servlet-mapping&
&servlet-name&ModelRestServlet&/servlet-name&
&url-pattern&/service/*&/url-pattern&
&/servlet-mapping&
3.1.6 模型设计器的Web资源
直接从Activiti Explorer中复制文件modeler.html文件到src/main/webapp目录即可，该文件会引入定义基本的布局（div）、引入css以及js文件。
修改editor-app/app-cfg.js文件的contextRoot属性为自己的应用名称，例如/kft-activiti-demo/service
3.1.7 模型控制器
在中已经介绍过ModelController类的作用了，这里需要在基础上稍微做一点调整：
create方法中在创建完Model后跳转页面由service/editor?id=改为modeler.html?modelId=
当从模型列表编辑某一个模型时也需要把路径修改为modeler.html?modelId=
4. 整合Activiti Rest
有了Activiti Modeler的基础只需要依葫芦画瓢即可。
4.1 Maven依赖
&dependency&
&groupId&org.activiti&/groupId&
&artifactId&activiti-rest&/artifactId&
&version&5.19.0&/version&
&/dependency&
4.3 Activiti组件包扫描
文件src/main/resources/beans/beans-activiti.xmlcontext:component-scan标签的base-package属性中添加org.activiti.rest.service包，包里面包含了所有Rest API的接口Rest Controller。
4.4 添加Rest安全认证组件
package org.activiti.
import org.activiti.rest.security.BasicAuthenticationP
import org.springframework.context.annotation.B
import org.springframework.context.annotation.C
import org.springframework.security.authentication.AuthenticationP
import org.springframework.security.config.annotation.web.builders.HttpS
import org.springframework.security.config.annotation.web.configuration.EnableWebS
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerA
import org.springframework.security.config.annotation.web.servlet.configuration.EnableWebMvcS
import org.springframework.security.config.http.SessionCreationP
@Configuration
@EnableWebSecurity
@EnableWebMvcSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
public AuthenticationProvider authenticationProvider() {
return new BasicAuthenticationProvider();
protected void configure(HttpSecurity http) throws Exception {
http.authenticationProvider(authenticationProvider())
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
.csrf().disable()
.authorizeRequests()
.anyRequest().authenticated()
.httpBasic();
4.5 spring mvc配置文件
创建文件WEB-INF/spring-mvc-rest.xml：
&?xml version="1.0" encoding="UTF-8"?&
&beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd"&
&!-- 自动扫描且只扫描@Controller --&
&context:component-scan base-package="org.activiti.rest"&
&context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /&
&/context:component-scan&
&mvc:annotation-driven /&
4.6 配置Servlet映射
&servlet-name&RestServlet&/servlet-name&
&servlet-class&org.springframework.web.servlet.DispatcherServlet&/servlet-class&
&init-param&
&param-name&contextConfigLocation&/param-name&
&param-value&/WEB-INF/spring-mvc-rest.xml&/param-value&
&/init-param&
&load-on-startup&1&/load-on-startup&
&/servlet&
&servlet-mapping&
&servlet-name&RestServlet&/servlet-name&
&url-pattern&/rest/*&/url-pattern&
&/servlet-mapping&
4.7 访问Rest接口
现在启动应用可以访问 http://localhost:8080/your-app/rest/management/properties 以Rest方式查看引擎的属性列表，如果在网页中访问会提示输入用户名密码；也可以访问在线demo测试
http://demo.kafeitu.me:8080/kft-activiti-demo/rest/management/properties （用户名：kafeitu，密码：000000）
以上步骤如果在实施过程中有问题可以参考中的配置，有其他问题可以在本博客中留言或者到QQ群问询。
最后再广告一下我的书，Tijs强力推荐的哦；同时也感谢一直支持和活跃在Activiti社区的你。
首先这是一篇迟来的教程，因为从5.12版本（目前最新版本为5.15.1）开始就已经提供了Diagram Viewer这个流程图跟踪组件，不管如何总归有人需要用到，所以我觉得还是要和大家分享一下。
目前被大家所采用的流程图跟踪有两种方式：
一种是由引擎后台提供图片，可以把当前节点标记用红色
一种是比较灵活的方式，先用引擎接口获取流程图（原图），然后再通过解析引擎的Activity对象逐个解析（主要是判断哪个是当前节点），最后把这些对象组成一个集合转换成JSON格式的数据输出给前端，用Javascript和Css技术实现流程的跟踪
这两种方式在kft-activiti-demo中都有演示，这里就不介绍了，参考流程跟踪部门代码即可。
2. Diagram Viewer简介
Diagram Viewer是官方在5.12版本中添加的新组件，以为基础库，用REST（参考：《》）方式获取JSON数据生成流程图并把流程的处理过程用不同的颜色加以标注，最终的效果如下图所示。
在应用中使用时也很方便，把这个组件的源码复制到项目中再配置一个REST拦截器，最后拼接一个URL即可；举个例子：
http://demo.kafeitu.me/kft-activiti-demo/diagram-viewer/index.html?processDefinitionId=leave-jpa:1:22&processInstanceId=27
这个URL中有两个参数：
processDefinitionId: 流程定义ID
processInstanceId: 流程实例ID
3. 集成Diagram Viewer
3.1 创建REST路由类
REST路由类源码在官方的Activiti Explorer里面有提供，代码如下：
package org.activiti.explorer.
import org.mon.api.DefaultR
import org.mon.application.ActivitiRestA
import org.mon.filter.JsonpF
import org.activiti.rest.diagram.application.DiagramServicesI
import org.activiti.rest.editor.application.ModelerServicesI
import org.restlet.R
import org.restlet.routing.R
public class ExplorerRestApplication extends ActivitiRestApplication {
public ExplorerRestApplication() {
* Creates a root Restlet that will receive all incoming calls.
public synchronized Restlet createInboundRoot() {
Router router = new Router(getContext());
router.attachDefault(DefaultResource.class);
ModelerServicesInit.attachResources(router);
DiagramServicesInit.attachResources(router);
JsonpFilter jsonpFilter = new JsonpFilter(getContext());
jsonpFilter.setNext(router);
return jsonpF
把这个路由配置到web.xml中：
ExplorerRestletServlet
org.restlet.ext.servlet.ServerServlet
org.restlet.application
org.activiti.explorer.rest.ExplorerRestApplication
ExplorerRestletServlet
/service/*
3.2 复制Diagram Viewer组件
在官方提供的Zip文件（可以从下载）中有一个wars目录，用压缩工具解压activiti-explorer.war文件，目录结构如下图：
把diagram-viewer复制到项目的webapp目录（或者是WebRoot目录）下，在项目中需要跟踪的地方拼接访问diagram-viewer/index.html的URL即可，别忘记了刚刚介绍的两个重要参数。
http://demo.kafeitu.me/kft-activiti-demo/diagram-viewer/index.html?processDefinitionId=leave-jpa:1:22&processInstanceId=27
URL中有两个参数：
processDefinitionId: 流程定义ID
processInstanceId: 流程实例ID
这是一个独立的页面，你可以直接打开它或者把它嵌入在一个对话框里面（kft-activiti-demo就是用的嵌入方式）。
1. 为何集成JPA
在《》一文中介绍了不同表单的特点以及表现形式，相信这是每个初学者都会面临表单类型的选择。
如果选择了使用动态表单那么将面临一个比较“严峻”的问题——大数据量，我们知道动态表单的内容都保存在一张表中（ACT_HI_DETAIL），我们也清楚动态表单中每一个Field都会在该表中插入一条记录，假如一个流程共有20个字段，这个数据量大家可以计算一下，每天多少个流程实例，每个月、每年多少？
日积月累的大数据会影响系统的性能，尤其涉及到关联查询时影响更深，除了性能之外动态表单还有一个弊端那就是数据是以行的形式存储没有任何数据结构可言，流程运行中生成的数据很难被用于分析、查询，如何破解嘞？
2. 如何集成JPA
Activiti除了核心的Engine之外对企业现有的技术、平台、架构都有所支持，对于业务实体的持久化当然也会有所支持，那就是EJB的标准之一）——JPA，引擎把JPA的API引入到了内部，使用JPA功能的时候只需要把entityManagerFactory配置到引擎配置对象（参考：）即可。
参考用户手册的JPA章节，介绍了引擎配置对象中的几个jpa有关的属性，如下：
jpaPersistenceUnitName: 使用持久化单元的名称（要确保该持久化单元在类路径下是可用的）。根据该规范，默认的路径是/META-INF/persistence.xml)。要么使用 jpaEntityManagerFactory 或者jpaPersistenceUnitName。
jpaEntityManagerFactory: 一个实现了javax.persistence.EntityManagerFactory的bean的引用。它将被用来加载实体并且刷新更新。要么使用jpaEntityManagerFactory 或者jpaPersistenceUnitName。
jpaHandleTransaction: 在被使用的EntityManager 实例上，该标记表示流程引擎是否需要开始和提交/回滚事物。当使用Java事物API（JTA）时，设置为false。
jpaCloseEntityManager: 该标记表示流程引擎是否应该关闭从 EntityManagerFactory获取的 EntityManager的实例。当EntityManager 是由容器管理的时候需要设置为false（例如 当使用并不是单一事物作用域的扩展持久化上下文的时候）。
2.1 配置持久化单元或者EntityManagerFactory
要在引擎中使用JPA需要提供EntityManagerFactory或者提供持久化单元名称（引擎会自动查找最终获取到EntityManagerFactory对象），在使用的时候可以根据自己的实际情况进行选择，在kft-activiti-demo中使用了jpaEntityManagerFactory属性注入EntityManagerFactory对象的方式。
2.2 Standalone模式的JPA配置
2.3 Spring（托管）模式的JPA配置
3. 实例分析
在最新版本（1.10）的kft-activiti-demo中添加了JPA演示，大家可以从上下载源码查看源码。
3.1 相关说明
流程定义文件：leave-jpa.bpmn
实体文件：me.kafeitu.demo.activiti.entity.oa.LeaveJpaEntity
实体管理器：me.kafeitu.demo.activiti.service.oa.leave.LeaveEntityManager
3.2 创建实体
在流程定义文件中定义了一个流程的start类型监听器：
这个监听器的触发的时候会执行一个表达式，调用名称为leaveEntityManager的Spring Bean对象的newLeave方法，并且把引擎的Execution对象传递过去，得到一个LeaveJpaEntity对象后设置到引擎的变量中（名称为leave）。
下面是LeaveEntityManager.java的代码：
@Entity(name = "LEAVE_JPA")
public class LeaveJpaEntity implements Serializable {
private String processInstanceId;
private String userId;
private Date startT
private Date endT
private Date realityStartT
private Date realityEndT
private Date reportBackD
private Date applyT
private String leaveT
* 部门领导是否同意
private String deptLeaderA
* HR是否同意
private String hrA
public class LeaveEntityManager {
@PersistenceContext
private EntityManager entityM
/* 把流程变量的值赋值给JPA实体对象并保存到数据库 */
@Transactional
public LeaveJpaEntity newLeave(DelegateExecution execution) {
LeaveJpaEntity leave = new LeaveJpaEntity();
leave.setProcessInstanceId(execution.getProcessInstanceId());
leave.setUserId(execution.getVariable("applyUserId").toString());
leave.setStartTime((Date) execution.getVariable("startTime"));
leave.setEndTime((Date) execution.getVariable("endTime"));
leave.setLeaveType(execution.getVariable("leaveType").toString());
leave.setReason(execution.getVariable("reason").toString());
leave.setApplyTime(new Date());
entityManager.persist(leave);
public LeaveJpaEntity getLeave(Long id) {
return entityManager.find(LeaveJpaEntity.class, id);
当启动流程后查看表LEAVE_JPA中的数据与表单填写的一致。
3.3 在流程中更改实体的值
当部门领导或者人事审批节点完成时需要把审批结果更新到LeaveJpaEntity属性中（即更新表LEAVE_JPA），所以在这两个任务上添加一个complete类型的监听器，如下所示：
3.4 流程结束后删除表单数据
熟悉Activiti表的应该知道表单数据会保存在表ACT_HI_DETAIL中，特性是字段TYPE_字段的值为FormProperty，我们只要根据流程实例ID过滤删除记录就可以清理掉已经结束流程的表单数据。
在最新版本的Demo中（1.10版本）添加了一个类用来执行SQL：
@Component
public class ActivitiDao {
@PersistenceContext
private EntityManager entityM
* 流程完成后清理detail表中的表单类型数据
* @param processInstanceId
public int deleteFormPropertyByProcessInstanceId(String processInstanceId) {
int i = entityManager.createNativeQuery("delete from act_hi_detail where proc_inst_id_ = ? and type_ = 'FormProperty' ")
.setParameter(1, processInstanceId).executeUpdate();
流程中定义了一个流程级别的结束监听器me.kafeitu.demo.activiti.service.oa.leave.LeaveProcessEndListener
@Transactional
public class LeaveProcessEndListener implements ExecutionListener {
protected Logger logger = LoggerFactory.getLogger(getClass());
@Autowired
ActivitiDao activitiD
public void notify(DelegateExecution execution) throws Exception {
String processInstanceId = execution.getProcessInstanceId();
int i = activitiDao.deleteFormPropertyByProcessInstanceId(processInstanceId);
logger.debug("清理了 {} 条历史表单数据", i);
3.5 已知问题（未解决）
图中的三条数据因为是在销假任务完成后设置的，不知道是不是引擎的Bug导致插入这三个表单属性比调用流程结束监听器还晚（从引擎的日志中可以分析出来）导致这三条记录不能被删除，因为在删除的时候这三条数据还没有插入到数据库。
这个问题后面会继续跟踪，解决了会在这里更新！！！
Activiti中文群1：
Activiti中文群2：
Activiti中文群3：
Activiti中文群4：
Git中文群：
Maven中文群：
Jenkins中文群：
Activiti中文论坛
开源项目&服务