This guide will walk you through the steps required to implement an Ajaxy ‘busy’ indicator for a CA Plex / WebClient application. The indicator signals to the user that the web application is processing their request, and to wait until it finishes. On the web this indicator usually takes the form of an animated GIF image in the center of your web-page, and when it displays the user will be unable to interact with the web application.
This can be implemented in a few easy steps, but first, a bit of background about the communication process.
Browser and Web Server Communication
WebClient provides the ability to run your Plex application in an internet browser. It achieves this by presenting the user-interface as HTML in a browser and communicating with the application server through the web server. This communication between the browser and web server is handled by the Dojo JavaScript library by utilizing AJAX.
One example of where this communication occurs is when you are refreshing a grid. Let’s say that you have a grid with a Refresh button; when you click on the button, an AJAX communication is made with the WebClient application on the web server to indicate that the ‘Pressed’ physical event has been triggered for the Refresh button. WebClient passes this on to your Plex application, which determines that this physical event is mapped to the logical event ‘RefreshGrid’, and the associated code is executed from your Events Handler – in this case it will call the BlockFetch function to get the data for the grid.
The communication between the browser and the web server is very fast, and usually the user wouldn’t notice that it happens at all, but sometimes; such as when you are reloading a grid, there may be a delay between the user’s action and the response. In this case, if there is no visible indication, the user may not be sure that their action is being processed and they may be tempted to click the button again.
As mentioned, the Dojo library initiates the communication, and it also provides a mechanism to detect when the communication begins and ends. So implementing a busy indicator can be as simple as displaying an image at the start of the communication, and hiding it when it completes.
Implementing the Indicator
1. Create an HTML element to display the animated GIF image.
We need to put this in a convenient template that will be available to all your functions. The WebMessages-Page.wcli page template is a suitable place, so add the following code above the /(!MainArea) section:
/(!LoadScreen)
<div id=”IOSpinner” class=”loadingSpinner” style=”display: none;”>
</div>
/(!LoadScreen)
This simply creates a hidden HTML div element with an ID of ‘IOSpinner’ and a class of “loadingSpinner”.
2. Define the style for the “loadingSpinner” class.
You will need to be referencing a .css stylesheet file. If you don’t have one defined, you can add the following code to the top of the WebMessages-Page.wcli file:
/(!CSSInit:once)
@import “/(!WsRes)/css/customStyles.css”;
/(!CSSInit)
This refers to the file WebContent/css/customStyles.css in your Web Project in Eclipse, so if it doesn’t exist then create the .css file and add the following style definition:
.loadingSpinner {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background: transparent url(‘../images/SpinnerAnimation12PointDark_48px.gif’) center no-repeat;
}
This style defines an image that will appear in the center of your browser window, it will appear on top of all other elements on the page, preventing the user from being able to click on anything while it is displayed.
3. Save the animated GIF.
Save the image below and save it as ‘SpinnerAnimation12PointDark_48px.gif’ and place it in the WebContent/images folder.
Alternately, you can generate your own animated GIF at http://www.ajaxload.info/#preview.
4. Add the JavaScript to show and hide the indicator.
Note that there is already some code in the WebMessages-page.wcli file to do this, but it uses properties that won’t work with our IOSpinner element, so we will replace this. First find the following code…
if (dojo.byId(“IOSpinner”)) {
dojo.connect(dojo, “_ioWatch”, function(dfd) {
dojo.byId(“IOSpinner”).style.visibility = “visible”;
dojo.connect(dfd, “callback”, function() {
dojo.byId(“IOSpinner”).style.visibility = “hidden”;
});
dojo.connect(dfd, “errback”, function() {
dojo.byId(“IOSpinner”).style.visibility = “hidden”;
});
});
}
…and replace it with:
if (dojo.byId(“IOSpinner”)) {
dojo.connect(dojo, “_ioWatch”, function(dfd) {
dojo.byId(“IOSpinner”).style.display = “block”;
dojo.connect(dfd, “callback”, function() {
dojo.byId(“IOSpinner”).style.display = “none”;
});
dojo.connect(dfd, “errback”, function() {
dojo.byId(“IOSpinner”).style.display = “none”;
});
});
}
This will display the HTML element that you defined in step 1 when the server communication starts, and hide it when it is complete – or if an error occurs.
5. Rebuild your templates and republish your WebClient application.
This blog post has been authored by Senior Application Consultant Andrew Leggett. He can be reached at aleggett@adcaustin.com.
