<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body link="#355491" alink="#4262a1" vlink="#355491" style="background: #e2e2e2; margin: 0; padding: 20px;">
<div>
<table cellpadding="0" bgcolor="#FFFFFF" border="0" cellspacing="0" style="border: 1px solid #dadada; margin-bottom: 30px; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border: solid 2px #ccc; background: #dadada; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td bgcolor="#000000" valign="middle" height="58px" style="border-bottom: 1px solid #ccc; padding: 20px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;">
<h1 style="color: #333333; font: bold 22px Arial, Helvetica, sans-serif; margin: 0; display: block !important;">
<!-- To have a header image/logo replace the name below with your img tag -->
<!-- Email clients will render the images when the message is read so any image -->
<!-- must be made available on a public server, so that all recipients can load the image. -->
<a href="http://community.jboss.org/index.jspa" style="text-decoration: none; color: #E1E1E1">JBoss Community</a></h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="font: normal 12px Arial, Helvetica, sans-serif; color:#333333; padding: 20px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;"><h3 style="margin: 10px 0 5px; font-size: 17px; font-weight: normal;">
SOA-P Creating Custom GUIs for jBPM
</h3>
<span style="margin-bottom: 10px;">
modified by <a href="http://community.jboss.org/people/admin">Administrator Administrator</a> in <i>jBPM</i> - <a href="http://community.jboss.org/docs/DOC-14765">View the full document</a>
</span>
<hr style="margin: 20px 0; border: none; background-color: #dadada; height: 1px;">
<div class="jive-rendered-content"><p>jBPM is a BPM capability included with SOA Platform.  At its core, it is a simple Java API wrapping Hibernate.  It can be used to orchestrate ESB services, orchestrate Java actions, create user tasks, submit user tasks, and a host of other activities.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>One common question is how users can create GUIs to interact with the jBPM processes.  There are several ways to do this.  Developers could utilize Seam which has built in annotations for interacting with jBPM.  Developers could create a custom web application (JSP, Servlet, Spring, Struts, Seam, etc.) that uses the jBPM Java API directly.  Developers could modify an existing Java client of any type to add interaction with the jBPM processes via the jBPM Java APIs.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>In this wiki, we will see how to create a very simple web based GUI that interacts with jBPM.  This GUI will be a single, simple JSP file in a WAR.  The JSP file will provide the capability to:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>1.)  Create process definitions</p><p>2.)  Delete process definitions</p><p>3.)  Create process instances</p><p>4.)  Signal process instances</p><p>5.)  Show tasks for a given user</p><p>6.)  Submit tasks</p><p>7.)  Add new variables when submitting a task</p><p>8.)  List variables associated with a process</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>If a single JSP file has all this functionality, it must be huge right?  Actually, it's less than 200 total lines of code (including all the HTML, comments, and whitespace).  I would not recommend writing a single JSP with everything in it (GUI, buisiness logic, control logic, etc.).  I only did it this way for sake of simplicity for this example.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><span>First, note the attached jBPMProject.war.  This can be directly deployed to SOA-P 4.3 or 5.0 in the "deploy" directory of your server configuration and accessed via "</span><a class="jive-link-external-small" href="http://localhost:8080/jBPMProject" target="_blank">http://localhost:8080/jBPMProject</a><span>".</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>You should see a screen like this below.  If you have other processes already deployed with jBPM, you will see them as well and can interact with them also.  So on this screen, click "DeployDefaultProcessDefinition" to deploy an example jBPM process.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2063/1.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2063/450-252/1.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Now we should see the process definition deployed below.  Click the "CreateInstance 101" button to create an instance of this process.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2064/2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2064/450-252/2.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Now we see the instance we created and that it has 5 nodes:  Start, three tasks, and End.  Also note that there are currently no tasks assigned to "Aaron" as shown at the top of the screen.  Now, we will click the "Signal 122" button to move this process to the "Submit Order Node".</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2065/4.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2065/450-293/4.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Now we are in the "Submit Order Node", and we see that there is now a task for Aaron.  The text box below the task is a list of comma separated properties that can be associated with the process as part of submitting the task.  The JSP error handling is not very robust, so make sure you have at least one variable defined, then click the "SubmitTask 149" button to submit Aaron's task.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2066/5.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2066/450-299/5.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Note that the process has moved to the next task which is "Approve Order Node".  Also note that there are no more tasks assigned to Aaron.  So who is the "Approve Order Node" task assigned to?  Well, if you click the "Aaron" dropdown, you'll see there is also a "Bob" user - so select him.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2067/6.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2067/450-299/6.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Sure enough, the "Approve Order Task" is assigned to Bob.  You can add new variable (see Hello World below) and submit this task as well.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2069/10.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2069/450-299/10.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Now we are in the last node of the process, and it is also a task node assigned to Bob.  Note that on the process instance, there are three variables currently associated with it - the two default ones and the new Hello World variable that we added.  Now, click "SubmitTask 151" to finish the last task of this process.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2070/11.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2070/450-290/11.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Now we see that there are no more tasks and the process is in the end state.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-14765-3-2071/12.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-14765-3-2071/450-290/12.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Congratulations on using an ~200 line JSP to create process definitions, proces instances, search tasks, submit tasks, add variables, and signal processes!</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Next we'll show the content of the JSP file that is embedded in the attached WAR.  Note that the JSP has basically three sections.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>The first section is a set of helper functions to deploy process definitions, signal processes, get user tasks, etc.  These are functions that would likely be reused in any GUI - and note how simple they are.  Note that the deploy process definition actually reads the process definition from an XML file also in the WAR.  Alternatively, this process definition could be deployed:  1.)  From JBDS, 2.)  From Ant, 3.)  From the jBPM admin console.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>The second section is the controller logic that makes sure that when the user clicks something on the GUI, it does what the user wanted it to do.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>The third section is what actually renders the GUI that we have seen above.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><blockquote class="jive-quote"><p><span style="font-size: 6pt;"><%@ page language="java" contentType="text/html; charset=UTF-8"<br/>    pageEncoding="UTF-8" import="java.util.*,org.jbpm.graph.exe.*,org.jbpm.graph.def.*,org.jbpm.*,org.jbpm.db.*,org.jbpm.taskmgmt.exe.*"%><br/><%!<br/><br/>//////////////////////////////////////////////////////////////////////<br/>//<br/>// Section 1:  Helper functions<br/>//<br/>//////////////////////////////////////////////////////////////////////<br/><br/>public void deployDefaultProcessDefinition(JbpmContext context) {<br/>     <br/>    //You probably would never deploy processes this way, instead would deploy them from JBoss<br/>    //Developer Studio or Ant.  However, this mechanism allows this JSP to create <br/>    //process definitions if none have been deployed.<br/>    context.deployProcessDefinition(ProcessDefinition.parseXmlInputStream(<br/>            this.getClass().getResourceAsStream("/processDefinition.xml")));<br/>}<br/><br/>public static List<ProcessDefinition> GetProcessDefinitions(JbpmContext context) {<br/>    GraphSession session = context.getGraphSession();<br/>    return session.findAllProcessDefinitions();<br/>}<br/><br/>public static void DeleteProcessDefinition(JbpmContext context, long definitionId) {<br/>    GraphSession session = context.getGraphSession();<br/>    session.deleteProcessDefinition(definitionId);<br/>}<br/><br/>public static List<ProcessInstance> GetProcessInstances(JbpmContext context, long definitionId) {<br/>    GraphSession session = context.getGraphSession();<br/>    return session.findProcessInstances(definitionId);<br/>}<br/><br/>public static void CreateProcessInstance(JbpmContext context, long definitionId) {<br/>    GraphSession session = context.getGraphSession();<br/>    ProcessInstance process = session.getProcessDefinition(definitionId).createProcessInstance();<br/>    context.save(process);<br/>}<br/><br/>public static void DeleteProcessInstance(JbpmContext context, long instanceId) {<br/>    GraphSession session = context.getGraphSession();<br/>    session.deleteProcessInstance(instanceId);<br/>}<br/><br/>public static List<TaskInstance> GetUserTasks(JbpmContext context, String user) {<br/>    return (List<TaskInstance>)context.getTaskList(user);<br/>}<br/><br/>public static void SubmitTask(JbpmContext context, long taskId, String properties) {<br/>    Map<String,String> propMap = new TreeMap<String,String>();<br/>    String[] propArray = properties.split(",");<br/>    for(String prop : propArray) {<br/>        String[] propPieces = prop.split("=");<br/>        propMap.put(propPieces[0].trim(), propPieces[1].trim());<br/>    }<br/>    <br/>    TaskInstance task = context.getTaskInstance(taskId);<br/>    task.start();<br/>    task.addVariables(propMap);    <br/>    task.end();<br/>}<br/><br/>public static void SignalToken(JbpmContext context, long tokenId) {<br/>    Token token = context.getTokenForUpdate(tokenId);<br/>    token.signal();<br/>}<br/>public static void MoveToken(JbpmContext context, long tokenId) {<br/>    Token token = context.getTokenForUpdate(tokenId);<br/>    //Should call signal, but can't do this because some processes <br/>    //require real data to be there...<br/>    //token.signal();<br/><br/>    //Instead, we'll find all the nodes and move to the next or end the process.<br/>    //This is not reality, but for demonstration<br/>    Node currentNode = token.getNode();<br/>    ProcessInstance processInstance = token.getProcessInstance();<br/>    List<Node> nodes = processInstance.getProcessDefinition().getNodes();<br/>    for(int i=0; i<nodes.size(); i++) {<br/>        <br/>        //If we found the current node and there are more available...<br/>        if(nodes.get(i).getId() == currentNode.getId() && (i+1) < nodes.size()) {<br/>            token.setNode(nodes.get(i+1));<br/>            continue;<br/>        }<br/>    }<br/>}<br/>%><br/><%<br/><br/>//////////////////////////////////////////////////////////////////////<br/>//<br/>// Section 2:  Controller logic<br/>//<br/>//////////////////////////////////////////////////////////////////////<br/><br/>JbpmContext context = JbpmConfiguration.getInstance().createJbpmContext();<br/>String action = request.getParameter("action");<br/>if(action != null) {<br/>    if(action.startsWith("CreateInstance")) {<br/>        long definitionId = Long.parseLong(action.split(" ")[1]);<br/>        CreateProcessInstance(context, definitionId);<br/>    }<br/>    else if(action.startsWith("DeleteInstance")) {<br/>        long definitionId = Long.parseLong(action.split(" ")[1]);<br/>        DeleteProcessInstance(context, definitionId);<br/>    }<br/>    else if(action.startsWith("Signal")) {<br/>        long definitionId = Long.parseLong(action.split(" ")[1]);<br/>        SignalToken(context, definitionId);<br/>    }<br/>    else if(action.startsWith("Move")) {<br/>        long definitionId = Long.parseLong(action.split(" ")[1]);<br/>        MoveToken(context, definitionId);<br/>    }<br/>    else if(action.startsWith("DeleteDefinition")) {<br/>        long definitionId = Long.parseLong(action.split(" ")[1]);<br/>        DeleteProcessDefinition(context, definitionId);<br/>    }<br/>    else if(action.startsWith("DeployDefaultProcessDefinition")) {<br/>        deployDefaultProcessDefinition(context);<br/>    }<br/>    else if(action.startsWith("SubmitTask")) {<br/>        SubmitTask(context, Long.parseLong(action.split(" ")[1]), request.getParameter("properties"));<br/>    }<br/>}<br/><br/>//////////////////////////////////////////////////////////////////////<br/>//<br/>// Section 3:  Rendering the GUI<br/>//<br/>//////////////////////////////////////////////////////////////////////<br/><br/>%><br/><html><br/><body><br/><form method="POST"><br/><table border="1" cellpadding="5" cellspacing="1"> <br/><tr bgcolor="#aaaaff"><td>Tasks for user <br/>   <select name="username" onchange="form.submit()"><br/>      <option value="Aaron" <%=("Aaron".equals(request.getParameter("username"))?"SELECTED=\"SELECTED\"":"")%>>Aaron</option><br/>      <option value="Bob" <%=("Bob".equals(request.getParameter("username"))?"SELECTED=\"SELECTED\"":"")%>>Bob</option><br/>   </select> <br/>   <input type="submit" value="Refresh"/></td></tr><br/><br/><%<br/>for(TaskInstance task : GetUserTasks(context, request.getParameter("username"))) {<br/>%><br/><tr bgcolor="#eeeeff"><td>Task: <%=task.getName()%> <br/><input type="submit" name="action" value="SubmitTask <%=task.getId()%>"/><br/>Add Properties to Process: <input type="text" name="properties" value="key1=val1, key2=val2"/><br/></td></tr><br/><% } %><br/><br/><tr><td></td></tr><br/><tr bgcolor="#0000ff"><td align="center"><br/><input type="submit" name="action" value="DeployDefaultProcessDefinition"/><br/></td></tr><br/><% <br/>List<ProcessDefinition> processDefinitions = GetProcessDefinitions(context);<br/><br/>for(ProcessDefinition definition : processDefinitions) {<br/>    out.println("<tr bgcolor=\"#aaaaff\"><td nowrap><b><font size=\"+1\">");<br/>    out.println(definition.getName());<br/>    out.println("(version " + definition.getVersion() + ")</font></b>");<br/>    out.println("<input type=\"submit\" name=\"action\" value=\"CreateInstance " + definition.getId() + "\"/>");<br/>    out.println("<input type=\"submit\" name=\"action\" value=\"DeleteDefinition " + definition.getId() + "\"/>");<br/>    out.println("</td></tr>");<br/>    <br/>    for(ProcessInstance instance : GetProcessInstances(context, definition.getId())) {<br/>        out.println("<tr bgcolor=\"#eeeeff\"><td>");<br/>        out.println("  Instance #" + instance.getId() + " <input type=\"submit\" name=\"action\" value=\"DeleteInstance " + instance.getId() + "\"/>");<br/>        Map<?,?> variables = instance.getContextInstance().getVariables();<br/>        if(variables != null && variables.entrySet() != null) {<br/>        for(Map.Entry<?,?> e : variables.entrySet()) {<br/>            out.println(e.getKey() +" = " + e.getValue());<br/>        }} else {<br/>            out.println("No variables");<br/>        }<br/>        List<Node> nodes = instance.getProcessDefinition().getNodes();<br/>        <br/>        Token token = (Token)instance.findAllTokens().get(0);<br/>        Node currentNode = token.getNode();<br/>        for(Node node : nodes) {<br/>            out.println("<br>    Node: " + node.getName());<br/><br/>            if(node.getId()  == currentNode.getId()) {<br/>                out.println("<font color=\"red\"> - (active)</font>");<br/>                <br/>                //If not the last node<br/>                if(node.getId() != nodes.get(nodes.size()-1).getId()) {<br/>                    out.println(" <input type=\"submit\" name=\"action\" value=\"Signal " + token.getId() + "\"/>");<br/>                    out.println(" <input type=\"submit\" name=\"action\" value=\"Move " + token.getId() + "\"/>");<br/>                }<br/>            }<br/>        }<br/>        out.println("</td></tr>");<br/>    }<br/>}<br/><br/>context.close();<br/>%><br/></table><br/></form><br/></body> <br/></html></span></p></blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Note that the template for almost everything done with jBPM looks like this:</p><blockquote class="jive-quote"><span style="font-size: 8pt;">JbpmContext context = JbpmConfiguration.getInstance().createJbpmContext();<br/></span><span style="font-size: 8pt;">GraphSession session = context.getGraphSession();<br/><br/>//Get process defintion, processes, tasks, signal, submit, etc.<br/></span><span style="font-size: 8pt;"><br/>context.close();</span></blockquote><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>I hope this has been helpful in showing how you can utilize the jBPM APIs to very easily interact with jBPM processes.  If you are using JBoss Seam or ESB in the SOA Platform, there is other integration that is out of the box.  But anytime you want to interact directly with jBPM via the APIs to create task inboxes, integrate with existing GUIs, or anything like that, it should be as simple as a few lines of code.</p></div>
<div style="background-color: #f4f4f4; padding: 10px; margin-top: 20px;">
<p style="margin: 0;">Comment by <a href="http://community.jboss.org/docs/DOC-14765">going to Community</a></p>
<p style="margin: 0;">Create a new document in jBPM at <a href="http://community.jboss.org/choose-container!input.jspa?contentType=102&containerType=14&container=2034">Community</a></p>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>