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
_______________________________________________
jboss-user mailing list
jboss-user@lists.jboss.org
https://lists.jboss.org/mailman/listinfo/jboss-user
