Anatomy of GWT

When we first started developing widgets using GWT Google web toolkit, we always set out from some kind of build tool, in my case I am using Google web development plugin for Eclipse, you can choose ‘Generate GWT project sample code’, that is fine until one day I would like to add more widgets to this project, or port widgets between different projects, different languages like php and asp.net.

I also did some research on the anatomy of GWT on the web, most of them are quite out dated, besides they did not answer very well my questions like:

How can I build a widget with finer gained control?
How can I build a widget step by step without any help from the plugin?
How can I organize the source code, so that the end product is generated in a way I expect it to be?
What is absolute minimum that is needed to build a widget?
How can I port the widget into web project developed in other languages?

Here is a recap of building a GWT control step by step in a fat free way, we still need Google plugin for Eclipse as the only difference is we are going to build the widget without starting from sample code, and it is based on the latest version 2.0 of GWT SDK, be aware of strange names for various objects, they were done in purpose to explain which string is pulling which part of end product.

Step 1:

File-New-Web Application Project, tick ‘Use Google Web Toolkit’ and deselect ‘Generate sample code’.

gwt_create_project

GWT Create Project

All we have got is the backbone of a java web project stub, with class path set to GWT SDK. Wait a minute, all I want is a widget, a javascript control, why I am getting a full blown web project with war/WEB-INF etc etc? The server set up is only for the convenience of development and testing, the end result which is a javascript control can be taken out of the project and ported into any web projects that support javascript. Except the folder structure from this bare project, we have nothing. That is great.

Step 2:

Anatomy 1: a GWT widget is a module.

New-Other-Google Web Toolkit- Module

GWT Create Module

GWT Create Module

Inherited modules can decide which name spaces you want to import into your widget, com.google.gwt.user.User is where all UI components like button, label are defined. let us accept the default.

Do not use default package, a new ‘client’ child package path is created, it is not necessary so, but as most of the time GWT widget could be an ajax widget and some server side service is need and that service happened to be in the same source code project, then the server service code can be put under ‘server’ child package , it is just recommended way to organize source code, does not mean that they must be wired like this, and how does the project know how to put them together? That is all glued through module file TestProjectModule.gwt.xml

It is under root package : mypackage.testproject and content is:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.0.0/distro-source/core/src/gwt-module.dtd">
<module>
	<inherits name="com.google.gwt.user.User" />
	<source path="client"/>
</module>

This does not need any more explaination.

Step 3:

Anatomy 2: one module must have an ‘Entry Point Class’ unless it is a module that does not have any UI, but to be imported as library by other modules .

New-Other-Google Web Toolkit- Entry Point Class

GWT Create Entry Point Class

GWT Create Entry Point Class

Understandable the class is placed under ‘client’ package and a new line is added into module xml

<entry-point
 class="mypackage.testproject.client.TestProjectModuleEntryPoint" />

onModuleLoad is the method where we start to construct the widget.Here I present an example of ‘Hello World’, all widget has got is a button and a label, when button is clicked then label will show ‘Hello World’ and the time.

package mypackage.testproject.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class TestProjectModuleEntryPoint implements EntryPoint {

	private VerticalPanel mainPanel = new VerticalPanel();

	private Button theButton = new Button("ClickMe");
	private Label messageLabel = new Label();
	
	@Override
	public void onModuleLoad() {
		// TODO Auto-generated method stub
		
		
		 // Assemble Main panel.
	    mainPanel.add(theButton);
	    mainPanel.add(messageLabel);
	    

		// Associate the Main panel with the HTML host page.
	    RootPanel.get("testprojectmodulediv").add(mainPanel);

	    // Listen for mouse events on the Add button.
	    theButton.addClickHandler(new ClickHandler() {
	      public void onClick(ClickEvent event) {
	        messageLabel.setText("Hello World,"
	        		+ DateTimeFormat.getMediumDateTimeFormat().format(new Date()));
	      }
	    });


	    
	}

}

‘testprojectmodulediv’ is the id of the div on the host html page where the widget is injected.

Basically that is all we need, if you compile you will get all these packed up into javascript and ready to be deployed to any web project.

Right click TestProject-Google-GWT Compile

GWT Compile

So end widget is at war there is a folder mypackage.testproject.TestProjectModule. this folder and its contents is ready to use by any web project. And can be embedded in any web pages.

As to a get good handle of how to use this javascript control, you can ask eclipse to create a host html page of this widget.

Step 4(optional):

Anatomy 3: a host page to actually use the widget just created

New-Other-Google Web Toolkit-HTML page

GWT Create Html Host Page

GWT Create Html Host Page

Under war, within testprojectmodulehostpage.html

There is a line

<script type="text/javascript" language="javascript" src="mypackage.testproject.TestProjectModule/
mypackage.testproject.TestProjectModule.nocache.js">
</script>

is where the javascript to be loaded, and an iframe was created to solve the browser history issue of the widget.

When you run the project as ‘Web application’

You will get

GWT Hello World

GWT Hello World

Whole html page is like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>testprojectmodulehostpage</title>
    <script type="text/javascript" language="javascript" src="mypackage.testproject.TestProjectModule/mypackage.testproject.TestProjectModule.nocache.js"></script>
  </head>

  <body>
  	<div id="testprojectmodulediv"></div>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
	<div></div>
  </body>
</html>

A few other points:

1. Multiple modules

If you want the same project to manage another widget, you just need to add another module , and go through the same process again,

2. Rename-to

If you do not like the full name space path mypackage.testproject.TestProjectModule being compiled into the widget, you can use rename-to in the module file to shorten the name and folder of widgets, for example, if you have a module

<module rename-to=”TestProjectModuleRenamed”>
...
</module>

Then the compiled widget will be at war/ TestProjectModuleRenamed and the main js file will be TestProjectModuleRenamed. nocache.js

Coming up there will be another blog about how to build an ajax widget with server service step by step.

Tags:

This entry was posted on Wednesday, July 27th, 2011 at 2:46 am and is filed under Java, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Anatomy of GWT”

  1. Chacidy says:

    Home run! Great sluggnig with that answer!

Leave a Reply

*