注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的个人博客

欢迎访问我的网站www.shaccp.cn,学习软件编程

 
 
 

日志

 
 

activiti5整合网页流程设计器  

2014-09-22 15:07:37|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

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

Xml代码  收藏代码
  1. <!-- Restlet adapter, used to expose modeler functionality through REST -->  
  2.     <servlet>  
  3.         <servlet-name>ExplorerRestletServlet</servlet-name>  
  4.         <servlet-class>org.restlet.ext.servlet.ServerServlet</servlet-class>  
  5.         <init-param>  
  6.             <!-- Application class name -->  
  7.             <param-name>org.restlet.application</param-name>  
  8.             <param-value>org.activiti.explorer.rest.application.ExplorerRestApplication</param-value>  
  9.         </init-param>  
  10.     </servlet>  
  11.   
  12.     <servlet>  
  13.         <servlet-name>RestletServlet</servlet-name>  
  14.         <servlet-class>org.restlet.ext.servlet.ServerServlet</servlet-class>  
  15.         <init-param>  
  16.             <!-- Application class name -->  
  17.             <param-name>org.restlet.application</param-name>  
  18.             <param-value>org.activiti.rest.service.application.ActivitiRestServicesApplication</param-value>  
  19.         </init-param>  
  20.     </servlet>  
  21.     <!-- Catch all service requests -->  
  22.     <servlet-mapping>  
  23.         <servlet-name>ExplorerRestletServlet</servlet-name>  
  24.         <url-pattern>/service/*</url-pattern>  
  25.     </servlet-mapping>  
  26.   
  27.     <servlet-mapping>  
  28.         <servlet-name>RestletServlet</servlet-name>  
  29.         <url-pattern>/rest/*</url-pattern>  
  30.     </servlet-mapping>  

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

 

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

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

需要的文件有:



 将其拷贝到项目中

 

 

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

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

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

Java代码  收藏代码
  1. package org.activiti.explorer.rest.application;  
  2.   
  3. import org.activiti.rest.common.api.DefaultResource;  
  4. import org.activiti.rest.common.application.ActivitiRestApplication;  
  5. import org.activiti.rest.common.filter.JsonpFilter;  
  6. import org.activiti.rest.editor.application.ModelerServicesInit;  
  7. import org.restlet.Restlet;  
  8. import org.restlet.routing.Router;  
  9.   
  10. public class ExplorerRestApplication extends ActivitiRestApplication {  
  11.     
  12.   public ExplorerRestApplication() {  
  13.     super();  
  14.   }  
  15.   /** 
  16.    * Creates a root Restlet that will receive all incoming calls. 
  17.    */  
  18.   @Override  
  19.   public synchronized Restlet createInboundRoot() {  
  20.     Router router = new Router(getContext());  
  21.     router.attachDefault(DefaultResource.class);  
  22.     ModelerServicesInit.attachResources(router);  
  23.     JsonpFilter jsonpFilter = new JsonpFilter(getContext());  
  24.     jsonpFilter.setNext(router);  
  25.     return jsonpFilter;  
  26.   }  
  27.   
  28. }  

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

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

Java代码  收藏代码
  1. package com.weir.oa.activiti.web.workflow;  
  2.   
  3. import java.io.ByteArrayInputStream;  
  4. import java.util.List;  
  5.   
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.http.HttpServletResponse;  
  8.   
  9. import com.fasterxml.jackson.databind.JsonNode;  
  10. import com.fasterxml.jackson.databind.ObjectMapper;  
  11. import com.fasterxml.jackson.databind.node.ObjectNode;  
  12. import com.weir.oa.util.DataGrid;  
  13. import com.weir.oa.util.Json;  
  14.   
  15. import org.activiti.bpmn.converter.BpmnXMLConverter;  
  16. import org.activiti.bpmn.model.BpmnModel;  
  17. import org.activiti.editor.constants.ModelDataJsonConstants;  
  18. import org.activiti.editor.language.json.converter.BpmnJsonConverter;  
  19. import org.activiti.engine.RepositoryService;  
  20. import org.activiti.engine.repository.Deployment;  
  21. import org.activiti.engine.repository.Model;  
  22. import org.apache.commons.io.IOUtils;  
  23. import org.apache.commons.lang3.StringUtils;  
  24. import org.slf4j.Logger;  
  25. import org.slf4j.LoggerFactory;  
  26. import org.springframework.beans.factory.annotation.Autowired;  
  27. import org.springframework.stereotype.Controller;  
  28. import org.springframework.web.bind.annotation.PathVariable;  
  29. import org.springframework.web.bind.annotation.RequestMapping;  
  30. import org.springframework.web.bind.annotation.ResponseBody;  
  31.   
  32. /** 
  33.  * 流程模型控制器 
  34.  * 
  35.  * @author henryyan 
  36.  */  
  37. @Controller  
  38. @RequestMapping(value = "/model")  
  39. public class ModelController {  
  40.   
  41.     protected Logger logger = LoggerFactory.getLogger(getClass());  
  42.   
  43.     @Autowired  
  44.     RepositoryService repositoryService;  
  45.   
  46.     /** 
  47.      * 模型列表 
  48.      */  
  49.     @ResponseBody  
  50.     @RequestMapping("list")  
  51.     public DataGrid<Model> list() {  
  52.         List<Model> list = repositoryService.createModelQuery().list();  
  53.         DataGrid<Model> dg = new DataGrid<Model>((long)list.size(),list);  
  54.         return dg;  
  55.     }  
  56.   
  57.     /** 
  58.      * 创建模型 
  59.      */  
  60.     @RequestMapping("create")  
  61.     public void create(String name,String key, String description, HttpServletRequest request, HttpServletResponse response) {  
  62.         try {  
  63.             ObjectMapper objectMapper = new ObjectMapper();  
  64.             ObjectNode editorNode = objectMapper.createObjectNode();  
  65.             editorNode.put("id""canvas");  
  66.             editorNode.put("resourceId""canvas");  
  67.             ObjectNode stencilSetNode = objectMapper.createObjectNode();  
  68.             stencilSetNode.put("namespace""http://b3mn.org/stencilset/bpmn2.0#");  
  69.             editorNode.put("stencilset", stencilSetNode);  
  70.             Model modelData = repositoryService.newModel();  
  71.   
  72.             ObjectNode modelObjectNode = objectMapper.createObjectNode();  
  73.             modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME, name);  
  74.             modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);  
  75.             description = StringUtils.defaultString(description);  
  76.             modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, description);  
  77.             modelData.setMetaInfo(modelObjectNode.toString());  
  78.             modelData.setName(name);  
  79.             modelData.setKey(StringUtils.defaultString(key));  
  80.   
  81.             //保存模型  
  82.             repositoryService.saveModel(modelData);  
  83.             repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));  
  84.               
  85.             response.sendRedirect(request.getContextPath() + "/service/editor?id=" + modelData.getId());  
  86.         } catch (Exception e) {  
  87.             logger.error("创建模型失败:", e);  
  88.         }  
  89.     }  
  90.   
  91.     /** 
  92.      * 根据Model部署流程 
  93.      */  
  94.     @ResponseBody  
  95.     @RequestMapping("deploy")  
  96.     public Json deploy(String modelId) {  
  97.         Json json = new Json();  
  98.         try {  
  99.             Model modelData = repositoryService.getModel(modelId);  
  100.             ObjectNode modelNode = (ObjectNode) new ObjectMapper().readTree(repositoryService.getModelEditorSource(modelData.getId()));  
  101.             byte[] bpmnBytes = null;  
  102.   
  103.             BpmnModel model = new BpmnJsonConverter().convertToBpmnModel(modelNode);  
  104.             bpmnBytes = new BpmnXMLConverter().convertToXML(model);  
  105.   
  106.             String processName = modelData.getName() + ".bpmn20.xml";  
  107.             Deployment deployment = repositoryService.createDeployment().name(modelData.getName()).addString(processName, new String(bpmnBytes)).deploy();  
  108.             json.setMsg("部署成功,部署ID=" + deployment.getId());  
  109.             json.setSuccess(true);  
  110.         } catch (Exception e) {  
  111.             logger.error("根据模型部署流程失败:modelId={}", modelId, e);  
  112.             json.setMsg("模型部署流程失败");  
  113.         }  
  114.         return json;  
  115.     }  
  116.   
  117.     /** 
  118.      * 导出model的xml文件 
  119.      */  
  120.     @RequestMapping("export")  
  121.     public void export(String modelId, HttpServletResponse response) {  
  122.         try {  
  123.             Model modelData = repositoryService.getModel(modelId);  
  124.             BpmnJsonConverter jsonConverter = new BpmnJsonConverter();  
  125.             JsonNode editorNode = new ObjectMapper().readTree(repositoryService.getModelEditorSource(modelData.getId()));  
  126.             BpmnModel bpmnModel = jsonConverter.convertToBpmnModel(editorNode);  
  127.             BpmnXMLConverter xmlConverter = new BpmnXMLConverter();  
  128.             byte[] bpmnBytes = xmlConverter.convertToXML(bpmnModel);  
  129.   
  130.             ByteArrayInputStream in = new ByteArrayInputStream(bpmnBytes);  
  131.             IOUtils.copy(in, response.getOutputStream());  
  132.             String filename = bpmnModel.getMainProcess().getId() + ".bpmn20.xml";  
  133.             response.setHeader("Content-Disposition""attachment; filename=" + filename);  
  134.             response.flushBuffer();  
  135.         } catch (Exception e) {  
  136.             logger.error("导出model的xml文件失败:modelId={}", modelId, e);  
  137.         }  
  138.     }  
  139.   
  140.     @RequestMapping(value = "delete/{modelId}")  
  141.     public String delete(@PathVariable("modelId") String modelId) {  
  142.         repositoryService.deleteModel(modelId);  
  143.         return "redirect:/workflow/model/list";  
  144.     }  
  145.   
  146. }  

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

Html代码  收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5.     <jsp:include page="/pub.jsp"></jsp:include>  
  6.     <title>流程列表</title>  
  7. <script type="text/javascript">  
  8. var userDataGrid;  
  9. $(function() {  
  10.     userDataGrid = $('#user_datagrid').datagrid({  
  11.         url : '${pageContext.request.contextPath}/model/list.do',  
  12.         fit : true,  
  13.         fitColumns : true,  
  14.         border : false,  
  15.         pagination : true,  
  16.         idField : 'id',  
  17.         pagePosition : 'both',  
  18.         checkOnSelect:true,  
  19.         selectOnCheck:true,  
  20.         columns : [ [ {  
  21.             field : 'id',  
  22.             title : 'ID'  
  23.         }, {  
  24.             field : 'key',  
  25.             title : 'KEY',  
  26.             sortable : true  
  27.         }, {  
  28.             field : 'name',  
  29.             title : '名称',  
  30.             sortable : true  
  31.         }, {  
  32.             field : 'version',  
  33.             title : '版本'  
  34.         }, {  
  35.             field : 'createTime',  
  36.             title : '创建时间'  
  37.         }, {  
  38.             field : 'lastUpdateTime',  
  39.             title : '更新时间'  
  40.         }, {  
  41.             field : 'metaInfo',  
  42.             title : '元数据'  
  43.         }] ],  
  44.         toolbar : [ {  
  45.             text : '增加',  
  46.             iconCls : 'ext-icon-add',  
  47.             handler : function() {  
  48.                 userAdd();  
  49.             }  
  50.         }],  
  51.         onRowContextMenu:function(e, rowIndex, rowData){  
  52.             e.preventDefault();  
  53.             $(this).datagrid('unselectAll');  
  54.             $(this).datagrid('selectRow',rowIndex);  
  55.             $('#user_menu').menu('show', {  
  56.                 left : e.pageX,  
  57.                 top : e.pageY  
  58.             });  
  59.         }  
  60.     });  
  61.       
  62.     $('#user_edit_depid').combotree({  
  63.         url : '${pageContext.request.contextPath}/dep/tree.do',  
  64.         idField:'departmentId',  
  65.         textField:'departmentname',  
  66.         parentField : 'parentId',  
  67.         lines : true,  
  68.         panelHeight : 'auto',  
  69.         onClick: function(node){  
  70.             $("#user_edit_depid").combotree('setValue', node.departmentId);  
  71.         }  
  72.     });  
  73. });  
  74.   
  75. function userAdd() {  
  76.     fromReset("admin_addUserForm");  
  77.     $('#admin_addUser').dialog('open');  
  78. }  
  79.   
  80. function addUserForm(){  
  81.     $('#admin_addUserForm').submit();  
  82. }  
  83.   
  84. function userEdit(){  
  85.     var rows = userDataGrid.datagrid('getChecked');  
  86.     if(rows.length==1){  
  87.         window.open("${pageContext.request.contextPath}/service/editor?id="+rows[0].id);  
  88.     }else{  
  89.         parent.$.messager.alert('提示','请选择一条记录进行修改');  
  90.     }  
  91. }  
  92. function exportModel(){  
  93.     var rows = userDataGrid.datagrid('getChecked');  
  94.     if(rows.length==1){  
  95.         window.open("${pageContext.request.contextPath}/model/export.do?modelId="+rows[0].id);  
  96.     }else{  
  97.         parent.$.messager.alert('提示','请选择一条记录进行修改');  
  98.     }  
  99. }  
  100.   
  101. function deployModel(){  
  102.     var rows = userDataGrid.datagrid('getChecked');  
  103.     if(rows.length==1){  
  104.         $.post('${pageContext.request.contextPath}/model/deploy.do', {modelId:rows[0].id}, function(j) {  
  105.             parent.$.messager.progress({  
  106.                 title : '提示',  
  107.                 text : '数据处理中,请稍后....'  
  108.             });  
  109.             if (j.success) {  
  110.                 parent.$.messager.progress('close');  
  111.                 userDataGrid.datagrid('load');  
  112.             }  
  113.             userDataGrid.datagrid('uncheckAll');  
  114.             $.messager.show({  
  115.                 title : '提示',  
  116.                 msg : j.msg,  
  117.                 timeout : 5000,  
  118.                 showType : 'slide'  
  119.             });  
  120.         }, 'json');  
  121.     }else{  
  122.         parent.$.messager.alert('提示','请选择一条记录进行修改');  
  123.     }  
  124. }  
  125.   
  126. function userDelete(){  
  127.     var rows = userDataGrid.datagrid('getChecked');  
  128.     var ids = [];  
  129.     if(rows.length>0){  
  130.         $.messager.confirm('确认','您确认想要删除记录吗?',function(r){  
  131.             if (r){  
  132.                 for(var i=0;i<rows.length;i++){  
  133.                     ids.push(rows[i].id);  
  134.                 }  
  135.                 $.post('${pageContext.request.contextPath}/user/delete.do', {ids:ids.join(',')}, function(j) {  
  136.                     if (j.success) {  
  137.                         userDataGrid.datagrid('load');  
  138.                         $('#admin_addUser').dialog('close');  
  139.                     }  
  140.                     userDataGrid.datagrid('uncheckAll');  
  141.                     $.messager.show({  
  142.                         title : '提示',  
  143.                         msg : j.msg,  
  144.                         timeout : 5000,  
  145.                         showType : 'slide'  
  146.                     });  
  147.                 }, 'json');  
  148.             }      
  149.         });  
  150.     }else{  
  151.         $.messager.show({  
  152.             title : '提示',  
  153.             msg : '请勾选要删除的记录',  
  154.             timeout : 5000,  
  155.             showType : 'slide'  
  156.         });  
  157.     }  
  158. }  
  159. </script>  
  160. </head>  
  161.   
  162. <body>  
  163. <div class="easyui-layout" data-options="fit:true,border:false">  
  164.     <div data-options="region:'center',border:false,title:'模型列表'" style="overflow: hidden;">  
  165.         <table id="user_datagrid"></table>  
  166.     </div>  
  167. </div>  
  168.   
  169. <div id="user_menu" class="easyui-menu" style="width: 120px;display: none;">  
  170. <div onclick="userEdit()" iconCls="icon-edit">编辑</div>  
  171. <div onclick="deployModel()" iconCls="icon-edit">部署</div>  
  172. <div onclick="exportModel()" iconCls="icon-edit">导出</div>  
  173. <div onclick="userDelete()" iconCls="icon-remove">删除</div>  
  174. </div>  
  175.   
  176. <div id="admin_addUser" class="easyui-dialog" data-options="closed:true,modal:true,title:'添加用户',buttons:[{  
  177.                 text : '保存',  
  178.                 iconCls : 'icon-save',  
  179.                 handler : function() {  
  180.                     addUserForm();  
  181.                 }  
  182.             }]" style="width: 300px;height: 200px;">  
  183.     <form id="admin_addUserForm" action="${pageContext.request.contextPath}/model/create.do" target="_blank" method="post">  
  184.         <table>  
  185.             <tr>  
  186.                 <th>名称</th>  
  187.                 <td><input name="name" id="name"  class="easyui-validatebox" data-options="required:true,missingMessage:'名称必填'" /></td>  
  188.             </tr>  
  189.             <tr>  
  190.                 <th>KEY</th>  
  191.                 <td><input name="key"  id="key"  class="easyui-validatebox" data-options="required:true,missingMessage:'KEY必填'" /></td>  
  192.             </tr>  
  193.             <tr>  
  194.                 <th>描述</th>  
  195.                 <td><textarea id="description" name="description"></textarea></td>  
  196.             </tr>  
  197.         </table>  
  198.     </form>  
  199. </div>  
  200. </body>  
  201. </html>  

 add 创建页面:

Html代码  收藏代码
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <title>创建模型</title>  
  6. <meta name="content-type" content="text/html; charset=UTF-8">  
  7. <jsp:include page="/pub.jsp"></jsp:include>  
  8. <script type="text/javascript">  
  9.     var useradd_submitForm = function(dialog, user_datagrid, p) {  
  10.         if ($('user_addForm').form('validate')) {  
  11.             /* $.post('${pageContext.request.contextPath}/model/create.do', $("#user_addForm").serialize(), function(j) {  
  12.             }, 'json'); */  
  13.             var form = document.forms[0];  
  14.             form.action='${pageContext.request.contextPath}/model/create.do';  
  15.             form.submit();  
  16.         }  
  17.     };  
  18. </script>  
  19. </head>  
  20.   
  21. <body>  
  22.     <form id="user_addForm"  action="" method="post">  
  23.         <input type="hidden" name="userId"/>  
  24.         <table style="width: 100%;">  
  25.             <tr>  
  26.                 <th>名称</th>  
  27.                 <td><input name="name" id="name"  class="easyui-validatebox" data-options="required:true,missingMessage:'名称必填'" /></td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <th>KEY</th>  
  31.                 <td><input name="key"  id="key"  class="easyui-validatebox" data-options="required:true,missingMessage:'KEY必填'" /></td>  
  32.             </tr>  
  33.             <tr>  
  34.                 <th>描述</th>  
  35.                 <td><textarea id="description" name="description"></textarea></td>  
  36.             </tr>  
  37.         </table>  
  38.     </form>  
  39. </body>  
  40. </html>  

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

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

 本文由上海it培训机构推荐阅读,更多精彩请浏览上海java培训官网。

  评论这张
 
阅读(46)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017