以图形化的方式显示JBPM当前流程的方法及原理分析
已经可以比较好的运行JBPM
了，但是如果能以图形化的方式显示工作流，并且把当前节点高亮显示，这样可用性就更好了，用户可以很轻松的看到当前流程到哪个节点了。
我发现JBPM
的starters-kit
的例子中就有类似的效果，所以决定分析一下它是怎么实现的。
打开网页，浏览到有显示当前工作流节点的页面，查看到此页面的地址为task.jsp
，发现其中的核心代码如下：
<jbpm:processimage task="${taskBean.taskInstanceId}"/>
这里使用了JBPM
提供的jbpm:processimage
标签，此标签定义在jbpm.tld
中，这个Tag
的类为org.jbpm.webapp.tag.ProcessImageTag
。所以只要使用这个标签我们就可以很轻松的在Web
页面中显示图形化的工作流了。
那么如果是在Swing
、SWT
等非Web
界面中也想显示这种效果怎么办呢？那么让我们来分析一下ProcessImageTag
类。
private void retrieveByteArrays() {
try {
FileDefinition fileDefinition = processDefinition.getFileDefinition();
gpdBytes = fileDefinition.getBytes("gpd.xml");
imageBytes = fileDefinition.getBytes("processimage.jpg");
} catch (Exception e) {
e.printStackTrace();
}
}
gpd.xml
中记录的是节点的位置关系，processimage.jpg
是图形化的图片（只是基图，没有高亮显示当前节点），这两个文件是JBPM
的Eclipse
插件自动生成的。
得到流程实例当前节点的方法：
private void initialize() {
JbpmContext jbpmContext = JbpmContext.getCurrentJbpmContext();
if (this.taskInstanceId > 0) {
TaskInstance taskInstance = jbpmContext.getTaskMgmtSession().loadTaskInstance(taskInstanceId);
currentToken = taskInstance.getToken();
}
else
{
if (this.tokenInstanceId > 0)
currentToken = jbpmContext.getGraphSession().loadToken(this.tokenInstanceId);
}
processDefinition = currentToken.getProcessInstance().getProcessDefinition();
}
从currentToken
中可以得到当前节点在显示的时候的长度、宽度、横纵坐标等值。得到的方式如下：
private int[] extractBoxConstraint(Element root) {
int[] result = new int[4];
String nodeName = currentToken.getNode().getName();
XPath xPath = new DefaultXPath("//node[@name='" + nodeName + "']");
Element node = (Element) xPath.selectSingleNode(root);
result[0] = Integer.valueOf(node.attribute("x").getValue()).intValue();
result[1] = Integer.valueOf(node.attribute("y").getValue()).intValue();
result[2] = Integer.valueOf(node.attribute("width").getValue()).intValue();
result[3] = Integer.valueOf(node.attribute("height").getValue()).intValue();
return result;
}
这样用<div/>
标签就可以将当前节点框上一个红色的框框了：
jspOut.println("<div style='position:relative; background-image:url(" + imageLink + "); width: " + imageDimension[0] + "px; height: " + imageDimension[1] + "px;'>");
//
详细代码参考：writeTable
方法
原来高亮显示是在原有的图片上叠加一个高亮的框框实现的。所以如果要显示在Swing
、SWT
中的话也只要参考这个思路，在当前节点位置显示一个高亮的框框就可以了！
本文出自 “CowNew开源团队” 博客，转载请与作者联系！