SpringMvc整合Activiti网页流程设计器

项目基于maven构建，如果不是maven项目则参考pom自行引入相关jar包

activiti版本：<activiti.version>5.21.0</activiti.version>

activiti相关jar：

<!--
activiti start-->

<dependency>
   <groupId>org.activiti</groupId>
   <artifactId>activiti-engine</artifactId>
   <version>${activiti.version}</version>
</dependency>

<dependency>
   <groupId>org.activiti</groupId>
   <artifactId>activiti-spring</artifactId>
   <version>${activiti.version}</version>
</dependency>

<dependency>
   <groupId>org.activiti</groupId>
   <artifactId>activiti-modeler</artifactId>
   <version>${activiti.version}</version>
</dependency>

<!--
activiti end-->

以上配置加入你的pom文件！

假设已经搭建springmvc的环境，将以上依赖加入后，加入activiti的配置，可以直接放在springmvc配置文件中，这里我单独创建并让web容器加载，配置如下：

<?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.xsd">
<bean id="processEngineConfiguration" class="org.activiti.spring.SpringProcessEngineConfiguration">
<property name="dataSource" ref="dataSource" />
<property name="transactionManager" ref="transactionManager" />
<property name="databaseType" value="mysql"></property>
<property name="databaseSchemaUpdate" value="true" />
<property name="jobExecutorActivate" value="false" />
</bean>

<bean id="objectMapper" class="com.fasterxml.jackson.databind.ObjectMapper"/>

 
<bean
c388
id="processEngine" class="org.activiti.spring.ProcessEngineFactoryBean">
<property name="processEngineConfiguration" ref="processEngineConfiguration" />
</bean>

 
<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="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" />

<bean id="identityService" factory-bean="processEngine"
factory-method="getIdentityService" />

 
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>

</beans>

上面配置中的数据源和事物我已经和项目统一，如果需要可以单独配置datasource和transactionManager，如果有类似ssm之类的环境都已经配置好了，这里直接引入即可。如果没有则需要百度先配置好。

另外所加入的配置文件一定要让web容器加载到！

简单点可以直接在web容器的配置中加入：

<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>

classpath:conf/spring/spring-xxx.xml

classpath:conf/spring/spring-yyy.xml

</param-value>
</context-param>

有多少个就写多少个，这样web容器就可以加载到了。

下载网页流程设计器的静态文件

下载链接：http://download.csdn.net/detail/qq_35850412/9919985

解压后包含的文件：

其中org文件夹中是activiti代码，直接复制到你的src下，复制后的结构：

json文件复制到资源目录，如果是maven工程则拷贝到resources目录下，复制后的结构：

modeler.html和其它的两个文件夹复制到复制到webapp目录下：

静态资源引入后修改：

红框中的改为自己的项目名称，可以改为动态获取，具体自行百度，这里采用写死的方式。

由于springmvc配置了拦截所有请求，配置过滤静态文件：

<!-- 静态资源的访问交由Servlet处理 -->
<servlet-mapping>
   <servlet-name>default</servlet-name>
   <url-pattern>*.jpg</url-pattern>
   <url-pattern>*.png</url-pattern>
   <url-pattern>*.gif</url-pattern>
   <url-pattern>*.woff</url-pattern>
   <url-pattern>*.svg</url-pattern>
   <url-pattern>*.map</url-pattern>
   <url-pattern>*.ttf</url-pattern>
   <url-pattern>*.js</url-pattern>
   <url-pattern>*.css</url-pattern>
   <url-pattern>*.json</url-pattern>
   <url-pattern>*.html</url-pattern>
   <url-pattern>*.xml</url-pattern>

    </servlet-mapping>

同样在web.xml中添加如下配置：

spring-mvc-modeler.xml的路径根据自己的项目修改，

<url-pattern>/service/*</url-pattern>与上面修改项目名称时的路径保持一致。

<!-- 提供对Activiti Modeler后台URL的支持 -->
<servlet>
   <servlet-name>ModelerServlet</servlet-name>
   <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
   <init-param>
       <param-name>contextConfigLocation</param-name>
       <param-value>classpath:conf/spring/spring-mvc-modeler.xml</param-value>
   </init-param>
   <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
   <servlet-name>ModelerServlet</servlet-name>
   <!-- url要与app-cfg.js中配置的一致 -->
   <url-pattern>/service/*</url-pattern>
</servlet-mapping>

在上面配置的路径中创建spring-mvc-modeler，名称可以自行修改，和配置文件一致即可，然后添加配置：

其中扫描的controller实际上就是引入静态资源时候的那个org目录，也是根据自己项目的情况修改，保证两个包下都被扫描到。

<?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.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc.xsd">
     

    <!-- mvc中只扫controller层，而modeler模块也只有controller层-->

    <context:component-scan base-package="org.activiti.rest">

        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>

    </context:component-scan>

     

    <!-- modeler需要自动注入ObjectMapper -->

    <bean id="objectMapper" class="com.fasterxml.jackson.databind.ObjectMapper"/>

     

    <mvc:annotation-driven />

    

</beans>

到这里配置完成，然后运行测试，运行后应该在数据库创建了23张activiti的表，先检查是否创建了再访问：

访问：主机ip:端口号/项目名称/workflow/model/create?name=test&key=test&description=model

后面的三个参数就是创建流程模型需要的字段，否则无法跳转到设计页面。

请求的Controller就是刚才引入的org下的自己创建的：

成功访问后，可以看到数据库中act_re_model表中新增了一条记录

name和key实际上就是刚才访问url传入的参数，被插入到了数据库中。

然后就可以设计流程图，如果不清楚用法请上网查找相关资料：

设计完成后点击左上角的保存按钮后，再次查看数据库：

发现刚才的记录已经被替换为我们自己画图的描述，如果查看日志，发现实际上这里是发出了一条update语句替换掉了刚才的记录，说明跳转时创建的模型相当于临时记录，当画图保存后会被替换掉。

产生的流程图在act_ge_bytearray表中以二进制的方式保存。我是通过navicat查看，并且保存到磁盘后打开以png的格式保存：

就是我们刚才画的流程图。

另外一个问题就是左上角的保存按钮和右上角的'X'按钮点击后会默认跳转到上一个页面，如果想要修改，在以下文件中：

以下两处代码修改：

//保存并关闭按钮

$scope.saveAndClose = function () {

    $scope.save(function() {

    window.location.href = "./";

//     window.close();//关闭页面 

    });

    };

//'X'关闭按钮

        closeEditor: function(services) {

        window.location.href = "./";

        /*if(window.confirm('请确认数据是否已经保存，确定要关闭编辑器吗？')) {

        window.close();//关闭页面

        }*/

        },

可以看到默认点击后是跳转到上一个页面的，修改成你想要的点击后访问的url即可。

到这里spring与activiti网页流程设计器的整合就完成了，至于创建模型后如何部署，启动，以及如何与自身的业务结合等就需要去查阅activiti的相关api了。