Giant Flying Saucer

With the recent release of GWT 2.0 there was a lot of newly added functionality. In particular today I’m going to focus on UiBinder. From the GWT website they explain UiBinder as: “With UiBinder, GWT now allows you to create user interfaces declaratively in XML instead of having to assemble them programmatically”.

Today we will work through a simple UiBinder application.

If you take a look at the included Mail App source code that ships with the GWT 2.0 SDK you will see its been updated to use UiBinder. You can find this sample code in the plugins directory where you installed Eclipse (assuming you have the GWT plugin installed in Eclipse):

(your Eclipse plugin folder)\com.google.gwt.eclipse.sdkbundle.2.0.3_2.0.3.v201002191036\gwt-2.0.3\samples\Mail

To work through this code you will need the following installed and configured:
1. Java JDK
2. Eclipse 3.5 (Eclipse IDE for Java EE Developers) with the latest Google Web Toolkit (GWT) 2.0 plugin

Assuming all of that is installed and working correctly we can start.

Open up Eclipse and create a new GWT Project called: PlayingWithUiBinder

As you can see I left out App Engine support and picked the latest GWT SDK installed (as of the date of this article).

You should now have a new GWT project created.

Right click on the “com.myproject.client” folder and select: New -> Other -> Google Web toolkit -> UiBinder Now, add the new UiBinder file and name it: SampleBinderWidget

The default generated code will be similar to this:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>
		.important {
			font-weight: bold;
		}
	</ui:style>
	<g:HTMLPanel>
		Hello,
		<g:Button styleName="{style.important}" ui:field="button" />
	</g:HTMLPanel>
</ui:UiBinder>

Lets run this code just as it is right now. First, we need to modify a few files before we run it. Open up the “PlayingWithUiBinder.html” file and remove the following code:

<h1>Web Application Starter Project</h1>

<table align="center">
  <tr>
	<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
  </tr>
  <tr>
	<td id="nameFieldContainer"></td>
	<td id="sendButtonContainer"></td>
  </tr>
  <tr>
	<td colspan="2" style="color:red;" id="errorLabelContainer"></td>
  </tr>
</table>

Now go into the “PlayingWithUiBinder.java” file and remove all the code in the “onModuleLoad” method and replace it with this:

public void onModuleLoad()
{
	SampleBinderWidget sbw = new SampleBinderWidget("Chad");
	RootPanel.get().add(sbw);
}

In the “SampleBinderWidget” file modify it to the following:

package com.myproject.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class SampleBinderWidget extends Composite {

	private static SampleBinderWidgetUiBinder uiBinder = GWT
			.create(SampleBinderWidgetUiBinder.class);

	interface SampleBinderWidgetUiBinder extends
			UiBinder<Widget, SampleBinderWidget> {
	}

	@UiField
	Button button;
	String firstName = "undefined";

	public SampleBinderWidget(String firstName) {
		initWidget(uiBinder.createAndBindUi(this));
		button.setText(firstName);
		this.firstName = firstName;
	}

	@UiHandler("button")
	void onClick(ClickEvent e) {
		Window.alert("Hello: " + this.firstName);
	}
}

Go ahead and save those changes to the files and compile the project just to make sure everything is alright. Once that is done you can run the project.

One small note: You can run GWT apps on any major browser but I think you will find that debugging them on Google’s Chrome browser is easier and quicker especially with tools like Speed Tracer.

Lets modify the UI a bit and see what happens.

First change the “SampleBinderWidget.ui.xml” file:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>
		.important {
			font-weight: bold;
		}
	</ui:style>
	<g:HTMLPanel>
		Hello,
		<g:Button styleName="{style.important}" ui:field="button" />
		<g:Image ui:field="image" />
	</g:HTMLPanel>
</ui:UiBinder>

Second, modify the “SampleBinderWidget.java” file to:

package com.myproject.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Widget;

public class SampleBinderWidget extends Composite {

	private static SampleBinderWidgetUiBinder uiBinder = GWT
			.create(SampleBinderWidgetUiBinder.class);

	interface SampleBinderWidgetUiBinder extends
			UiBinder<Widget, SampleBinderWidget> {
	}

	@UiField
	Button button;
	@UiField
	Image image;
	String firstName = "undefined";

	public SampleBinderWidget(String firstName) {
		initWidget(uiBinder.createAndBindUi(this));
		button.setText(firstName);
		this.firstName = firstName;
	}

	@UiHandler("button")
	void onClick(ClickEvent e) {
		Window.alert("Hello: " + this.firstName);
		image.setUrl("http://www.google.com/intl/en_ALL/images/logo.gif");
	}
}

Run the new project:

Ok, so its nothing spectacular. We simply display the Google image once the alert is dismissed but it does show you how quickly we can change the UI of the page in a couple lines of code.

You probably noticed though that the image appeared above the greeting and button. We can fix this by using a panel. You can use any panel that supports the HasWidgets interface and in this case we’ll use the VerticalPanel. Modify your “SampleBinderWidget.ui.xml” code like this:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>
		.important {
			font-weight: bold;
		}
	</ui:style>
	<g:VerticalPanel>
		<g:HTML>Hello, </g:HTML>
		<g:Button styleName="{style.important}" ui:field="button" />
		<g:Image ui:field="image" />
	</g:VerticalPanel>
</ui:UiBinder>

Did you notice I had to wrap the g:HTML tags around the text? You need to do this with any text or HTML elements – at least for now. Future GWT release might not require this but for now you need to keep this in mind. Now the layout is better, the image is below but our greeting and button got dropped below each other. Lets fix this with another panel, the HorizontalPanel.

Modify the code to this:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>
		.important {
			font-weight: bold;
		}
	</ui:style>
	<g:VerticalPanel>
		<g:HorizontalPanel>
			<g:HTML>Hello, </g:HTML>
			<g:Button styleName="{style.important}" ui:field="button" />
		</g:HorizontalPanel>
		<g:Image ui:field="image" />
	</g:VerticalPanel>
</ui:UiBinder>

Run the project again and you should see the correct layout now.

Hopefully this has helped you get started with the new UiBinder in GWT 2.0.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• share via Reddit
• Share with Stumblers
• Tweet about it
• Subscribe to the comments on this post

This entry was posted on Friday, March 5th, 2010 at 11:47 am and is filed under GWT, 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.