注:(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; }
(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保存起来。