Read the original article at The Crooked Stick
Following a number of discussions with colleagues I have tweaked the
BPEL Monitoring Web Page so that it is now an Ajax based solution and
hence the page now only exists to layout the data. The functionality
originally contained within the BpelSvgRetriever.java has been moved to
one of a number of Servlets that will execute during the page display
and periodically, as specified in the preferences, to refresh the
screen. Once the servlet have executed, asynchronously, the the Ajax
callbacks will update contents of the specified <div> blocks.
As a result of these changes the simple monitoring web application
has become slicker and in the majority of browsers no longer flickers
as a result of the refresh. In addition I have stripped the SVG
Generating code out of the main Document generation jar resulting in a
smaller packaged war file.
Code Fragments
The code fragments within this blog show the changes to the web
based application that allow it to work as an Ajax client. I have not
included the Servlet code within the blog entry because that it similar
to the BPELRetriever code from my previous entry
and can be found in that associated project download.
Monitor.js
The key functionality now exists within the monitor.js file and can
be seen from line 192 to the end of the file. This section of the js
file contains all the Ajax calls and associated callbacks. You can see
that they are now done in an Asynchronous manner and if we take the
functions between 199 and 224 we can see an example that has been
repeated for the rest of the file. I have implemented them as multiple
functions for simplicity.
The refreshBpelSvgCode() function will initialise the
ajaxBpelProcessSvgReq and call the AjaxGetBpelProcessSvgServlet. Once
this has been done it will define the asynchronous "onreadystatechange"
callback function. When the CallBack function is called we will test to
see if we have a successful response and then replace the html within
the <div id="bpelSvgCode"> with that returned from the Servlet.
The servlet will manage the various browser implementation return
inline svg for Mozilla based browsers and an Object containing the SVG
for IE and Opera.
The setupRefreshTimer() function at line 57 will initially load the
data onto the page and then if required, i.e. a refresh is specified,
will call itself after a specified timeout.
Monitor.jsp
The monitor.jsp is now very basic and simple includes the appropriate jsp page fragments and executes a number of JavaScript function when the page is ready.
LeftMenu.jsp
The leftMenu.jsp has now been reduced to nothing more than a <div> tag with a specificid.
Body.jsp
Although the body.jsp still contains the form information for
displaying and setting of the preferences and the Bpel Instance search
the key areas of code for displaying the BPEL Instance Table, BPEL
Process SVG, Usage Statistics and the Instance Activities Table have
been replaced, respectively, by the following <div> statements:
- <div id="bpelInstanceTable"></div>
- <div id="bpelSvgCode"></div>
- <div id="statsSvgCode"></div>
- <div id="activityTable"></div>
The html contents of these <div> statements will be replaced
by the corresponding JavaScript Ajax CallBacks.
Simple Running Example
The example below shows a simple business process as it runs. You
can see that the executing process is highlighted in blues and within
the SVG the running activity is also highlighted in blue whilst
completed activities will go green.
