activiti-modeler5.16 与项目整合实现在线画流程图

最新推荐文章于 2023-03-26 19:51:29 发布
最新推荐文章于 2023-03-26 19:51:29 发布
阅读量1.2k 收藏
点赞数
文章标签： json java javascript ViewUI
原文链接：https://my.oschina.net/u/1433803/blog/888679
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

activiti中提供了activiti-explorer.war 里面使用到在线画流程图的功能，本文将会结合例子来实现项目中用activiti 在线流程图

前提要新建一个maven工程

1、在wars下面有两个war包，解压activiti-exporer.war 

202629_dnUn_1433803.png

2、把上图中的api、editor、explorer、libs复制到项目的webapp下

202857_kjIG_1433803.png

3、进入第三步所示的WEB-INF的class目录

203055_mM1p_1433803.png

4、上图中的editor.html、stencilset.json、plugins.xml复制到项目的src/main/sources中

5、web.xml 文件内容

<?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>

6、pom.xml文件内容

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>activiti_test</groupId>
  <artifactId>activitiTest1</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>activiti_test Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </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>
  </dependencies>
  <build>
    <finalName>activiti_test</finalName>
  </build>
</project>

7、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 name="url" value="jdbc:mysql://localhost:3306/testactiviti?useUnicode=true&amp;characterEncoding=utf8" />
	   <property name="username" value="root" /> 
	   <property name="password" value="123123" /> 
	</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" />
    <bean id="identityService" factory-bean="processEngine" factory-method="getIdentityService" />
	<bean id="managementService" factory-bean="processEngine" factory-method="getManagementService" />
     
    <!-- 避免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>

8、建立controller类，用来控制页面跳转到activiti-modeler流程设计页面：

@RequestMapping(value = "/activiti.do", method = RequestMethod.GET, produces = "application/json;charset=utf-8")  
    @ResponseBody  
    public Object brithdayList(HttpServletRequest req) {  
        Map<String, Object> map = new HashMap<String, Object>();  
        map.put("name", "activiti");  
        return map;  
    }  
  
  
    @RequestMapping(value = "/create.do", method = RequestMethod.GET, produces = "application/json;charset=utf-8")  
    public void create(  
            @RequestParam("name") String name,  
            @RequestParam("key") String key,  
            @RequestParam(value = "description", required = false) String description,  
            HttpServletRequest request, HttpServletResponse response) {  
        try {  
            ObjectMapper objectMapper = new ObjectMapper();  
            ObjectNode modelObjectNode = objectMapper.createObjectNode();  
            modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME, name);  
            modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);  
            modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION,  
                    org.apache.commons.lang3.StringUtils  
                            .defaultString(description));  
            Model newModel = repositoryService.newModel();  
            newModel.setMetaInfo(modelObjectNode.toString());  
            newModel.setName(name);  
            newModel.setKey(key);  
            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"));  
            response.sendRedirect(request.getContextPath()  
                    + "/service/editor?id=" + newModel.getId());  
        } catch (Exception e) {  
            e.getStackTrace();  
        }  
    }

9、html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Hello World!</h2>
<a href="./activiti.do">activiti</a>
  <form action="./create.do" method="get">
    <input type="text" id="name" name="name"></input>
    <input type="text" id="key" name="key"></input>
    <input type="text" id="description" name="description"></input>
    <input type="submit" value="提交">
  </form>
</body>
</html>

运行起来就可以了

画过的流程图信息保存在数据库表：`act_ge_bytearray`，`act_re_model` 前者是存放流程定义的图片和XML文件，后者用来存放流程的定义信息，其中表中的EDITOR_SOURCE_VALUE_ID_和EDITOR_SOURCE_EXTRA_VALUE_ID_ 对应的是`act_ge_bytearray` 表中的id字段

204151_hzL8_1433803.png

通过model 中的id获取流程定义的xml文件信息

public void test(@RequestParam("id") String modelId, HttpServletRequest request) throws JsonProcessingException, IOException{
        Model model = repositoryService.createModelQuery().modelId(modelId).singleResult();
        byte [] content = repositoryService.getModelEditorSource(model.getId());
        JsonNode jsonNode = new ObjectMapper().readTree(content);
        BpmnJsonConverter jsonConverter = new BpmnJsonConverter();
        BpmnModel bpmnModel = jsonConverter.convertToBpmnModel(jsonNode);
        BpmnXMLConverter xmlConverter = new BpmnXMLConverter();
        byte[] bpmnBytes = xmlConverter.convertToXML(bpmnModel);
        ByteArrayInputStream in = new ByteArrayInputStream(bpmnBytes); 
        String str = new String(bpmnBytes);
        System.out.println(str);
    }

 

 

 

 

 

 

转载于:https://my.oschina.net/u/1433803/blog/888679

weixin_33692284
关注
activiti自定义流程之Spring整合activiti-modeler5.16实例（一）：环境搭建
程序员涂小哥的技术博客
03-03 2万+
项目中需要整合activiti-modeler自定义流程，找了很多资料后，终于成功的跳转到activiti-modeler流程设计界面，以下是记录： 一、整合基础：eclipse4.4.1、tomcat7、jdk1.7、mysql5.6.25、maven3.2.5、activiti5.16.3、spring4.0.9 二、步骤： 1、下载activiti-5.16.3.zip: htt...
activiti自定义流程之Spring整合activiti-modeler5.16实例（五）：流程定义列表
程序员涂小哥的技术博客
03-30 3348
注：（1）环境搭建可参考：使用eclipse和maven创建activiti项目基础配置     （2）创建流程模型可参考：spring整合activiti实例（一）：创建流程模型     （3）流程模型列表展示可参考：spring整合activiti实例（二）：流程模型列表展示     （4）部署流程定义可参考：spring整合activiti实例（三）：部署流程定义
activiti7(二)：画业务流程图的工具以及bpmn文件内容解析
热门推荐
no problem的博客
04-24 2万+
介绍了常见的画业务流程图的工具，具体介绍了idea中actiBPM插件的安装使用。最后画了一个简单的请假流程图，并分析了里面的内容，为接下来的helloworld工作做准备！
Activity工作流在线绘制流程图
10-08
分享一个web端绘制流程图，感觉很实用。下载解压后直接导入eclipse，运行方式 HTTP Preview，访问地址http://localhost:8080/estd/index.html 希望能帮助到大家。
SpringBoot集成activiti modeler实现在线绘制流程图
u010825190的博客
03-26 2138
spring boot 集成activiti实现自定义流程图，支持在线绘制流程图并部署
Activiti 5 在线流程设计器开发
man1900
11-30 1010
    jbpm4的开发成员tom离开了jboss后，加入afresco公司，并且才有activiti5的项目，这开源项目继承了jbpm4的所有优点，同时将其发扬光大，相对jbpm4，activiti5改进了储多我们国内开发人员关心的问题，如： 流程代办 在线流程设计器 流程嵌入式部署 流程独立部署 动流程节点 自由流程 支持了bpmn2的标准 支持规则引擎      ...
Activiti6-modeler-demo-master.zip
12-06
activiti6+springboot1.5.8 web开发整合流程设计器，activiti moder模型设计界面
Activiti学习文档（二）之画流程图并部署流程
09-18
Activiti学习文档（二）之画流程图并部署流程的文件资源……
activiti自定义流程之Spring整合activiti-modeler5.16实例（二）：创建流程模型
程序员涂小哥的技术博客
03-24 9771
注：环境搭建可参考：Spring整合activiti-modeler5.16 1.maven导包： junit junit 4.11 org.springframework spring-beans 4.0.9.RELEASE org.springframework
activiti自定义流程之Spring整合activiti-modeler5.16实例（六）：启动流程
程序员涂小哥的技术博客
04-02 4764
注：（1）环境搭建可参考：Spring整合activiti-modeler5.16实例（一）：环境搭建     （2）创建流程模型可参考：Spring整合activiti-modeler5.16实例（二）：创建流程模型      （3）流程模型列表展示可参考：Spring整合activiti-modeler5.16实例（三）：流程模型列表展示     （4）部署流程定义可参考：Spring整
activiti自定义流程之Spring整合activiti-modeler5.16实例（三）：流程模型列表展示
程序员涂小哥的技术博客
03-28 4238
注：环境搭建可参考：Spring整合activiti-modeler5.16     创建流程模型可参考：spring整合activiti实例（一）：创建流程模型 1.maven导包及spring的一些基本配置与创建流程模型时候的没有什么变化，依旧沿用就好;前端的首页也不用有太大变化，只需要把之后新创建的js引入进来即可。 2.acitivit流程定义有必要的24张表。
整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0)
u013604967的博客
08-22 2731
整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0) 1.概述前言         一直以来都是从事大量的工作流相关的项目，用过很多商用的工作流产品，包括国内与国外的，尽管商用的工作产品在UI操作上比较人性化，但个人用户觉得，这东西只需要一些初级用户，对于我们一直在为一些高级的客户提供一些专业的数据整合、流程梳理、系统间的数据穿透时，这些系统因为不开源，给...
Activiti6.0版本如何显示在线流程图
wyj180的博客
11-06 3197
Activiti6.0版本如何显示在线流程图 Activiti6.0在线显示流程图和Activiti5.X有点差别，6.0版本去除了pvm包 关键代码如下： Controller代码 import com.neimeng.workflow.service.process.ProcessHistoryService; import lombok.extern.slf4j.Slf4j; import ...
Activiti6.0实战-画流程图(1)
laker的博客
11-22 3622
目录一.画图工具选择二.Activiti-App下载启动三.画一个工作流扩展 一.画图工具选择 Activiti-App（官网推荐） 我是选的这个 Activiti Designer Eclipse插件（官网推荐） 我用idea，不选择这个 camunda-modeler 不推荐，变量属性不支持 二.Activiti-App下载启动 1.下载tomcat 本文用的是tomcat8 2.下载Activiti-App 官网地址 https://github.com/Activiti/Activi
springboot/springcloud 整合activiti工作流和在线画图 带源码
艾斯-李的博客
03-12 2万+
1、 项目框架 springboot + activiti + mysql + mybatis + thymeleaf 2、工作流可在线编辑、支持自由跳转、支持驳回、支持驳回到原点 3、工作流整合自己业务的用户权限，支持配置多用户、多角色 4、功能接口包括：我发起的记录、我操作的记录、我待办的记录 5、管理页面包含：模型列表、流程列表、节点列表 6、上一波效果图： https://b...
Activiti5.22&Springboot&eclipse&postgresql工作流学习--- 画流程图、实现单人任务流程
Zhangmaoyang的博客
12-17 968
以下流程图以员工请假为例: 大致流程:开始-->员工(zhangsan)申请休假-->由部门经理(lisi)审批-->由总经理(wangwu)审批-->结束 1 每一个流程都必须有一个开始和结束 2 每一步都是由单个用户操作的,所以选择userTask 3 最后使用连线连起来 注意: 最好设置保存文件的时候同事保存图片...
activiti7实战教材（一）完美作图
weixin_55988085的博客
10-27 2393
activiti工作流画图最佳在线编辑器
Activiti 生成流程图和已审批、待审批节点高亮
佛系写BUG的博客
05-31 4397
Activiti 查看流程图和已执行节点高亮 如图: 图中绿色为已经执行的节点,红色为当前正在执行的节点。 html <div class="approve_content" v-if="active==2"> <div class="approve_div"> <el-alert size="large" type="info"
Spring Boot2 + Activiti6 集成在线流程设计器 Activiti modoler(3)
Ceruleano的博客
05-06 2340
前言 上篇文章介绍了如何在Spring Boot2集成activiti6 接下来，小编会一步一步的介绍如何集成在线设计器 Activiti Modoler 介绍 什么是 Activiti Modoler 呢，简单的说就是一个在线画流程图功能模块，它是 Activiti 实现的 虽然说可以通过eclipse、idea等插件去设计画流程图 但是有时候是需要客户动态创建并设计流程图，所以这里就需要把在...
activiti-modeler哪个版本好
最新发布
07-28
对于 activiti-modeler，每个版本都有其特定的功能和改进。最好的版本取决于您的需求和项目要求。建议您在选择版本时考虑以下几点： 1. 最新稳定版本：通常，最新版本会修复之前版本的错误和漏洞。确保您选择的版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值