整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0)
1.概述前言
在国内的企业办公、企业业务管理、流程管理等业务要求中，我们都需要一块流程的业务管理设计工具，特别是面向BPMN2标准的，Activiti Modeler刚好就是这样一款不错的设计工具，而本文则描述如何把它整合到我们自身的系统中去。如下我们来看一下其整合后的效果，可以看得出其支持丰富的BPMN元素。
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引用。
org.activiti
activiti-engine
5.18.0
org.activiti
activiti-spring
5.18.0
commons-dbcp
commons-dbcp
org.activiti
activiti-diagram-rest
5.18.0
batik
batik-transcoder
1.7
batik
batik-dom
1.7
org.activiti
activiti-json-converter
5.18.0
commons-collections
commons-collections
batik
batik-bridge
1.7
batik
batik-css
1.7
batik
batik-anim
1.7
batik
batik-codec
1.7
batik
batik-ext
1.7
batik
batik-gvt
1.7
batik
batik-script
1.7
batik
batik-parser
1.7
batik
batik-svg-dom
1.7
batik
batik-svggen
1.7
batik
batik-util
1.7
batik
batik-xml
1.7
org.apache.xmlgraphics
batik-js
1.7
xml-apis
xml-apis-ext
1.3.04
xml-apis
xml-apis
1.3.04
org.apache.xmlgraphics
xmlgraphics-commons
1.2
batik
batik-awt-util
1.7
commons-collections
commons-collections
3.2.1
commons-lang
commons-lang
2.6
【说明】
- 如不采用common-dbcp的数据源时，以上配置排除该包的引用，
- Batik的包主要是用来解析html中的svg的内容，包比较多，但都不大。
3.3.配置如下的spring-activiti.xml文件，其格式如下所示（可从activiti-webapp-explorer2下的resources的activiti-custom-context.xml文件拷出来），把以下的一些用到explorer表单的配置信息删除。因为我们不采用其表单的配置信息。
注意点：
- 扩展实现自身的idGenerator
目的是为了产生唯一的数据主键，方法很多，请自行实现，不扩展也可以。
- 配置对应的数据连接信息及数据源、事务等
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访问，配置如下：
在web.xml中配置拦截这些访问路径
springMvc
/service/*
springMvc
/service/*
3.6. 修改process-editor下的一些配置文件，以支持我们的在线流程设计
A)去掉Activiti Afresco的logo标题栏，并且把样式上的空白栏去掉
修改modeler.html中的以下内容，注意不要把该文本删除，建议加style=”display:none”,删除后其会造成底层下的一些内容有40个像数的东西显示不出来。
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的函数
目的是为了保存模型时，可以关闭当前的弹出的mini窗口，修改保存后弹出的窗口的保存及关闭动作，如下所示，把editor-app/configuration/toolbar-default-action.js的以下函数：
$scope.saveAndClose = function () {
$scope.save(function() {
window.location.href = "./";
});
};改成以下：
$scope.saveAndClose = function () {
$scope.save(function() {
window.location.href = "./";
});
};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上进行扩展，以实现流程在线定义，流程人员挂接、表单关联、代办事项、代理、转办、归档等复杂的中国特色流程的需求。
在线访问整合效果，如：
查看整合的视频效果如下：
http://www.redxun.cn/?p=451
在线整合的效果如登录后的流程管理–流程定义设计–添加流程
http://www.redxun.cn:8020/saweb/login.jsp