Google Web Toolkit UiBinder Tutorial

January 20, 2010 Jeff Douglas

Jeff Douglas

I’ve been working on a new project the past couple of weeks that (fortunately) requires Google Web Toolkit (GWT) and I wanted to use the new UiBinder that was released with GWT 2.0 in early December for a number of reasons (clean separation of UI and code, easier collaboration with designers, easier testing, etc ). However, I was having a hard time getting my head wrapped around it given that the GWT site has very little documentation and only a few examples. I’ve combed through the message boards, the docs and the sample Mail application that comes with the SDK and after finally groking the new functionality, I put together a little Hello World app, the kind that would have helped me out originally.

So I’m making some assumptions that you already have the GWT SDK and Eclipse Plugin installed and are familiar with both of them. If you are not, take a look at the GWT site for more info.

To get started, create a new Web Application Project called “HelloUiBinder” in the package of your choice but do not check “Use Google App Engine”.

Now create a new UiBinder template and owner class (File -> New -> UiBinder). Choose the client package for the project and then name it MyBinderWidget. Leave all of the other defaults. When you click Finish the plugin will create a new UiBinder template and owner class.

Open the MyBinderWidget.ui.xml template and add the following code. With GWT you can define your styles either in your template where you need them or externally. I’ve added a small style inline that adds some pizzaz to the label. Notice the field name myPanelContent in the template. You can programmatically read and write to this field from the template’s owner class. So when the owner class runs, it construct a new VerticalPanel, does something with it (probably add some type of content) and then fill this field with it.

Attributes for the elements (the text attribute in the Label element for example) correspond to a setter method for the widget. Unfortunately there is no code completion to get a list of these attributes in Eclipse when you hit the space bar so you either have to know the setters or refer to the JavaDocs each time. A painful process.








For the owner class, MyBinderWidget.java, add the following code. In this class, a field with the same name, myPanelContent, is marked with the @UiField annotation. When uiBinder.createAndBindUi(this) is run, the content is created for the VerticalPanel and the template field is filled with the new instance.


package com.jeffdouglas.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

public class MyBinderWidget extends Composite {

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

interface MyBinderWidgetUiBinder extends UiBinder { }

@UiField VerticalPanel myPanelContent;

public MyBinderWidget() {
initWidget(uiBinder.createAndBindUi(this));

HTML html1 = new HTML();
html1.setHTML("Click me!");
myPanelContent.add(html1);
HTML html2 = new HTML();
html2.setHTML("This is my sample content!");
myPanelContent.add(html2);

}

}
,>

Now change the entry point class to look like the following.


package com.jeffdouglas.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloUiBinder implements EntryPoint {

public void onModuleLoad() {
MyBinderWidget w = new MyBinderWidget();
RootPanel.get().add(w);
}
}

Now open HelloUiBinder.html and remove all of the HTML content between the and

Previous Article
Displaying Currencies In a SFDC Formula Field or Visualforce
Displaying Currencies In a SFDC Formula Field or Visualforce

Glenn Weinstein I wanted to put a Formula field on the PSE Project detail page to show a red or green flag ...

Next Article
Upcoming Salesforce.com Spring ‘10 Features

Jeff Douglas For those that don’t have time to weed through all 171 pages of the Spring ‘10 Release Notes, ...