Read the original article at The Crooked Stick

Following a number of discussions with colleagues I have tweaked theBPEL Monitoring Web Page so that it is now an Ajax based solution andhence the page now only exists to layout the data. The functionalityoriginally contained within the has been moved toone of a number of Servlets that will execute during the page displayand periodically, as specified in the preferences, to refresh thescreen. Once the servlet have executed, asynchronously, the the Ajaxcallbacks will update contents of the specified

As a result of these changes the simple monitoring web applicationhas become slicker and in the majority of browsers no longer flickersas a result of the refresh. In addition I have stripped the SVGGenerating code out of the main Document generation jar resulting in asmaller packaged war file.

Related Articles

  • BPELMonitoring Update.
  • NetBeansPlugin for Document Generation.

  • BpelMonitorWebApplication.war- Runnable War File (MediacastPage).
  • Sample Web Application (MediacastPage).
Code Fragments

The code fragments within this blog show the changes to the webbased application that allow it to work as an Ajax client. I have notincluded the Servlet code within the blog entry because that it similarto the BPELRetriever code from my previous entryand can be found in that associated project download.


The key functionality now exists within the monitor.js file and canbe seen from line 192 to the end of the file. This section of the jsfile contains all the Ajax calls and associated callbacks. You can seethat they are now done in an Asynchronous manner and if we take thefunctions between 199 and 224 we can see an example that has beenrepeated for the rest of the file. I have implemented them as multiplefunctions for simplicity.

The refreshBpelSvgCode() function will initialise theajaxBpelProcessSvgReq and call the AjaxGetBpelProcessSvgServlet. Oncethis has been done it will define the asynchronous "onreadystatechange"callback function. When the CallBack function is called we will test tosee if we have a successful response and then replace the html withinthe
with that returned from the Servlet.The servlet will manage the various browser implementation returninline svg for Mozilla based browsers and an Object containing the SVGfor IE and Opera.

The setupRefreshTimer() function at line 57 will initially load thedata onto the page and then if required, i.e. a refresh is specified,will call itself after a specified timeout.

<br&amp ;amp;amp;amp;amp;amp;gt;


The monitor.jsp is now very basic and simple includes theappropriate jsp page fragments and executes a number of JavaScriptfunction when the page is ready.

<br&amp ;amp;amp;amp;gt;


The leftMenu.jsp has now been reduced to nothing more than a
tag with a specificid.


Although the body.jsp still contains the form information fordisplaying and setting of the preferences and the Bpel Instance searchthe key areas of code for displaying the BPEL Instance Table, BPELProcess SVG, Usage Statistics and the Instance Activities Table havebeen replaced, respectively, by the following

The html contents of these
statements will be replacedby the corresponding JavaScript Ajax CallBacks.

Simple Running Example

The example below shows a simple business process as it runs. Youcan see that the executing process is highlighted in blues and withinthe SVG the running activity is also highlighted in blue whilstcompleted activities will go green.