David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor 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 224 other followers
  • Sleepless Nights…

    October 2009
    S M T W T F S
  • Blog Stats

    • 1,037,075 hits

Archive for October 13th, 2009

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">
			<img src="../images/splash.gif" />

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

		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.

Posted in Google Web Toolkit | 14 Comments »

%d bloggers like this: