When a GWT application loads, nothing is actually displayed by your application until all the generated JavaScript has been downloaded by the browser. I was looking for way to display a loading screen while my GWT application was loading, and then remove it once the GWT application is loaded.
The Solution
Since every GWT application has to be embedded in an HTML Host Page, an easy way to display a loading message is to place the loading message in a
in the HTML Host Page. Once all the GWT application JavaScript is done loading, we can have the GWT application remove the loading message by doing some DOM manipulation on the HTML Host Page.
Here is a sample HTML Host Page. The loading message, along with a loading animation image is contained in a
Here is a sample HTML Host Page. The loading message, along with a loading animation image is contained in a
named “Loading-Message”.
1: <html>
2: 3: <head>
4: <title>GWT Applicationtitle>
5: <link rel="stylesheet" href="style.css">
6: head>
7: 8: <body>
9: 10: <script type="text/javascript" language="javascript" src="gwtapp.nocache.js">script>
11: 12: <h2>GWT Applicationh2>
13: 14: 15: <div id="Loading-Message">
16: <img src="loading-animation.gif" alt="loading"> Loading GWT Application, please wait...
17: div>
18: 19: 20: 21: <div id="GWT-Application-Panel">
22: div>
23: 24: body>
25: 26: html>
The “Loading-Message” can be removed from the HTML Host Page using the following line of Java Code:
DOM.setInnerHTML(RootPanel.get("Loading-Message").getElement(), "");Where would you put this line of code? You can put it anywhere in your GWT application. However, a good place to put it would be in your GWT application EntryPoint class’s onModuleLoad method. You can place it either before or after your application loads the UI elements. Here is an example onModuleLoad
method:
1: public void onModuleLoad() {
2: // Remove the loading message
3: DOM.setInnerHTML(RootPanel.get(“Loading-Message”).getElement(), “”); 4: 5: // Get the Application Container div from the DOM
6: mainPanel = RootPanel.get(“GWT-Application_Panel”); 7: 8: // Add GWT UI components
9: addWidgetsTo(mainPanel); 10: } 
