activiti自定义流程之Spring整合activiti-modeler5.16实例（二）：创建流程模型

注：（1）环境搭建：activiti自定义流程之Spring整合activiti-modeler5.16实例（一）：环境搭建

1.maven导包，这里就没有什么多的好说了，直接代码：

<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-beans</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-core</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-aop</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-context</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-webmvc</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-web</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-aspects</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-expression</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-tx</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>javax.servlet</groupId>
    	<artifactId>javax.servlet-api</artifactId>
    	<version>3.1.0</version>
    </dependency>
    <dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-annotations</artifactId>
    	<version>2.2.3</version>
    </dependency>
    <dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-core</artifactId>
    	<version>2.2.3</version>
    </dependency>
    <dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-databind</artifactId>
    	<version>2.2.3</version>
    </dependency>
    <dependency>
    	<groupId>org.activiti</groupId>
    	<artifactId>activiti-modeler</artifactId>
    	<version>5.16</version>
    </dependency>
    <dependency>
    	<groupId>org.activiti</groupId>
    	<artifactId>activiti-engine</artifactId>
    	<version>5.16</version>
    </dependency>
    <dependency>
    	<groupId>org.activiti</groupId>
    	<artifactId>activiti-explorer</artifactId>
    	<version>5.16</version>
    </dependency>
    <dependency>
    	<groupId>org.activiti</groupId>
    	<artifactId>activiti-rest</artifactId>
    	<version>5.16</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-context-support</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>mysql</groupId>
    	<artifactId>mysql-connector-java</artifactId>
    	<version>5.1.34</version>
    </dependency>

    <dependency>
    	<groupId>org.activiti</groupId>
    	<artifactId>activiti-spring</artifactId>
    	<version>5.16</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-jdbc</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.springframework</groupId>
    	<artifactId>spring-test</artifactId>
    	<version>4.0.9.RELEASE</version>
    </dependency>
    <dependency>
    	<groupId>org.activiti</groupId>
    	<artifactId>activiti-bpmn-converter</artifactId>
    	<version>5.16</version>
    </dependency>
    <dependency>
    	<groupId>org.codehaus.jackson</groupId>
    	<artifactId>jackson-core-asl</artifactId>
    	<version>1.9.11</version>
    </dependency>
    <dependency>
    	<groupId>org.codehaus.jackson</groupId>
    	<artifactId>jackson-mapper-asl</artifactId>
    	<version>1.9.11</version>
    </dependency>
  </dependencies>

2.基础配置：web.xml，这个也主要是spring相关的东西，不多说了:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">    
	<filter>
		<description>字符集过滤器</description>
		<filter-name>encodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<description>字符集编码</description>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<servlet>
    <servlet-name>RestletServlet</servlet-name>
    <servlet-class>org.restlet.ext.servlet.ServerServlet</servlet-class>
    <init-param>
      <param-name>org.restlet.application</param-name>
      <param-value>org.activiti.rest.editor.application.ModelerRestApplication</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>RestletServlet</servlet-name>
    <url-pattern>/service/*</url-pattern>
  </servlet-mapping>
	
	
    <servlet>  
        <servlet-name>springMVC</servlet-name>  
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
        <init-param>  
            <param-name>contextConfigLocation</param-name>  
            <param-value>classpath:spring.xml</param-value>  
        </init-param>    
    </servlet>  
    <servlet-mapping>  
        <servlet-name>springMVC</servlet-name>  
        <url-pattern>*.do</url-pattern>  
    </servlet-mapping>
    <welcome-file-list>
    	<welcome-file>activiti.html</welcome-file>
    	<welcome-file>activiti.htm</welcome-file>
    	<welcome-file>activiti.jsp</welcome-file>
    	<welcome-file>default.html</welcome-file>
    	<welcome-file>default.htm</welcome-file>
    	<welcome-file>default.jsp</welcome-file>
    </welcome-file-list>  
</web-app>

3.基础配置spring.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:p="http://www.springframework.org/schema/p"  
    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.0.xsd  
        http://www.springframework.org/schema/context   
        http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/mvc 
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">  

    <context:annotation-config />  
    <mvc:annotation-driven />
    <context:component-scan base-package="controllers" />  
	<bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
	   
	   <property name="driverClass" value="com.mysql.jdbc.Driver"></property>
	   <property name="url" value="jdbc:mysql://192.168.0.201:3306/testtu?useUnicode=true&characterEncoding=utf8" ></property>
	   <property name="username" value="root" ></property> 
	   <property name="password" value="123456" ></property> 
	</bean>
	
	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
	   <property name="dataSource" ref="dataSource"></property>
	</bean>
	
	<bean id="processEngineConfiguration" class="org.activiti.spring.SpringProcessEngineConfiguration">
        <property name="dataSource" ref="dataSource" />
		<property name="databaseSchemaUpdate" value="true" />
	    <property name="jobExecutorActivate" value="false"/>
	    <property name="history" value="full"/>
	    <property name="transactionManager" ref="transactionManager" />
		<!-- 配置事务管理器，统一事务 -->
		
		<!-- 设置建表策略，如果没有表，自动创建表 -->
	</bean>
	<!-- 创建流程引擎对象 -->
	<bean id="processEngine" class="org.activiti.spring.ProcessEngineFactoryBean">
		<property name="processEngineConfiguration" ref="processEngineConfiguration" />
	</bean>

	<!-- 由流程引擎对象，提供的方法，创建项目中使用的Activiti工作流的Service -->
	<bean id="repositoryService" factory-bean="processEngine" factory-method="getRepositoryService" />
	<bean id="runtimeService" factory-bean="processEngine" factory-method="getRuntimeService" />
	<bean id="taskService" factory-bean="processEngine" factory-method="getTaskService" />
	<bean id="historyService" factory-bean="processEngine" factory-method="getHistoryService" />
	<bean id="formService" factory-bean="processEngine" factory-method="getFormService" />
     
    <!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
	<bean id="mappingJacksonHttpMessageConverter"
		class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
		<property name="supportedMediaTypes">
			<list>
				<value>text/html;charset=utf-8</value>
			</list>
		</property>
	</bean>

	<!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->
	<bean
		class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<ref bean="mappingJacksonHttpMessageConverter" /><!-- json转换器 -->
			</list>
		</property>
	</bean>
    
</beans>

4.模型实体类：

package model;

import java.util.Date;

public class ActivitiModel {
	private String id;
	private String name;
	private String key;
	private String description;
	private Date createTime;
	private Date lastUpdateTime;
	private int version;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public Date getCreateTime() {
		return createTime;
	}

	public void setCreateTime(Date createTime) {
		this.createTime = createTime;
	}

	public Date getLastUpdateTime() {
		return lastUpdateTime;
	}

	public void setLastUpdateTime(Date lastUpdateTime) {
		this.lastUpdateTime = lastUpdateTime;
	}

	public int getVersion() {
		return version;
	}

	public void setVersion(int version) {
		this.version = version;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getKey() {
		return key;
	}

	public void setKey(String key) {
		this.key = key;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	@Override
	public String toString() {
		return "ActivitiModel [id=" + id + ", name=" + name + ", key=" + key
				+ ", description=" + description + ", createTime=" + createTime
				+ ", lastUpdateTime=" + lastUpdateTime + ", version=" + version
				+ "]";
	}

}

5.后台业务代码，这里最后的操作是把跳转到acitiviti-modeler流程图设计界面的路径返回到了前端，然后让前端再跳转到流程图设计界面。

在我操作过程中，必须这样做才能实现设想的结果，因为我的前端使用的是angular js，页面上的路由跳转也都是由angular ui来控制，所以像第一篇spring整合activiti-modeler中那样从后台直接重定向的话就没有任何反应：

/**
	 * 创建模型
	 * 
	 * @author：tuzongxun
	 * @Title: create
	 * @param @param activiti
	 * @param @param request
	 * @param @param response
	 * @param @return
	 * @return Object
	 * @date Mar 17, 2016 12:30:29 PM
	 * @throws
	 */
	@RequestMapping(value = "/create.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
	@ResponseBody
	public Object create(@RequestBody ActivitiModel activiti,
			HttpServletRequest request, HttpServletResponse response) {
		Map<String, String> map = new HashMap<String, String>();
		Boolean isLogin = this.isLogin(request);
		if (isLogin) {
			Model newModel = repositoryService.newModel();
			try {

				ObjectMapper objectMapper = new ObjectMapper();
				ObjectNode modelObjectNode = objectMapper.createObjectNode();
				modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME,
						activiti.getName());
				modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
				modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION,
						StringUtils.defaultString(activiti.getDescription()));
				newModel.setMetaInfo(modelObjectNode.toString());
				newModel.setName(activiti.getName());
				newModel.setKey(StringUtils.defaultString(activiti.getKey()));
				repositoryService.saveModel(newModel);
				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.put("stencilset", stencilSetNode);
				repositoryService.addModelEditorSource(newModel.getId(),
						editorNode.toString().getBytes("utf-8"));
			} catch (Exception e) {
				e.getStackTrace();
			}
			// response.sendRedirect(request.getContextPath() +
			// "/service/editor?id="
			// + newModel.getId());
			map.put("isLogin", "yes");
			map.put("userName",
					(String) request.getSession().getAttribute("userName"));
			map.put("path", "/service/editor?id=");
			map.put("modelId", newModel.getId());
		} else {
			map.put("isLogin", "no");
		}
		return map;
	}

6.angular js前台代码，路由控制页面跳转：

  （1）.app.js:

       

$stateProvider  
    .state('create', {  
    url: "/create",  
    views: {  
       'view': {  
        templateUrl: 'activi_views/create.html',  
        controller: 'createCtr'  
       }  
    }  
   });

   (2).createCtr.js，angular js中的控制器，和后台交互，按我们公司前端现在的标准做法，应该还要服务层service，但是我运用还不太熟练，就暂且都放在controller中了:

 

angular.module('activitiApp')  
.controller('createCtr', ['$rootScope','$scope','$http','$location','$state', function($rootScope,$scope,$http,$location,$state){  
    //创建模型
	$http.post("createFlush.do").success(function(result){
		if(result.isLogin==="yes"){
			$rootScope.userName=result.userName;
		}else{
			$location.path("/login");
		}
	});
    $scope.createTo=function(activiti){
        //向后台提交数据
      $http.post("./create.do",activiti,{headers:'Content-Type:application/json'}).success(function(createResult){
    	  console.log(createResult);
    	  $location.path("/modelList");
    	window.open("http://localhost:8080/activitiTest1"+createResult.path+createResult.modelId);
      });

    }  
  
}])

  (3).index.html:

<!DOCTYPE html>
<html ng-app="activitiApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="./activi_css/activi.css" rel="stylesheet"/> 
  <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
  <link href="css/site.css?2023" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
        var _root='http://form/index.php?s=/',_controller = 'index';
  </script>
  <script src="./angular-1.4.0-rc.2/angular.js"></script>
  <script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script>
  <script src='./activi_js/app.js'></script>
  <script src='./activi_js/createCtr.js'></script>
  <script src='./activi_js/modelCtr.js'></script>
  <script src='./activi_js/processCtr.js'></script>
  <script src='./activi_js/taskCtr.js'></script>
  <script src='./activi_js/loginCtr.js'></script>
  <script src='./activi_js/hisTaskCtr.js'></script>
  <script src='./activi_js/startProcessCtr.js'></script>
  <script src='./activi_js/completeTaskCtr.js'></script>
</head>
<body style="width:100%;height:300px;margin:0;background-color:#fff">
 <div style="height:70px;width:100%;border:1px solid #ccf">
    <img id="rdiv" src="./images/activiti.png" style="width:30%;height:98%"/>
     <a href="script:;" ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;" ng-click="logOut();">
     [退出登陆]
    </a>
    <font ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;">当前登陆用户：{{userName}}</font>
 </div>
 <div style="width:100%;position: absolute;height:auto">
 <div style="height:580px;width:12%;font-size:36px;position:relative;float:left;border:1px solid #ccf" ng-show="userName!=undefined">
    <table style="width:100%;text-align:center;margin-top:0px" cellSpacing="5px" cellPadding="0px">
      <tr>
         <td style="background-color:#caf;"><a href="#/create">创建模型</a></td>
      </tr>
      <tr>
         <td style="background-color:#ccf;"> <a href="#/modelList">模型列表</a></td>
      </tr>
      <tr>
         <td style="background-color:#cef;"><a href="#/processList">流程列表</a></td>
      </tr>
      <tr>
         <td style="background-color:#aef;"><a href="#/taskList">当前任务</a></td>
      </tr>
       <tr>
         <td style="background-color:#fef;"><a href="#/hisTask">历史任务</a></td>
      </tr>
    </table>
 </div>
 
 <div ui-view="view" ></div>
 </div>
</body>
</html>

   

(4).create.html:

<center>  
<div style="margin-top:100px;margin-left:200px;background-color:#9cc;height:350px;width:40%;font-size:26px;position:relative;float:left;">  
    <p style="font-size:30px">创建模型</p>
    Name   :<input type="text" name="name" ng-model="activiti.name"/> 
    </br>  
    </br>  
    Key    :<input type="text" name="key" ng-model="activiti.key"/>  
    </br>  
    </br>  
    Description:<input type="text" name="description" ng-model="activiti.description"/>  
    </br>  
    </br>  
    <input style="font-size:28px;cursor:pointer" type="button" value="创建模型" ng-click="createTo(activiti);">  
           
    <input style="font-size:28px;cursor:pointer" type="button" value="返回">  
</div>  
</center>

7.如果模型创建成功，则可以看到数据库act_re_model中会出现一条数据，如下：

同时在act_ge_bytearray表中会出现两条数据，如下图：

并且可以看到，在model表中会有两个字段把bytearray表中两条数据的id保存起来。