« »

Coding Quickie – display a message while your GWT app loads

Posted December 17th, 2007 by Izabel

We believe in the power of ONE, at ScreamingToaster. We believe in innovation - ONE experience can change a person's life. We believe in partnerships - ONE endeavor can establish lasting trust & mutual success. We believe in education - ONE training course can empower a developer for life. We believe in giving back - ONE open-source project can inspire future entrepreneur. ONE person can become the leader that starts a revolution. ONE company can change the world and make it a better place - join us.

The Problem

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 <div> 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 <div> named “Loading-Message”.

   1: <html>
   2:  
   3: <head>
   4:   <title>GWT Application</title>
   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 Application</h2>
  13:  
  14:   <!-- The loading message div -->
  15:   <div id="Loading-Message">
  16:     <img src="loading-animation.gif"  alt="loading"> Loading GWT Application, please wait... 
  17:   </div>
  18:  
  19:   <!-- The Application's UI elements will be placed in this div by the Application module's -->
  20:   <!-- entry point class when it is loaded                                                  -->
  21:   <div id="GWT-Application-Panel">
  22:   </div>
  23:  
  24: </body>
  25:  
  26: </html>

The “Loading-Message” <div> 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: }

If you aren’t the artistic type, here is a website you can use to download a customized animation image. Here is another website, where you can select some existing animations to use in your app.

If you haven’t already, please check out our continuing series of GWT Tutorials beginning with Introduction to GWT. You can find the rest of our GWT tutorials here.

 

We believe in the power of ONE, at ScreamingToaster. We believe in innovation - ONE experience can change a person's life. We believe in partnerships - ONE endeavor can establish lasting trust & mutual success. We believe in education - ONE training course can empower a developer for life. We believe in giving back - ONE open-source project can inspire future entrepreneur. ONE person can become the leader that starts a revolution. ONE company can change the world and make it a better place - join us.

6 Responses to “Coding Quickie – display a message while your GWT app loads”

  1. Søren Vrist Says:
    December 29th, 2007 at 9:55 am

    I know this is easy to visualize in your mind, but maybe an example might be nice?

  2. Nazmul Idris Says:
    December 29th, 2007 at 7:30 pm

    Click on this link to see an example. When you click on the link, your browser will complain that the SSL certificate is not trusted (since it’s self signed)… just click Ok and continue to load the page.

    We have examples of GWT apps in action in our GWT tutorials.

  3. Søren Vrist Says:
    December 30th, 2007 at 6:13 am

    Very nice! Thanks.

    (btw. you included the ending dot so the link isn’t usable “as-is”. This works: https://screamingtoaster.com/StringReverser/StringReverser.html )

  4. Nazmul Idris Says:
    December 30th, 2007 at 1:22 pm

    Glad you liked the example Søren. You are most welcome.

    Thanks for the fix to the URL :) .

    Seasons Greetings and Happy New Year :)

  5. Jens Göring Says:
    March 22nd, 2008 at 2:08 pm

    Nice tutorial!

    One little typo: The upper code example uses “Loading-Message”, the lower one uses “Loading-Panel”.

  6. Masud Idris Says:
    March 24th, 2008 at 11:30 am

    Hi Jens,

    Thanks for the good catch :) The typo has been fixed.

Leave a Reply