[jboss-user] [JBoss jBPM] - Re: Workflow process visual representation
dleerob
do-not-reply at jboss.com
Wed Aug 22 04:53:24 EDT 2007
Okay, I have managed to get the Process Diagram (and current status etc) working in my own webapp, that does NOT use JSF. So basically, if you want to display the JBPM 3.2.1 web console diagram in your own, normal JSP page, you can do the following:
1) Use the ProcessImageServlet.java in your own web application. Code below:
| public class ProcessImageServlet extends HttpServlet {
|
| private static final long serialVersionUID = 1L;
|
| protected void doGet(HttpServletRequest request, HttpServletResponse response)
| throws ServletException, IOException {
| long processDefinitionId = Long.parseLong( request.getParameter( "definitionId" ) );
| JbpmContext jbpmContext = null;
| try{
| jbpmContext = StaticVariables.jbpmConfiguration.createJbpmContext();
| ProcessDefinition processDefinition = jbpmContext.getGraphSession().loadProcessDefinition(processDefinitionId);
| byte[] bytes = processDefinition.getFileDefinition().getBytes("processimage.jpg");
| OutputStream out = response.getOutputStream();
| out.write(bytes);
| out.flush();
| }
| catch (Exception e) {
| e.printStackTrace();
| }
| finally {
| jbpmContext.close();
| }
|
| // leave this in. it is in case we want to set the mime type later.
| // get the mime type
| // String contentType = URLConnection.getFileNameMap().getContentTypeFor( fileName );
| // set the content type (=mime type)
| // response.setContentType( contentType );
| }
|
2) Add the ProcessImageServlet to your web.xml file, code below:
| <!-- This is the process image servlet -->
| <servlet>
| <servlet-name>Process Image Servlet</servlet-name>
| <servlet-class>za.co.mycompany.workflow.webapp.servlet.ProcessImageServlet</servlet-class>
| <load-on-startup>1</load-on-startup>
| </servlet>
|
| <servlet-mapping>
| <servlet-name>Process Image Servlet</servlet-name>
| <url-pattern>/processImage</url-pattern>
| </servlet-mapping>
|
3) In my action class, I have the following method. (Remember that I have supplied the processInstanceId as a parameter).
| public ActionForward viewProcessInstanceImage(ActionMapping mapping, ActionForm form,
| HttpServletRequest request,
| HttpServletResponse response)
| throws Exception {
| String processInstanceId = request.getParameter("processInstanceId");
| JbpmContext jbpmContext = null;
| try {
| jbpmContext = StaticVariables.jbpmConfiguration.createJbpmContext();
| GraphSession graphSession = jbpmContext.getGraphSession();
| ProcessInstance processInstance = graphSession.getProcessInstance(Long.parseLong(processInstanceId));
| ProcessDefinition processDefinition = processInstance.getProcessDefinition();
| processImage(request, processDefinition);
| List processInstanceTokens = processInstance.findAllTokens();
| for(int x = 0; x < processInstanceTokens.size(); x++) {
| Token token = (Token)processInstanceTokens.get(x);
| token.getNode().getName(); //avoids LazyInitializationException on jsp page.
| }
| request.setAttribute("processInstanceTokens", processInstanceTokens);
| request.setAttribute("processInstanceId", processInstanceId);
| request.setAttribute("processDefinitionId", processDefinition.getId()+"");
| }
| catch (Exception e) {
| e.printStackTrace();
| }
| finally {
| jbpmContext.close();
| }
|
| return mapping.findForward("processInstanceImage"); //directs to processInstanceImage.jsp
| }
|
| public void processImage(HttpServletRequest request, ProcessDefinition processDefinition) {
| try {
| final FileDefinition fileDefinition = processDefinition.getFileDefinition();
| if (! fileDefinition.hasFile("gpd.xml")) {
| //return;
| }
| Document document = XmlUtil.parseXmlInputStream(fileDefinition.getInputStream("gpd.xml"));
| Element processDiagramElement = document.getDocumentElement();
| final String widthString = processDiagramElement.getAttribute("width");
| final String heightString = processDiagramElement.getAttribute("height");
| final List diagramNodeInfoList = new ArrayList();
| final NodeList nodeNodeList = processDiagramElement.getElementsByTagName("node");
| final int nodeNodeListLength = nodeNodeList.getLength();
| for (int i = 0; i < nodeNodeListLength; i ++) {
| final Node nodeNode = nodeNodeList.item(i);
| if (nodeNode instanceof Node && nodeNode.getParentNode() == processDiagramElement) {
| final Element nodeElement = (Element) nodeNode;
| final String nodeName = nodeElement.getAttribute("name");
| final String nodeXString = nodeElement.getAttribute("x");
| final String nodeYString = nodeElement.getAttribute("y");
| final String nodeWidthString = nodeElement.getAttribute("width");
| final String nodeHeightString = nodeElement.getAttribute("height");
| final DiagramNodeInfo nodeInfo = new DiagramNodeInfo(
| nodeName,
| Integer.parseInt(nodeXString),
| Integer.parseInt(nodeYString),
| Integer.parseInt(nodeWidthString),
| Integer.parseInt(nodeHeightString)
| );
| diagramNodeInfoList.add(nodeInfo);
| }
| }
| final DiagramInfo diagramInfo = new DiagramInfo(
| Integer.parseInt(heightString),
| Integer.parseInt(widthString),
| diagramNodeInfoList
| );
| request.setAttribute("diagramInfo", diagramInfo);
| } catch (Exception ex) {
| ex.printStackTrace();
| }
| }
|
| public static final class DiagramInfo implements Serializable {
| private static final long serialVersionUID = 1L;
|
| private final int width;
| private final int height;
| private final Map nodeMap;
|
| public DiagramInfo(final int height, final int width, final List/*<DiagramNodeInfo>*/ nodeList) {
| this.height = height;
| this.width = width;
| final LinkedHashMap map = new LinkedHashMap();
| for (int x = 0; x < nodeList.size(); x++) {
| DiagramNodeInfo nodeInfo = (DiagramNodeInfo)nodeList.get(x);
| map.put(nodeInfo.getName(), nodeInfo);
| }
| nodeMap = Collections.unmodifiableMap(map);
| }
| public int getHeight() {
| return height;
| }
| public Map getNodeMap() {
| return nodeMap;
| }
| public List getNodes() {
| return Collections.unmodifiableList(new ArrayList(nodeMap.values()));
| }
| public int getWidth() {
| return width;
| }
| }
|
| public static final class DiagramNodeInfo implements Serializable {
| private static final long serialVersionUID = 1L;
|
| private final String name;
| private final int x;
| private final int y;
| private final int width;
| private final int height;
|
| public DiagramNodeInfo(final String name, final int x, final int y, final int width, final int height) {
| this.height = height;
| this.name = name;
| this.width = width;
| this.x = x;
| this.y = y;
| }
| public int getHeight() {
| return height;
| }
| public String getName() {
| return name;
| }
| public int getWidth() {
| return width;
| }
| public int getX() {
| return x;
| }
| public int getY() {
| return y;
| }
| }
|
4) That action method mentioned above will return me to a jsp page which will display the image. JSP code below:
| <%DiagramInfo diagramInfo = (DiagramInfo)request.getAttribute("diagramInfo");%>
| <%if (diagramInfo != null) { %>
| <%String processDefinitionId = (String)request.getAttribute("processDefinitionId");%>
| <%String style="position:relative;height:"+diagramInfo.getHeight()+"px;width:"+diagramInfo.getWidth()+"px;";%>
| <div style="<%=style%>">
| <img alt="Process Diagram"
| src="processImage?definitionId=<%=processDefinitionId%>"
| style="position:absolute;top:0;left:0"/>
| <%List tokenList = (List)request.getAttribute("processInstanceTokens"); %>
| <%for (int x = 0; x < tokenList.size(); x++) { %>
| <%Token token = (Token)tokenList.get(x);%>
| <%DiagramNodeInfo node = (DiagramNodeInfo)diagramInfo.getNodeMap().get(token.getNode().getName());%>
| <%style="top:"+(node.getY()-12)+"px;left:"+(node.getX()+2)+"px;width:"+(node.getWidth()-3)+"px;height:"+(node.getHeight()+11)+"px";%>
| <%
| String styleClass = "pboxs";
| if (token.getEnd() != null) {
| styleClass = "pboxs_e";
| }
| if (token.isSuspended()) {
| styleClass = "pboxs_s";
| }
| %>
| <div style="<%=style%>" class="<%=styleClass%>">
| </div>
| <%style = "top:"+node.getY()+"px;left:"+node.getX()+"px;width:"+(node.getWidth()-3)+"px;height:"+(node.getHeight()-3)+"px";%>
| <%
| styleClass = "pbox";
| if (token.getEnd() != null) {
| styleClass = "pbox_e";
| }
| if (token.isSuspended()) {
| styleClass = "pbox_s";
| }
| %>
| <div style="<%=style%>" class="<%=styleClass%>">
| </div>
| <%style = "top:"+(node.getY()-14)+"px;left:"+node.getX()+"px;width:"+(node.getWidth()-1)+"px";%>
| <%
| styleClass = "pboxc";
| if (token.getEnd() != null) {
| styleClass = "pboxc_e";
| }
| if (token.isSuspended()) {
| styleClass = "pboxc_s";
| }
| %>
| <div style="<%=style%>" class="pboxce">
| <div class="<%=styleClass%>">
| <%
| String status = "";
| if (token.getEnd() == null && !token.isSuspended()) {
| status = "Running";
| }
| if (token.getEnd() == null && token.isSuspended()) {
| status = "Suspended";
| }
| if (token.getEnd() != null) {
| status = "Ended";
| }
| if (token.getName() != null) {
| status += " \""+token.getName()+"\"" ;
| }
| %>
| <a href="tokens.html?id=<%=(token.getId()+"")%>">
| <%=status%>
| </a>
| </div>
| </div>
| <%}//end for loop%>
| </div>
| <%}%>
|
5) In my webapps stylesheet, I added the following:
| /*JBPM Process Image classes------------------------------------------------*/
| div.pbox, div.pbox_s, div.pbox_e {
| position:absolute;
| border-width:1px;
| border-style:solid;
| }
|
| div.pbox {
| border-color:#0000ff;
| }
|
| div.pbox_s {
| border-color:#aa6600;
| }
|
| div.pbox_e {
| border-color:#cc0000;
| }
|
| div.pboxs, div.pboxs_s, div.pboxs_e {
| position:absolute;
| border-right-width:1px;
| border-right-style:solid;
| border-bottom-width:1px;
| border-bottom-style:solid;
| }
|
| div.pboxs {
| border-right-color:#9999ff;
| border-bottom-color:#9999ff;
| }
|
| div.pboxs_s {
| border-right-color:#ffaa99;
| border-bottom-color:#ffaa99;
| }
|
| div.pboxs_e {
| border-right-color:#660000;
| border-bottom-color:#660000;
| }
|
| div.pboxce {
| position:absolute;
| overflow:hidden;
| }
|
| div.pboxc, div.pboxc_s, div.pboxc_e {
| cursor:default;
| font-size:10px;
| white-space:nowrap;
| color:#ffffff;
| padding-left:3px;
| padding-right:3px;
| border-width:1px;
| border-style:solid;
| }
|
| div.pboxc {
| border-color:#0000ff;
| background-color:#0000ff;
| }
|
| div.pboxc_s {
| border-color:#aa6600;
| background-color:#aa6600;
| }
|
| div.pboxc_e {
| border-color:#cc0000;
| background-color:#cc0000;
| }
|
| div.pboxc a, div.pboxc_s a, div.pboxc_e a {
| color:#ffffff;
| text-decoration:none;
| }
|
| div.pboxc a:hover, div.pboxc_s a:hover, div.pboxc_e a:hover {
| text-decoration:underline;
| }
| /*---------------------------------------------END JBPM Process Image classes*/
|
I think that's it. This displayed the process instance diagram I asked for, exactly as is displayed on the JBPM 3.2.1 jbpm-console app. This should hopefully help some of you that don't use JSF to integrate the functionality into your own webapp. I haven't optimized my code yet, as I did this in a hurry, but I'm sure you will get the idea. Please feel free to post comments on anything I did wrong, or anything I could of done better.
Please note that most of the code above was taken/adapted from the JBPM 3.2.1 jbpm-console source code. I had to modify the DiagramInfo and DiagramNodeInfo classes slightly to be jdk 1.4 compatible, as that's what im using.
View the original post : http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4076674#4076674
Reply to the post : http://www.jboss.com/index.html?module=bb&op=posting&mode=reply&p=4076674
More information about the jboss-user
mailing list