GWT Loading Screens

One of the advantages of making asynchronous calls is to allow the interface to continue operating. I.e. it is not held up by the call. However, it is also sometimes important to communicate with the user when the call has completed (and whether it has been successful). I generally only inform users of failure and allow successes to pass transparently but we also need some way of signifying that the call is still in process.

I have done this (as others have) with a small loading panel at the top of my html with id = "loadingMessage", which I can activate and de-activate according to the nature and progress of the asynchronous call.

The first thing to do is to generate a loading screen/message. A great resource for generating animated loading can be found at http://ajaxload.info/.

I then have two GWT methods that look something like this:

public static void showLoadingBanner(String message){

DOM.setInnerHTML(RootPanel.get("loadingMessage").getElement(), message + "                   &nbsp;<img src=\"images/ajax-loader.gif\" height=15>&nbsp;");

}

public static void hideLoadingBanner(){

DOM.setInnerHTML(RootPanel.get("loadingMessage").getElement(), "<br>");

}

for showing and removing the loading banner.