GWT Application Tutorial

This tutorial demonstrates the simplicity in using Google Web Toolkit (GWT) with WoOF to create Rich Internet Applications (RIA).

The example used in this tutorial is the following simple page to show the seconds since the page load.

GwtApp screenshot.

Download Tutorial Source

Template.woof.html

The below is the HTML of the page.

<html>
	<body>
		<p>Page was loaded the following seconds ago:</p>
		
		<center><big>  <p id="timer"></p>  </big></center>
		
	</body>
</html>

Notice that the template only has the single GWT hook (id="timer"). The other GWT aspects are not present (such as the <script> tag to include the GWT JavaScript). This is because WoOF will automatically add these GWT aspects on rendering the page so that only the necessary id="xxx" hooks are required.

EntryPoint Class

Before discussing the Java code for GWT compilation, a very quick summary of the relevant GWT capabilities is provided below. Please see the GWT Overview for more in depth documentation of GWT.

  • GWT compiles Java code into JavaScript
  • The EntryPoint.onModuleLoad() method provides the starting point for running the functionality within the web page
  • RootPanel.get("xxx") is a static method providing the means to obtain the panel within the HTML identified by an id attribute. In this tutorial's case <p id="timer">
  • GWT generated JavaScript will dynamically add the necessary HTML for displaying the components

The following is the GWT Java code for this tutorial that indicates the time in seconds since page load:

public class GwtAppEntryPoint implements EntryPoint {

	@Override
	public void onModuleLoad() {

		// Provide the time label
		RootPanel panel = RootPanel.get("timer");
		final Label label = new Label("0");
		panel.add(label);

		// Increment time each second
		Timer timer = new Timer() {
			@Override
			public void run() {
				long time = Long.parseLong(label.getText());
				time++;
				label.setText(String.valueOf(time));
			}
		};
		timer.scheduleRepeating(1000);
	}

}

The code provides the time in seconds since page load by:

  1. Obtaining the <p id="timer"> HTML element
  2. Adding a label to the contents of the <p> element to indicate the number of seconds since page load
  3. Starting a timer that triggers each second to increment the number displayed by the label (indicating the number of seconds since loading the page)

application.woof

Normally with GWT applications a Module.gwt.xml configuration file is required to be written. The file indicates to GWT how to compile and create the JavaScript for the web page.

WoOF makes the GWT integration simpler by generating the configuration file for you. All that is necessary to provide GWT functionality onto the page is specifying the EntryPoint class when adding the template. The following demonstrates the GWT configuration for this tutorial.

GwtApp Add template dialog screenshot.

On creating the template, WoOF will automatically generate the Module.gwt.xml file for GWT compilation. The file may be changed to provide further GWT functionality, however changes to the following attributes will be overwritten by WoOF in managing the GWT functionality.

  • rename-to attribute
  • entry-point class attribute

Compiling GWT with Maven

To use GWT to compile the Java to JavaScript add the following to your pom.xml.

			<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>gwt-maven-plugin</artifactId>
				<executions>
					<execution>
						<goals>
							<goal>compile</goal>
						</goals>
					</execution>
				</executions>
			</plugin>

To also make the GWT Java classes available for coding against add the following GWT dependency (with appropriate version).

		<dependency>
			<groupId>com.google.gwt</groupId>
			<artifactId>gwt-user</artifactId>
		</dependency>

Next

The next tutorial looks at GWT RPC (AJAX).