集成Diagram Viewer跟踪流程

标签: diagram viewer 跟踪 | 发表时间:2014-04-24 15:00 | 作者:
出处:http://www.kafeitu.me/

首先这是一篇迟来的教程,因为从5.12版本(目前最新版本为5.15.1)开始就已经提供了Diagram Viewer这个流程图跟踪组件,不管如何总归有人需要用到,所以我觉得还是要和大家分享一下。

1. 前言

目前被大家所采用的流程图跟踪有两种方式:

  • 一种是由引擎后台提供图片,可以把当前节点标记用红色
  • 一种是比较灵活的方式,先用引擎接口获取流程图(原图),然后再通过解析引擎的Activity对象逐个解析(主要是判断哪个是当前节点),最后把这些对象组成一个集合转换成JSON格式的数据输出给前端,用Javascript和Css技术实现流程的跟踪

这两种方式在kft-activiti-demo中都有演示,这里就不介绍了,参考流程跟踪部门代码即可。

2. Diagram Viewer简介

Diagram Viewer是官方在5.12版本中添加的新组件,以 Raphaël为基础库,用REST(参考:《 如何使用Activiti Rest模块》)方式获取JSON数据生成流程图并把流程的处理过程用不同的颜色加以标注,最终的效果如下图所示。

在应用中使用时也很方便,把这个组件的源码复制到项目中再配置一个REST拦截器,最后拼接一个URL即可;举个例子:

http://demo.kafeitu.me/kft-activiti-demo/diagram-viewer/index.html?processDefinitionId=leave-jpa:1:22&processInstanceId=27

这个URL中有两个参数:

  • processDefinitionId: 流程定义ID
  • processInstanceId: 流程实例ID

3. 集成Diagram Viewer

3.1 创建REST路由类

REST路由类源码在官方的Activiti Explorer里面有提供,代码如下:

package org.activiti.explorer.rest;

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.diagram.application.DiagramServicesInit;
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);
    DiagramServicesInit.attachResources(router);
    JsonpFilter jsonpFilter = new JsonpFilter(getContext());
    jsonpFilter.setNext(router);
    return jsonpFilter;
  }

}

把这个路由配置到 web.xml中:

    ExplorerRestletServlet
    org.restlet.ext.servlet.ServerServlet
    
        
        org.restlet.application
        org.activiti.explorer.rest.ExplorerRestApplication
    



    ExplorerRestletServlet
    /service/*

3.2 复制Diagram Viewer组件

在官方提供的Zip文件(可以从 www.activiti.org/download.html下载)中有一个 wars目录,用压缩工具解压 activiti-explorer.war文件,目录结构如下图:

diagram-viewer复制到项目的 webapp目录(或者是WebRoot目录)下,在项目中需要跟踪的地方拼接访问 diagram-viewer/index.html的URL即可,别忘记了刚刚介绍的两个重要参数。

http://demo.kafeitu.me/kft-activiti-demo/diagram-viewer/index.html?processDefinitionId=leave-jpa:1:22&processInstanceId=27

URL中有两个参数:

  • processDefinitionId: 流程定义ID
  • processInstanceId: 流程实例ID

这是一个独立的页面,你可以直接打开它或者把它嵌入在一个对话框里面(kft-activiti-demo就是用的嵌入方式)。

转载自:

相关 [diagram viewer 跟踪] 推荐:

集成Diagram Viewer跟踪流程

- - 咖啡兔
首先这是一篇迟来的教程,因为从5.12版本(目前最新版本为5.15.1)开始就已经提供了Diagram Viewer这个流程图跟踪组件,不管如何总归有人需要用到,所以我觉得还是要和大家分享一下. 目前被大家所采用的流程图跟踪有两种方式:. 一种是由引擎后台提供图片,可以把当前节点标记用红色. 一种是比较灵活的方式,先用引擎接口获取流程图(原图),然后再通过解析引擎的Activity对象逐个解析(主要是判断哪个是当前节点),最后把这些对象组成一个集合转换成JSON格式的数据输出给前端,用Javascript和Css技术实现流程的跟踪.

PDF-XChange Viewer 非官方中文主页

- Richard - 善用佳软
背景:PDF-XChange Viewer 是最优秀的全能型PDF阅读软件(与 Foxit 并列第一),功能多、性能佳、启动快. 译者:itsaquestion、Homer Dong (2010-02). 链接:官网\下载、详细评测、PDF软件汇总评测. PDF-XChange Viewer免费版功能.

PDF-XChange Viewer – PDF 悍将 | 小众软件 > 办公软件

- 翔 - 小众软件
PDF-XChange Viewer 最大特点就是快,尤其在加载高分辨率扫描文件时,秒杀其它 PDF 阅读器. 此外其标签式浏览、转换 PDF 为图像等功能也很便民. 高级 PDF 编辑功能需要购买 Pro 版本. 下载: 官网 | 下载 | 来自小众软件. ©2011 Thruth for 小众软件 | 原文链接 | 4 留言 | 加入我们 | 投稿 | 订阅指南.

PDF-XChange Viewer 2.5.201 - 瀏覽PDF的好選擇

- - 綠色工廠 Easylife Blog
開啟 PDF 檔,除了 Adobe Reader 之外,PDF-XChange Viewer 可說是另一款更合適的軟體了,PDF-XChange Viewer 除了可以開啟觀看 PDF 檔之外,它另外的書寫工具功能,可是不容忽視的. 也就是說 PDF-XChange Viewer 還允許我們在 PDF 檔案上任意位置加上註解、輸入文字、建立文字區域、箭頭、框線…等功能.

VNC Viewer for Google Chrome – VNC 连接客户端[Chrome]

- - 小众软件
VNC Viewer for Google Chrome 是一款 Chrome 扩展,可以让你通过 Chrome 浏览器来远程控制电脑. VNC(Virtual Network Computing),为一种使用RFB协议的屏幕画面分享及远程操作软件. 此软件借由网络,可传送键盘与鼠标的动作及实时的屏幕画面.

EXIF Viewer 瀏覽器內快速查看線上攝影照片的EXIF資訊

- 小趴 八足趴 八足 ramener - 電腦玩物
最近開始喜歡看一些攝影部落格,也開始除了純觀賞外,還會想了解這張精采照片背後的一些技術數值,也就是一般所說的EXIF資訊. 如果是瀏覽Picasa、Flickr這些相簿社群時,網站本身就會內建查看EXIF資訊的功能,但如果是在其他網站裡看到的照片分享,就不一定能夠簡便的看到深入的數據. 不過,像是「查看相片EXIF資訊」這種簡單的需求,一定是有很多套件可以滿足的.

Servlet – 会话跟踪

- - ImportNew
HTTP本身是 “无状态”协议,它不保存连接交互信息,一次响应完成之后即连接断开,下一次请求需要重新建立连接,服务器不记录上次连接的内容.因此如果判断两次连接是否是同一用户, 就需要使用 会话跟踪技术来解决.常见的会话跟踪技术有如下几种:. URL重写: 在URL结尾附加. 会话ID标识,服务器通过会话ID识别不同用户..

开源跟踪软件 Prey

- bin - 开源中国社区最新软件
Prey 可让你全时跟踪你的电话和笔记本,如果它丢了或者被偷了,可以帮你找到它们.

使用Google Analytics跟踪404页面

- dwfeng - 月光博客
  404页面是当访问者输入了错误的地址或者访问了被删除的页面时,服务器返回的错误页面(404 HTTP 状态代码). 这个页面除了告诉访问者页面不存在以外,不提供任何有价值的信息.   了解404页面的信息非常有用,可以发现访问者要查找的内容和推介来源,有助于网站补充新的内容并修复有问题的链接. 如何使用Google Analytics来追踪并显示404页面的情况.