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

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

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

1. <dependencies>
2. <dependency>
3. <groupId>junit</groupId>
4. <artifactId>junit</artifactId>
5. <version>4.11</version>
6. </dependency>
7. <dependency>
8. <groupId>org.springframework</groupId>
9. <artifactId>spring-beans</artifactId>
10. <version>4.0.9.RELEASE</version>
11. </dependency>
12. <dependency>
13. <groupId>org.springframework</groupId>
14. <artifactId>spring-core</artifactId>
15. <version>4.0.9.RELEASE</version>
16. </dependency>
17. <dependency>
18. <groupId>org.springframework</groupId>
19. <artifactId>spring-aop</artifactId>
20. <version>4.0.9.RELEASE</version>
21. </dependency>
22. <dependency>
23. <groupId>org.springframework</groupId>
24. <artifactId>spring-context</artifactId>
25. <version>4.0.9.RELEASE</version>
26. </dependency>
27. <dependency>
28. <groupId>org.springframework</groupId>
29. <artifactId>spring-webmvc</artifactId>
30. <version>4.0.9.RELEASE</version>
31. </dependency>
32. <dependency>
33. <groupId>org.springframework</groupId>
34. <artifactId>spring-web</artifactId>
35. <version>4.0.9.RELEASE</version>
36. </dependency>
37. <dependency>
38. <groupId>org.springframework</groupId>
39. <artifactId>spring-aspects</artifactId>
40. <version>4.0.9.RELEASE</version>
41. </dependency>
42. <dependency>
43. <groupId>org.springframework</groupId>
44. <artifactId>spring-expression</artifactId>
45. <version>4.0.9.RELEASE</version>
46. </dependency>
47. <dependency>
48. <groupId>org.springframework</groupId>
49. <artifactId>spring-tx</artifactId>
50. <version>4.0.9.RELEASE</version>
51. </dependency>
52. <dependency>
53. <groupId>javax.servlet</groupId>
54. <artifactId>javax.servlet-api</artifactId>
55. <version>3.1.0</version>
56. </dependency>
57. <dependency>
58. <groupId>com.fasterxml.jackson.core</groupId>
59. <artifactId>jackson-annotations</artifactId>
60. <version>2.2.3</version>
61. </dependency>
62. <dependency>
63. <groupId>com.fasterxml.jackson.core</groupId>
64. <artifactId>jackson-core</artifactId>
65. <version>2.2.3</version>
66. </dependency>
67. <dependency>
68. <groupId>com.fasterxml.jackson.core</groupId>
69. <artifactId>jackson-databind</artifactId>
70. <version>2.2.3</version>
71. </dependency>
72. <dependency>
73. <groupId>org.activiti</groupId>
74. <artifactId>activiti-modeler</artifactId>
75. <version>5.16</version>
76. </dependency>
77. <dependency>
78. <groupId>org.activiti</groupId>
79. <artifactId>activiti-engine</artifactId>
80. <version>5.16</version>
81. </dependency>
82. <dependency>
83. <groupId>org.activiti</groupId>
84. <artifactId>activiti-explorer</artifactId>
85. <version>5.16</version>
86. </dependency>
87. <dependency>
88. <groupId>org.activiti</groupId>
89. <artifactId>activiti-rest</artifactId>
90. <version>5.16</version>
91. </dependency>
92. <dependency>
93. <groupId>org.springframework</groupId>
94. <artifactId>spring-context-support</artifactId>
95. <version>4.0.9.RELEASE</version>
96. </dependency>
97. <dependency>
98. <groupId><a href="http://lib.csdn.net/base/14" class="replace_word" title="MySQL知识库" target="_blank" style="color:#df3434; font-weight:bold;">mysql</a></groupId>
99. <artifactId>mysql-connector-<a href="http://lib.csdn.net/base/17" class="replace_word" title="Java EE知识库" target="_blank" style="color:#df3434; font-weight:bold;">java</a></artifactId>
100. <version>5.1.34</version>
101. </dependency>
102. <dependency>
103. <groupId>org.activiti</groupId>
104. <artifactId>activiti-spring</artifactId>
105. <version>5.16</version>
106. </dependency>
107. <dependency>
108. <groupId>org.springframework</groupId>
109. <artifactId>spring-jdbc</artifactId>
110. <version>4.0.9.RELEASE</version>
111. </dependency>
112. <dependency>
113. <groupId>org.springframework</groupId>
114. <artifactId>spring-test</artifactId>
115. <version>4.0.9.RELEASE</version>
116. </dependency>
117. <dependency>
118. <groupId>org.activiti</groupId>
119. <artifactId>activiti-bpmn-converter</artifactId>
120. <version>5.16</version>
121. </dependency>
122. <dependency>
123. <groupId>org.codehaus.jackson</groupId>
124. <artifactId>jackson-core-asl</artifactId>
125. <version>1.9.11</version>
126. </dependency>
127. <dependency>
128. <groupId>org.codehaus.jackson</groupId>
129. <artifactId>jackson-mapper-asl</artifactId>
130. <version>1.9.11</version>
131. </dependency>
132. </dependencies>

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

1. <?xml version="1.0" encoding="UTF-8"?>
2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3. xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
5. id="WebApp_ID" version="2.5">
6. <filter>
7. <description>字符集过滤器</description>
8. <filter-name>encodingFilter</filter-name>
9. <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
10. <init-param>
11. <description>字符集编码</description>
12. <param-name>encoding</param-name>
13. <param-value>UTF-8</param-value>
14. </init-param>
15. </filter>
16. <filter-mapping>
17. <filter-name>encodingFilter</filter-name>
18. <url-pattern>/*</url-pattern>
19. </filter-mapping>
20. <servlet>
21. <servlet-name>RestletServlet</servlet-name>
22. <servlet-class>org.restlet.ext.servlet.ServerServlet</servlet-class>
23. <init-param>
24. <param-name>org.restlet.application</param-name>
25. <param-value>org.activiti.rest.editor.application.ModelerRestApplication</param-value>
26. </init-param>
27. </servlet>
28. <servlet-mapping>
29. <servlet-name>RestletServlet</servlet-name>
30. <url-pattern>/service/*</url-pattern>
31. </servlet-mapping>
32. <servlet>
33. <servlet-name>springMVC</servlet-name>
34. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
35. <init-param>
36. <param-name>contextConfigLocation</param-name>
37. <param-value>classpath:spring.xml</param-value>
38. </init-param>
39. </servlet>
40. <servlet-mapping>
41. <servlet-name>springMVC</servlet-name>
42. <url-pattern>*.do</url-pattern>
43. </servlet-mapping>
44. <welcome-file-list>
45. <welcome-file>activiti.html</welcome-file>
46. <welcome-file>activiti.htm</welcome-file>
47. <welcome-file>activiti.jsp</welcome-file>
48. <welcome-file>default.html</welcome-file>
49. <welcome-file>default.htm</welcome-file>
50. <welcome-file>default.jsp</welcome-file>
51. </welcome-file-list>
52. </web-app>

3.基础配置spring.xml:

1. <?xml version="1.0" encoding="UTF-8"?>
2. <beans xmlns="http://www.springframework.org/schema/beans"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
4. xmlns:context="http://www.springframework.org/schema/context"
5. xmlns:mvc="http://www.springframework.org/schema/mvc"
6. xsi:schemaLocation="
7. http://www.springframework.org/schema/beans
8. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
9. http://www.springframework.org/schema/context
10. http://www.springframework.org/schema/context/spring-context-3.0.xsd
11. http://www.springframework.org/schema/mvc
12. http://www.springframework.org/schema/mvc/spring-mvc.xsd">
13. <context:annotation-config />
14. <mvc:annotation-driven />
15. <context:component-scan base-package="controllers" />
16. <bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
17. <property name="driverClass" value="com.mysql.jdbc.Driver"></property>
18. <property name="url" value="jdbc:mysql://192.168.0.201:3306/testtu?useUnicode=true&characterEncoding=utf8" ></property>
19. <property name="username" value="root" ></property>
20. <property name="password" value="123456" ></property>
21. </bean>
22. <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
23. <property name="dataSource" ref="dataSource"></property>
24. </bean>
25. <bean id="processEngineConfiguration" class="org.activiti.spring.SpringProcessEngineConfiguration">
26. <property name="dataSource" ref="dataSource" />
27. <property name="databaseSchemaUpdate" value="true" />
28. <property name="jobExecutorActivate" value="false"/>
29. <property name="history" value="full"/>
30. <property name="transactionManager" ref="transactionManager" />
31. <!-- 配置事务管理器，统一事务 -->
32. <!-- 设置建表策略，如果没有表，自动创建表 -->
33. </bean>
34. <!-- 创建流程引擎对象 -->
35. <bean id="processEngine" class="org.activiti.spring.ProcessEngineFactoryBean">
36. <property name="processEngineConfiguration" ref="processEngineConfiguration" />
37. </bean>
38. <!-- 由流程引擎对象，提供的方法，创建项目中使用的Activiti工作流的Service -->
39. <bean id="repositoryService" factory-bean="processEngine" factory-method="getRepositoryService" />
40. <bean id="runtimeService" factory-bean="processEngine" factory-method="getRuntimeService" />
41. <bean id="taskService" factory-bean="processEngine" factory-method="getTaskService" />
42. <bean id="historyService" factory-bean="processEngine" factory-method="getHistoryService" />
43. <bean id="formService" factory-bean="processEngine" factory-method="getFormService" />
44. <!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
45. <bean id="mappingJacksonHttpMessageConverter"
46. class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
47. <property name="supportedMediaTypes">
48. <list>
49. <value>text/html;charset=utf-8</value>
50. </list>
51. </property>
52. </bean>
53. <!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->
54. <bean
55. class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
56. <property name="messageConverters">
57. <list>
58. <ref bean="mappingJacksonHttpMessageConverter" /><!-- json转换器 -->
59. </list>
60. </property>
61. </bean>
62. </beans>

4.模型实体类：

1. package model;
2. import java.util.Date;
3. public class ActivitiModel {
4. private String id;
5. private String name;
6. private String key;
7. private String description;
8. private Date createTime;
9. private Date lastUpdateTime;
10. private int version;
11. public String getId() {
12. return id;
13. }
14. public void setId(String id) {
15. this.id = id;
16. }
17. public Date getCreateTime() {
18. return createTime;
19. }
20. public void setCreateTime(Date createTime) {
21. this.createTime = createTime;
22. }
23. public Date getLastUpdateTime() {
24. return lastUpdateTime;
25. }
26. public void setLastUpdateTime(Date lastUpdateTime) {
27. this.lastUpdateTime = lastUpdateTime;
28. }
29. public int getVersion() {
30. return version;
31. }
32. public void setVersion(int version) {
33. this.version = version;
34. }
35. public String getName() {
36. return name;
37. }
38. public void setName(String name) {
39. this.name = name;
40. }
41. public String getKey() {
42. return key;
43. }
44. public void setKey(String key) {
45. this.key = key;
46. }
47. public String getDescription() {
48. return description;
49. }
50. public void setDescription(String description) {
51. this.description = description;
52. }
53. @Override
54. public String toString() {
55. return "ActivitiModel [id=" + id + ", name=" + name + ", key=" + key
56. + ", description=" + description + ", createTime=" + createTime
57. + ", lastUpdateTime=" + lastUpdateTime + ", version=" + version
58. + "]";
59. }
60. }

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

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

1. /**
2. * 创建模型
3. *
4. * @author：tuzongxun
5. * @Title: create
6. * @param @param activiti
7. * @param @param request
8. * @param @param response
9. * @param @return
10. * @return Object
11. * @date Mar 17, 2016 12:30:29 PM
12. * @throws
13. */
14. @RequestMapping(value = "/create.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
15. @ResponseBody
16. public Object create(@RequestBody ActivitiModel activiti,
17. HttpServletRequest request, HttpServletResponse response) {
18. Map<String, String> map = new HashMap<String, String>();
19. Boolean isLogin = this.isLogin(request);
20. if (isLogin) {
21. Model newModel = repositoryService.newModel();
22. try {
23. ObjectMapper objectMapper = new ObjectMapper();
24. ObjectNode modelObjectNode = objectMapper.createObjectNode();
25. modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME,
26. activiti.getName());
27. modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
28. modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION,
29. StringUtils.defaultString(activiti.getDescription()));
30. newModel.setMetaInfo(modelObjectNode.toString());
31. newModel.setName(activiti.getName());
32. newModel.setKey(StringUtils.defaultString(activiti.getKey()));
33. repositoryService.saveModel(newModel);
34. ObjectNode editorNode = objectMapper.createObjectNode();
35. editorNode.put("id", "canvas");
36. editorNode.put("resourceId", "canvas");
37. ObjectNode stencilSetNode = objectMapper.createObjectNode();
38. stencilSetNode.put("namespace",
39. "http://b3mn.org/stencilset/bpmn2.0#");
40. editorNode.put("stencilset", stencilSetNode);
41. repositoryService.addModelEditorSource(newModel.getId(),
42. editorNode.toString().getBytes("utf-8"));
43. } catch (Exception e) {
44. e.getStackTrace();
45. }
46. // response.sendRedirect(request.getContextPath() +
47. // "/service/editor?id="
48. // + newModel.getId());
49. map.put("isLogin", "yes");
50. map.put("userName",
51. (String) request.getSession().getAttribute("userName"));
52. map.put("path", "/service/editor?id=");
53. map.put("modelId", newModel.getId());
54. } else {
55. map.put("isLogin", "no");
56. }
57. return map;
58. }

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

（1）.app.js:

1. $stateProvider
2. .state('create', {
3. url: "/create",
4. views: {
5. 'view': {
6. templateUrl: 'activi_views/create.html',
7. controller: 'createCtr'
8. }
9. }
10. });

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

1. angular.module('activitiApp')
2. .controller('createCtr', ['$rootScope','$scope','$http','$location','$state', function($rootScope,$scope,$http,$location,$state){
3. //创建模型
4. $http.post("createFlush.do").success(function(result){
5. if(result.isLogin==="yes"){
6. $rootScope.userName=result.userName;
7. }else{
8. $location.path("/login");
9. }
10. });
11. $scope.createTo=function(activiti){
12. //向后台提交数据
13. $http.post("./create.do",activiti,{headers:'Content-Type:application/json'}).success(function(createResult){
14. console.log(createResult);
15. $location.path("/modelList");
16. window.open("http://localhost:8080/activitiTest1"+createResult.path+createResult.modelId);
17. });
18. }
19. }])

(3).index.html:

1. <!DOCTYPE html>
2. <html ng-app="activitiApp">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <link href="./activi_css/activi.css" rel="stylesheet"/>
6. <link href="css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
7. <link href="css/site.css?2023" rel="stylesheet" type="text/css" />
8. <script type="text/<a href="http://lib.csdn.net/base/18" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434; font-weight:bold;">javascript</a>">
9. var _root='http://form/index.php?s=/',_controller = 'index';
10. </script>
11. <script src="./angular-1.4.0-rc.2/angular.js"></script>
12. <script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script>
13. <script src='./activi_js/app.js'></script>
14. <script src='./activi_js/createCtr.js'></script>
15. <script src='./activi_js/modelCtr.js'></script>
16. <script src='./activi_js/processCtr.js'></script>
17. <script src='./activi_js/taskCtr.js'></script>
18. <script src='./activi_js/loginCtr.js'></script>
19. <script src='./activi_js/hisTaskCtr.js'></script>
20. <script src='./activi_js/startProcessCtr.js'></script>
21. <script src='./activi_js/completeTaskCtr.js'></script>
22. </head>
23. <body style="width:100%;height:300px;margin:0;background-color:#fff">
24. <div style="height:70px;width:100%;border:1px solid #ccf">
25. <img id="rdiv" src="./images/activiti.png" style="width:30%;height:98%"/>
26. <a href="script:;" ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;" ng-click="logOut();">
27. [退出登陆]
28. </a>
29. <font ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;">当前登陆用户：{{userName}}</font>
30. </div>
31. <div style="width:100%;position: absolute;height:auto">
32. <div style="height:580px;width:12%;font-size:36px;position:relative;float:left;border:1px solid #ccf" ng-show="userName!=undefined">
33. <table style="width:100%;text-align:center;margin-top:0px" cellSpacing="5px" cellPadding="0px">
34. <tr>
35. <td style="background-color:#caf;"><a href="#/create">创建模型</a></td>
36. </tr>
37. <tr>
38. <td style="background-color:#ccf;"> <a href="#/modelList">模型列表</a></td>
39. </tr>
40. <tr>
41. <td style="background-color:#cef;"><a href="#/processList">流程列表</a></td>
42. </tr>
43. <tr>
44. <td style="background-color:#aef;"><a href="#/taskList">当前任务</a></td>
45. </tr>
46. <tr>
47. <td style="background-color:#fef;"><a href="#/hisTask">历史任务</a></td>
48. </tr>
49. </table>
50. </div>
51. <div ui-view="view" ></div>
52. </div>
53. </body>
54. </html>

(4).create.html:

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

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

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

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