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:
<HTML>
<HEAD>
<TITLE>HTML for WebApp</TITLE>
<!-- You need this to reference your GWT module -->
<META name='gwt:module' content='com.juixe.gwt.WebApp'>
<SCRIPT language="javascript" src="gwt.js">
</SCRIPT>
<STYLE></STYLE>
</HEAD>
<BODY>
<H1>My WebApp</H1>
Any text or HTML goes here.
<DIV id="changeOnRollOver"></DIV>
</BODY>
</HTML>
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 WebApp.java file under webapp > src > com.juixe.gwt.client. Here is the code for WebApp.java:
/**
* 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
RootPanel.get(\"changeOnRollOver\").add(roller);
// 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. The first thing I do in the onModuleLoad is create a GWT Label widget called roller. There are a lot of widgets such as labels, buttons, check boxes, tab panels, menu bars, trees, and a whole slough of other widgets. After I instantiated a Label associates the roller Label I just created to my DIV identified as changeOnRollOver in my HTML file. You can associate any GWT widget to any HTML element using code similar to the following:
RootPanel.get(elementNameStr).add(gwtWidgetObject);
The last thing to go over is how to wire functions to widget events. In the above code, I register a MouseListener to it via it’s addMouseListener method. For this example I am not interested in all the mouse listener methods but I still need to implement them. I am only interested in the onMouseEnter and onMouseLeave events. For this events I will just change the text of the roller Label to indicate if I am entering the element or leaving it.
Here is a suggestion to the GWT team: Add a MouseAdapter to the API, please!!!
I can run and debug this code from Eclipse or I could compile it using the WebApp-compile batch file to create the JavaScript and HTML files required to test this in my favorite browser. The WebApp-compile batch file will create a www folder under my webapp project (you might need to refresh you project in Eclipse).
This a somewhat trivial example but if I wanted to do the same thing in notepad using just HTML and JavaScript this is how it would look:
<HTML>
<HEAD>
<TITLE>HTML for WebApp</TITLE>
<STYLE></STYLE>
</HEAD>
<BODY>
<H1>My WebApp</H1>
Any text or HTML goes here.
<DIV
onmouseover=\"this.innerHTML='entered'\"
onmouseout=\"this.innerHTML = 'left'\">
</DIV>
</BODY>
</HTML>