How to create a splash screen while GWT loads

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.