`
weir2009
  • 浏览: 263571 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类
最新评论

activiti5整合网页流程设计器

阅读更多

我的框架是spring +spring data jpa+spring mvc+activiti5.16.2

activiti 的包我就不说了,不想找麻烦就都拿过来,我也没有做什么整理,拿过来用就行了,以后可以慢慢研究。

下面是配置文件,我假设你已经会使用activiti,怎么整合到spring应该没问题,在整合网页设计器时主要是配置web.xml文件:

<!-- Restlet adapter, used to expose modeler functionality through REST -->
    <servlet>
        <servlet-name>ExplorerRestletServlet</servlet-name>
        <servlet-class>org.restlet.ext.servlet.ServerServlet</servlet-class>
        <init-param>
            <!-- Application class name -->
            <param-name>org.restlet.application</param-name>
            <param-value>org.activiti.explorer.rest.application.ExplorerRestApplication</param-value>
        </init-param>
    </servlet>

    <servlet>
        <servlet-name>RestletServlet</servlet-name>
        <servlet-class>org.restlet.ext.servlet.ServerServlet</servlet-class>
        <init-param>
            <!-- Application class name -->
            <param-name>org.restlet.application</param-name>
            <param-value>org.activiti.rest.service.application.ActivitiRestServicesApplication</param-value>
        </init-param>
    </servlet>
	<!-- Catch all service requests -->
	<servlet-mapping>
		<servlet-name>ExplorerRestletServlet</servlet-name>
		<url-pattern>/service/*</url-pattern>
	</servlet-mapping>

    <servlet-mapping>
        <servlet-name>RestletServlet</servlet-name>
        <url-pattern>/rest/*</url-pattern>
    </servlet-mapping>

 activiti的网页设计器是使用rest技术,所以web.xml文件里面需要配置一下rest。

 

接下来就是要引入网页了:

首先将activiti-explorer.war 包 解压开来。

需要的文件有:



 将其拷贝到项目中

 

 

将其拷贝到:src/main/resource下面

如果你的不是这样的结构,你直接拷贝到src

最后还要整合一个java代码,也就是web.xml所引用的那个类:

package org.activiti.explorer.rest.application;

import org.activiti.rest.common.api.DefaultResource;
import org.activiti.rest.common.application.ActivitiRestApplication;
import org.activiti.rest.common.filter.JsonpFilter;
import org.activiti.rest.editor.application.ModelerServicesInit;
import org.restlet.Restlet;
import org.restlet.routing.Router;

public class ExplorerRestApplication extends ActivitiRestApplication {
  
  public ExplorerRestApplication() {
    super();
  }
  /**
   * Creates a root Restlet that will receive all incoming calls.
   */
  @Override
  public synchronized Restlet createInboundRoot() {
    Router router = new Router(getContext());
    router.attachDefault(DefaultResource.class);
    ModelerServicesInit.attachResources(router);
    JsonpFilter jsonpFilter = new JsonpFilter(getContext());
    jsonpFilter.setNext(router);
    return jsonpFilter;
  }

}

 需要注意的是包路径要写对。

这样做药之后项目可以运行起来了,但是还没发看到网页设计器,还缺少一个管理页面,暂且叫它流程模型控制器,需要一个controller类和几个页面

package com.weir.oa.activiti.web.workflow;

import java.io.ByteArrayInputStream;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ObjectNode;
import com.weir.oa.util.DataGrid;
import com.weir.oa.util.Json;

import org.activiti.bpmn.converter.BpmnXMLConverter;
import org.activiti.bpmn.model.BpmnModel;
import org.activiti.editor.constants.ModelDataJsonConstants;
import org.activiti.editor.language.json.converter.BpmnJsonConverter;
import org.activiti.engine.RepositoryService;
import org.activiti.engine.repository.Deployment;
import org.activiti.engine.repository.Model;
import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 流程模型控制器
 *
 * @author henryyan
 */
@Controller
@RequestMapping(value = "/model")
public class ModelController {

    protected Logger logger = LoggerFactory.getLogger(getClass());

    @Autowired
    RepositoryService repositoryService;

    /**
     * 模型列表
     */
    @ResponseBody
    @RequestMapping("list")
    public DataGrid<Model> list() {
    	List<Model> list = repositoryService.createModelQuery().list();
    	DataGrid<Model> dg = new DataGrid<Model>((long)list.size(),list);
    	return dg;
    }

    /**
     * 创建模型
     */
    @RequestMapping("create")
    public void create(String name,String key, String description, HttpServletRequest request, HttpServletResponse response) {
        try {
            ObjectMapper objectMapper = new ObjectMapper();
            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);
            Model modelData = repositoryService.newModel();

            ObjectNode modelObjectNode = objectMapper.createObjectNode();
            modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME, name);
            modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
            description = StringUtils.defaultString(description);
            modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, description);
            modelData.setMetaInfo(modelObjectNode.toString());
            modelData.setName(name);
            modelData.setKey(StringUtils.defaultString(key));

            //保存模型
            repositoryService.saveModel(modelData);
            repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));
            
            response.sendRedirect(request.getContextPath() + "/service/editor?id=" + modelData.getId());
        } catch (Exception e) {
            logger.error("创建模型失败:", e);
        }
    }

    /**
     * 根据Model部署流程
     */
    @ResponseBody
    @RequestMapping("deploy")
    public Json deploy(String modelId) {
    	Json json = new Json();
        try {
            Model modelData = repositoryService.getModel(modelId);
            ObjectNode modelNode = (ObjectNode) new ObjectMapper().readTree(repositoryService.getModelEditorSource(modelData.getId()));
            byte[] bpmnBytes = null;

            BpmnModel model = new BpmnJsonConverter().convertToBpmnModel(modelNode);
            bpmnBytes = new BpmnXMLConverter().convertToXML(model);

            String processName = modelData.getName() + ".bpmn20.xml";
            Deployment deployment = repositoryService.createDeployment().name(modelData.getName()).addString(processName, new String(bpmnBytes)).deploy();
            json.setMsg("部署成功,部署ID=" + deployment.getId());
            json.setSuccess(true);
        } catch (Exception e) {
            logger.error("根据模型部署流程失败:modelId={}", modelId, e);
            json.setMsg("模型部署流程失败");
        }
        return json;
    }

    /**
     * 导出model的xml文件
     */
    @RequestMapping("export")
    public void export(String modelId, HttpServletResponse response) {
        try {
            Model modelData = repositoryService.getModel(modelId);
            BpmnJsonConverter jsonConverter = new BpmnJsonConverter();
            JsonNode editorNode = new ObjectMapper().readTree(repositoryService.getModelEditorSource(modelData.getId()));
            BpmnModel bpmnModel = jsonConverter.convertToBpmnModel(editorNode);
            BpmnXMLConverter xmlConverter = new BpmnXMLConverter();
            byte[] bpmnBytes = xmlConverter.convertToXML(bpmnModel);

            ByteArrayInputStream in = new ByteArrayInputStream(bpmnBytes);
            IOUtils.copy(in, response.getOutputStream());
            String filename = bpmnModel.getMainProcess().getId() + ".bpmn20.xml";
            response.setHeader("Content-Disposition", "attachment; filename=" + filename);
            response.flushBuffer();
        } catch (Exception e) {
            logger.error("导出model的xml文件失败:modelId={}", modelId, e);
        }
    }

    @RequestMapping(value = "delete/{modelId}")
    public String delete(@PathVariable("modelId") String modelId) {
        repositoryService.deleteModel(modelId);
        return "redirect:/workflow/model/list";
    }

}

 网页(easyui实现):list 列表页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<jsp:include page="/pub.jsp"></jsp:include>
	<title>流程列表</title>
<script type="text/javascript">
var userDataGrid;
$(function() {
	userDataGrid = $('#user_datagrid').datagrid({
		url : '${pageContext.request.contextPath}/model/list.do',
		fit : true,
		fitColumns : true,
		border : false,
		pagination : true,
		idField : 'id',
		pagePosition : 'both',
		checkOnSelect:true,
		selectOnCheck:true,
		columns : [ [ {
			field : 'id',
			title : 'ID'
		}, {
			field : 'key',
			title : 'KEY',
			sortable : true
		}, {
			field : 'name',
			title : '名称',
			sortable : true
		}, {
			field : 'version',
			title : '版本'
		}, {
			field : 'createTime',
			title : '创建时间'
		}, {
			field : 'lastUpdateTime',
			title : '更新时间'
		}, {
			field : 'metaInfo',
			title : '元数据'
		}] ],
		toolbar : [ {
			text : '增加',
			iconCls : 'ext-icon-add',
			handler : function() {
				userAdd();
			}
		}],
		onRowContextMenu:function(e, rowIndex, rowData){
			e.preventDefault();
			$(this).datagrid('unselectAll');
			$(this).datagrid('selectRow',rowIndex);
			$('#user_menu').menu('show', {
				left : e.pageX,
				top : e.pageY
			});
		}
	});
	
	$('#user_edit_depid').combotree({
		url : '${pageContext.request.contextPath}/dep/tree.do',
		idField:'departmentId',
		textField:'departmentname',
		parentField : 'parentId',
		lines : true,
		panelHeight : 'auto',
		onClick: function(node){
			$("#user_edit_depid").combotree('setValue', node.departmentId);
		}
	});
});

function userAdd() {
	fromReset("admin_addUserForm");
	$('#admin_addUser').dialog('open');
}

function addUserForm(){
	$('#admin_addUserForm').submit();
}

function userEdit(){
	var rows = userDataGrid.datagrid('getChecked');
	if(rows.length==1){
		window.open("${pageContext.request.contextPath}/service/editor?id="+rows[0].id);
	}else{
		parent.$.messager.alert('提示','请选择一条记录进行修改');
	}
}
function exportModel(){
	var rows = userDataGrid.datagrid('getChecked');
	if(rows.length==1){
		window.open("${pageContext.request.contextPath}/model/export.do?modelId="+rows[0].id);
	}else{
		parent.$.messager.alert('提示','请选择一条记录进行修改');
	}
}

function deployModel(){
	var rows = userDataGrid.datagrid('getChecked');
	if(rows.length==1){
		$.post('${pageContext.request.contextPath}/model/deploy.do', {modelId:rows[0].id}, function(j) {
			parent.$.messager.progress({
				title : '提示',
				text : '数据处理中,请稍后....'
			});
			if (j.success) {
				parent.$.messager.progress('close');
				userDataGrid.datagrid('load');
			}
			userDataGrid.datagrid('uncheckAll');
			$.messager.show({
				title : '提示',
				msg : j.msg,
				timeout : 5000,
				showType : 'slide'
			});
		}, 'json');
	}else{
		parent.$.messager.alert('提示','请选择一条记录进行修改');
	}
}

function userDelete(){
	var rows = userDataGrid.datagrid('getChecked');
	var ids = [];
	if(rows.length>0){
		$.messager.confirm('确认','您确认想要删除记录吗?',function(r){
		    if (r){
		    	for(var i=0;i<rows.length;i++){
					ids.push(rows[i].id);
				}
				$.post('${pageContext.request.contextPath}/user/delete.do', {ids:ids.join(',')}, function(j) {
					if (j.success) {
						userDataGrid.datagrid('load');
						$('#admin_addUser').dialog('close');
					}
					userDataGrid.datagrid('uncheckAll');
					$.messager.show({
						title : '提示',
						msg : j.msg,
						timeout : 5000,
						showType : 'slide'
					});
				}, 'json');
		    }    
		});
	}else{
		$.messager.show({
			title : '提示',
			msg : '请勾选要删除的记录',
			timeout : 5000,
			showType : 'slide'
		});
	}
}
</script>
</head>

<body>
<div class="easyui-layout" data-options="fit:true,border:false">
	<div data-options="region:'center',border:false,title:'模型列表'" style="overflow: hidden;">
		<table id="user_datagrid"></table>
	</div>
</div>

<div id="user_menu" class="easyui-menu" style="width: 120px;display: none;">
<div onclick="userEdit()" iconCls="icon-edit">编辑</div>
<div onclick="deployModel()" iconCls="icon-edit">部署</div>
<div onclick="exportModel()" iconCls="icon-edit">导出</div>
<div onclick="userDelete()" iconCls="icon-remove">删除</div>
</div>

<div id="admin_addUser" class="easyui-dialog" data-options="closed:true,modal:true,title:'添加用户',buttons:[{
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
					addUserForm();
				}
			}]" style="width: 300px;height: 200px;">
	<form id="admin_addUserForm" action="${pageContext.request.contextPath}/model/create.do" target="_blank" method="post">
		<table>
			<tr>
				<th>名称</th>
				<td><input name="name" id="name"  class="easyui-validatebox" data-options="required:true,missingMessage:'名称必填'" /></td>
			</tr>
			<tr>
				<th>KEY</th>
				<td><input name="key"  id="key"  class="easyui-validatebox" data-options="required:true,missingMessage:'KEY必填'" /></td>
			</tr>
			<tr>
				<th>描述</th>
				<td><textarea id="description" name="description"></textarea></td>
			</tr>
		</table>
	</form>
</div>
</body>
</html>

 add 创建页面:

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>创建模型</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<jsp:include page="/pub.jsp"></jsp:include>
<script type="text/javascript">
	var useradd_submitForm = function(dialog, user_datagrid, p) {
		if ($('user_addForm').form('validate')) {
			/* $.post('${pageContext.request.contextPath}/model/create.do', $("#user_addForm").serialize(), function(j) {
			}, 'json'); */
			var form = document.forms[0];
			form.action='${pageContext.request.contextPath}/model/create.do';
			form.submit();
		}
	};
</script>
</head>

<body>
	<form id="user_addForm"  action="" method="post">
		<input type="hidden" name="userId"/>
		<table style="width: 100%;">
			<tr>
				<th>名称</th>
				<td><input name="name" id="name"  class="easyui-validatebox" data-options="required:true,missingMessage:'名称必填'" /></td>
			</tr>
			<tr>
				<th>KEY</th>
				<td><input name="key"  id="key"  class="easyui-validatebox" data-options="required:true,missingMessage:'KEY必填'" /></td>
			</tr>
			<tr>
				<th>描述</th>
				<td><textarea id="description" name="description"></textarea></td>
			</tr>
		</table>
	</form>
</body>
</html>

 现在你就可以对模型通过activiti网页设计器进行增删改查,还有部署和导出操作了。

网页设计器的整合基本就需要这些,也不是特别麻烦。

 补充:

package com.weirblog.util;

import java.util.ArrayList;
import java.util.List;

public class DataGrid<T> {

	private Long total = 0L;
	private List<T> rows = new ArrayList<T>();

	public DataGrid() {
		super();
	}

	public DataGrid(Long total, List<T> rows) {
		super();
		this.total = total;
		this.rows = rows;
	}

	public Long getTotal() {
		return total;
	}

	public void setTotal(Long total) {
		this.total = total;
	}

	public List<T> getRows() {
		return rows;
	}

	public void setRows(List<T> rows) {
		this.rows = rows;
	}

}

 

作者博客:http://www.loveweir.com

  • 大小: 42.8 KB
  • 大小: 47 KB
8
4
分享到:
评论
12 楼 panamera 2016-08-12  
保存模型提示保存路径不存在,怎么把流程设计器的保存按钮和后台系统的控制器关联起来
11 楼 fly_to_the_winds 2016-06-05  
楼主能出一篇整合activiti5.20的博文么?我整合的时候出很多问题
10 楼 bmcsy 2016-05-18  
请问博主是否关注过5.20版本的rest部分?貌似变化很大呢
9 楼 weir2009 2015-11-04  
u012792794 写道
能提供一下源代码吗

源码没有不过现在 网上有免费的视频学习了,学习一下就会了。
8 楼 u012792794 2015-11-03  
能提供一下源代码吗
7 楼 cao2358 2015-10-15  
调试的时候,发现是repositoryServcice.getModel(“2701”)返回的是null,问题是我在act_re_model表中是存在数据的
6 楼 cao2358 2015-10-15  
WARNING: A response with a 200 (Ok) status should have an entity. Make sure that resource "http://localhost:8080/activiti0830/service/model/2701/json" returns one or sets the status to 204 (No content).
楼主看看这是什么问题呢? 我无论在resources文件夹下加上activiti.cfg.xml文件,并且配置processEngine的name属性为“test”。或者我将该文件删除掉,都会这样,然后进不去web在线编辑页面。
5 楼 tinybeats 2015-04-03  
nice,先mark
4 楼 yanyanwish 2014-12-25  
集成完毕后,填完名称、Key后创建没有反应,modelor页面出不来。 直接访问http://localhost:8080/MyPro/service/editor?id=27501可以进入流程编辑页面

后台提示:
信息: ExplorerRestletServlet: [Restlet] ServerServlet: component class is null
信息: ExplorerRestletServlet: [Restlet] Attaching application: org.activiti.explorer.rest.application.ExplorerRestApplication@b56efe to URI: /MyPro/service
3 楼 weir2009 2014-12-23  
yanyanwish 写道
请问这个com.weir.* 是哪个jar包?

import com.weir.oa.util.DataGrid;
import com.weir.oa.util.Json;


我只是提供实现思路,具体代码 要根据自己的项目来
2 楼 yanyanwish 2014-12-22  
请问这个com.weir.* 是哪个jar包?

import com.weir.oa.util.DataGrid;
import com.weir.oa.util.Json;
1 楼 hntuddn 2014-10-10  
很好,学习了

相关推荐

Global site tag (gtag.js) - Google Analytics