TurboManage

David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler


    Web app developer since 1994 and former Developer Advocate with Google now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 241 other followers

  • Sleepless Nights…

    October 2009
    S M T W T F S
    « Sep   Nov »
     123
    45678910
    11121314151617
    18192021222324
    25262728293031
  • Blog Stats

    • 857,849 hits

How to create a splash screen while GWT loads

Posted by David Chandler on October 13, 2009

GWT apps can take a while to present the initial view, so we’ll create a splash screen to create the appearance of progress while the app loads. This concept works with any Web framework, but we’ll apply it specifically to GWT.

The basic idea is to create a splash DIV in the HTML page that hosts the GWT app, then make that DIV invisible once the GWT app is loaded.

First, we need our splash DIV. For the graphic, I’m using an animated GIF generated using the handy site in my previous post. Simply add a DIV in your index.html page that hosts the GWT app:

		<div id="loading">
			Loading<BR/>
			<img src="../images/splash.gif" />
		</div>

Put a corresponding snippet in your CSS file to center the DIV on the page. This is easily done with absolute positioning and a negative margin. If your splash image is 200 pixels wide, use a left margin of -100 to center it horizontally.

#loading {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	margin-left: -100px;
}

Now all we have to do is remove the splash DIV once GWT has finished loading. All you need is one line in your GWT EntryPoint class at the end of onModuleLoad():

	public void onModuleLoad()
	{
		...
		DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("loading"));
	}

For good measure, you may also want to hide the DIV containing GWT while it loads. This can be done with a couple additional lines:

		// Set GWT container invisible
		DOM.setStyleAttribute(RootPanel.get("gwt-container").getElement(), "display", "none");

		// Load the app--this example uses gwt-presenter
		appPresenter.go(RootPanel.get("gwt-container"));

		DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("loading"));

		// Set GWT container visible
		DOM.setStyleAttribute(RootPanel.get("gwt-container").getElement(), "display", "block");

Tomorrow: how to create a “working…” pop-up within GWT while gwt-presenter is waiting for service callbacks, etc.

Advertisements

14 Responses to “How to create a splash screen while GWT loads”

  1. Raney said

    Hello David,

    I found this suggestion for a gwt splash in my travels.

    It is just what I would like, simple just a little something.

    I am trying to use a generic rotating image for the display.

    Loading Application…
    <IMG SRC = "/Include/Image.Loading.gif"

    The image displays and then stops rotating until the scripts load and the onModuleLoad is actually called.

    Am I missing something?

    Thanks,

    Raney

  2. Eduardo said

    Yeah same issue here, animated gif stops while script is loading. Any suggestion?

    • I often see the animation stop, too. It likely means the browser is too busy loading JS to spin the image. It usually works better for me in production mode than dev mode because there’s not as much setup overhead.

      • same for me, the gif animates up to a point, and then it hangs. JS is single threaded, after all, could it be that in chrome, for example, the browser only allocates processing time for actions such as spinning a gif when the “main” thread gets freed up from loading the main module js?

  3. Raney said

    Hello David,

    Not yet.
    I have seen a couple of ideas creating a Button or Dialog with script, just does not make any sense.

    I will keep trying, I would like to make it simple before I try to get fancy.

    I have found many of your examples very helpful.
    Most of the documentation on Google is not very helpful, just says things like a gaget is a gaget.

    I will keep you informed.

    Have a good day,

    Raney

  4. Helen said

    Hi David,

    This is just what I need, and it works like a dream in IE.

    However, it seems that Firefox doesn’t play so nicely, and does not show the HTML page until the GWT app has loaded. Is this an issue that you’ve come across?

    Thanks,

    Helen

    • Thanks, Helen. One suggestion I’ve seen is to move the script src=”…nocache.js” tag to the bottom of the page, just before the closing body tag.

      • Helen said

        Thanks very much David, this has certainly improved the situation. I am now able to see the loading div, although not always. Sometimes, it remains unshown. This is now clearly a caching issue and it’s a tricky one!

  5. shreyas said

    This is good stuff. Thanks David!

  6. Joshua said

    Thanks – great post!

  7. Thaks – just that I search

  8. David said

    FYI, The CSS for centering the div is missing a `margin-top: -100px` (if the picture is 200px high) in order to center it vertically as well as horizontally

  9. Faissal Graviton said

    Hi,

    Where do you put the GIF file ?

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: