You May Like

Subscribe to RSS through Email:

Enter your email address:

RSS Subscription

Google Web Toolkit Tutorial: The Break Down Print E-mail
Tag it:


  Google Web Toolkit Tutorial: The Break Down - By juixe

There was a lot of buzz at JavaOne regarding the Google Web Toolkit (GWT). Basically, GWT allows a developer to write a AJAX powered web application in Java!! The Java code gets ‘compiled’ to a set of plain old text files containing your JavaScript code. For example, the GWT will translate your rollover actions written in Java to JavaScript functions. This confused me for a second so I’ll stress again that you compile your web application written in Java to plain old JavaScript and HTML that can run in any browser.

What this means is that if you are a Java developer you don’t have to learn JavaScript and all the idiosyncrasies of every browser to develop a stable and reliable AJAX web application.


To get started download the GWT from Google, configure it with Eclipse, and create a new web application.

I created and imported into Eclipse a project called WebApp. In my Package Explorer under webapp > src > com.juixe.gwt I have a public directory that contains my WebApp.html. This file was created by the applicationCreator batch file provided with the GWT. For the purpose of this walk through I modified my WebApp.html as follows:


<!-- You need this to reference your GWT module -->
<META name='gwt:module' content='com.juixe.gwt.WebApp'>

<SCRIPT language="javascript" src="gwt.js">


<H1>My WebApp</H1>

Any text or HTML goes here.

<DIV id="changeOnRollOver"></DIV>


The HTML is simple to describe itself. I have a body that can contain any HTML. I can use CSS style sheets. The only tag that seems out of place it he meta tag.

<meta name='gwt:module' content='com.juixe.gwt.WebApp'>

What I would like to do at this time is write some some GWT based Java code to modify the text inside this DIV identified as changeOnRollOver. To do this I had to modify file under webapp > src > com.juixe.gwt.client. Here is the code for

* Entry point classes define onModuleLoad().
public class WebApp implements EntryPoint {

* This is the entry point method.
public void onModuleLoad() {

// Create Label widget
final Label roller = new Label(\"Default value\");

// Associate HTML element to GWT widget

// Add mouse lister to label widget
roller.addMouseListener(new MouseListener() {
public void onMouseEnter(Widget sender) {
roller.setText(\"Entered element...\");

public void onMouseLeave(Widget sender) {
roller.setText(\"Leaving element...\");

// Do nothing
public void onMouseDown(Widget sender, int x, int y) {}

// Do nothing
public void onMouseMove(Widget sender, int x, int y) {}

// Do nothing
public void onMouseUp(Widget sender, int x, int y) {}

Let me break this code down. This WebApp class needs to implement the onModuleLoad method of the EntryPoint interface. This is called when you page loads. I think of this method as the equivalent to the JavaScript onload event handler.



  No Comments.

Next >

Who's Online

Subscribe To

 Subscribe in RSS

Follow me...

Top 10 Most Downloaded

HTML5 Games for Phone & Tablet

Job Vacancies