A couple of weeks ago I wrote a GWT 2.0 tutorial for passing simple values to a widget and this is the (promised) follow up on how to pass an object to a widget. For more info on working with the new UiBinder, see Declarative Layout with UiBinder at the GWT site.

The Entry Point class is fairly simple; it creates a new MyPanel object and adds it to the RootPanel.

MyEntryPoint.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package com.jeffdouglas.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
 
public class MyEntryPoint implements EntryPoint {
 
  @Override
  public void onModuleLoad() {
    MyPanel p = new MyPanel();
    RootPanel.get().add(p);
  }
 
}

In the constructor, the MyPanel owner class creates a new SomeObject object with some text and then initializes the widget. The @UiFactory annotation is how you provide arguments for the constructor of the SomeWidget widget. The UiBinder template simply sets up the name space and adds the widget to the HTMLPanel.

MyPanel.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

package com.jeffdouglas.client;
 
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiFactory;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
 
public class MyPanel extends Composite {
 
  private static MyPanelUiBinder uiBinder = GWT.create(MyPanelUiBinder.class);
 
  interface MyPanelUiBinder extends UiBinder<widget, MyPanel> {
  }
 
  private SomeObject someObject;
 
  public MyPanel() {
    this.someObject = new SomeObject("My object text");
    initWidget(uiBinder.createAndBindUi(this));
  }
 
  // Add a UI Factory method for the sub-widget & pass object
  @UiFactory
  SomeWidget makeSomeWidget() {
    return new SomeWidget(someObject);
  }
 
}

MyPanel.ui.xml

1
2
3
4
5
6
7
8

<!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"
	xmlns:c="urn:import:com.jeffdouglas.client">
	<g:HTMLPanel>
	   <c:SomeWidget/>
	</g:HTMLPanel>
</ui:UiBinder>

The SomeWidget class is pretty simple also. The constructor accepts SomeObject, sets it to the class member, initializes the widget and then sets the text of the displayText UiField to the name value in the SomeObject.

SomeWidget.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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.Label;
import com.google.gwt.user.client.ui.Widget;
 
public class SomeWidget extends Composite {
 
  private static SomeWidgetUiBinder uiBinder = GWT
          .create(SomeWidgetUiBinder.class);
 
  interface SomeWidgetUiBinder extends UiBinder<widget, SomeWidget> {
  }
 
  private SomeObject someObject;
 
  @UiField Label displayText;
 
  public SomeWidget(SomeObject so) {
    this.someObject = so;
    initWidget(uiBinder.createAndBindUi(this));
    displayText.setText(someObject.getName());
  }
 
}

SomeWidget.ui.xml

1
2
3
4
5
6
7

<!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">
    <g:HTMLPanel>
        <g:Label ui:field="displayText"/>
    </g:HTMLPanel>
</ui:UiBinder>

SomeObject.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package com.jeffdouglas.client;
 
public class SomeObject {
 
  private String name;
 
  public SomeObject(String name) {
    this.name = name;
  }
 
  public String getName() {
    return name;
  }
 
  public void setName(String name) {
    this.name = name;
  }
 
}

I’ve been working on a somewhat large and complex GWT project using UiBinder over the past couple of weeks. I’ve built a number of widgets that use the SuggestBox and MultiWordSuggestOracle but I created a new UiBinder, populated the suggestions but they came up blank in the type-ahead. After about a half hour of scratching my head I looked back at some other code and figured it out. There are very few examples of the SuggestBox with UiBinder so I thought this might help someone out.

The UiBinder template (MyWidget.ui.xml) is fairly simple:

1
2
3
4
5
6
7

<!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">
    <g:HTMLPanel>
        <g:SuggestBox ui:field="mySuggestBox"/>
    </g:HTMLPanel>
</ui:UiBinder>

The owner class (MyWidget.java) is where you need to make sure you have things correct. On line #20 you need to ensure you have (provided = true) or your suggestions will not show in the type-ahead. You also need to create your SuggestBox before you initialize the UiBinder;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

package com.jeffdouglas;
 
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.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.Widget;
 
public class MyWidget extends Composite {
 
  private static MyWidgetUiBinder uiBinder = GWT.create(MyWidgetUiBinder.class);
 
  interface MyWidgetUiBinder extends UiBinder<widget, MyWidget> {
  }
 
  private final MultiWordSuggestOracle mySuggestions = new MultiWordSuggestOracle();
 
  @UiField(provided = true) // MAKE SURE YOU HAVE THIS LINE
  SuggestBox mySuggestBox;
 
  public MyWidget() {
    mySuggestBox = new SuggestBox(mySuggestions);
    initWidget(uiBinder.createAndBindUi(this));
    getSuggestions();
  }
 
  private void getSuggestions() {
    // call some service to load the suggestions
    mySuggestions.add("Suggestion #1");
    mySuggestions.add("Suggestion #2");
    mySuggestions.add("Suggestion #3");
  }
 
}

I received a number of emails regarding my last post, GWT UiBinder Hello World Tutorial, specifically how to pass values into widgets using the new GWT 2.0 UiBinder. Here’s a small tutorial on one of the ways in which you could do that. I plan on another tutorial on passing multiple objects using the @UiFactory method.

So here is the Entry Point class. When the module loads, it creates a new MyPanel object, passes the text “Random Text” to the constructor and then adds the panel to the RootPanel.

MyEntryPoint.java

1
2
3
4
5
6
7
8
9
10
11
12
13

package com.jeffdouglas.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
 
public class MyEntryPoint implements EntryPoint {
 
	public void onModuleLoad() {
		MyPanel p = new MyPanel("Random Text");
		RootPanel.get().add(p);
	}
 
}

The MyPanel owner class defines a new constructor that accepts the passed string value (i.e. “Random Text”) and sets the value of hidden field called myField in the UiBinder template to this text.

MyPanel.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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.Hidden;
import com.google.gwt.user.client.ui.Widget;
 
public class MyPanel extends Composite {
 
	private static MyPanelUiBinder uiBinder = GWT.create(MyPanelUiBinder.class);
 
	interface MyPanelUiBinder extends UiBinder<widget, MyPanel> {
	}
 
	@UiField(provided=true)
	Hidden myField;
 
	public MyPanel(String someText) {
		Hidden myField = new Hidden();
		myField.setValue(someText);
		initWidget(uiBinder.createAndBindUi(this));
	}
 
}

When the UiBinder template runs, its owner class loads the value (“Random Text”) into the Hidden field which then passes this same value into the SomeWidget widget.

MyPanel.ui.xml

1
2
3
4
5
6
7
8
9

<!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"
	xmlns:c="urn:import:com.jeffdouglas.client">
	<g:HTMLPanel>
	   <g:Hidden ui:field="myField"/>
	   <c:SomeWidget myField="{myField.getValue}"/>
	</g:HTMLPanel>
</ui:UiBinder>

The SomeWidget owner class is fairly straight forward. There is a setter method for MyField which runs after the constructor, receives the text (“Random Text”) and writes it to the displayText field in the UiBinder template.

SomeWidget.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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.Label;
import com.google.gwt.user.client.ui.Widget;
 
public class SomeWidget extends Composite {
 
	private static SomeWidgetUiBinder uiBinder = GWT
			.create(SomeWidgetUiBinder.class);
 
	interface SomeWidgetUiBinder extends UiBinder<widget, SomeWidget> {
	}
 
	@UiField Label displayText;
 
	public void setMyField(String t) {
		displayText.setText(t);
	}
 
	public SomeWidget() {
		initWidget(uiBinder.createAndBindUi(this));
	}
 
}

The UiBinder template simply displays the text in an HTMLPanel.

SomeWidget.ui.xml

1
2
3
4
5
6
7

<!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">
	<g:HTMLPanel>
	   <g:Label ui:field="displayText"/>
	</g:HTMLPanel>
</ui:UiBinder>

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.

1
2
3
4
5
6
7
8
9
10
11

<!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>
          .bolder { font-weight:bold; }
     </ui:style>
     <g:HTMLPanel>
          <g:Label styleName="{style.bolder}" text="This is my label in bold!"/>
          <g:VerticalPanel ui:field="myPanelContent" spacing="5"/>
     </g:HTMLPanel>
</ui:UiBinder>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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<widget, MyBinderWidget> { }
 
     @UiField VerticalPanel myPanelContent;
 
     public MyBinderWidget() {
          initWidget(uiBinder.createAndBindUi(this));
 
          HTML html1 = new HTML();
          html1.setHTML("<a href='http://www.google.com'>Click me!</a>");
          myPanelContent.add(html1);
          HTML html2 = new HTML();
          html2.setHTML("This is my sample <b>content</b>!");
          myPanelContent.add(html2);
 
     }
 
}

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

1
2
3
4
5
6
7
8
9
10
11
12

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 </noscript> and and </body> save it. Once you run the application, copy the development URL and run paste it into your favorite supported browser, you should see the following.

Now suppose you wanted to nest a widget inside your MyBinderWidget that did something when a button was clicked. We’ll create a small series of checkboxes that allows the user to select their favorite colors and display them when the button is clicked. Create a new UiBinder called FavoriteColorWidget in the client package. Add the following code to the FavoriteColorWidget.ui.xml template.

1
2
3
4
5
6
7
8
9
10
11

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:VerticalPanel>
      <g:Label ui:field="greeting"/>
      <g:Label>Choose your favorite color(s):</g:Label>
      <g:CheckBox ui:field="red" formValue="red">Red</g:CheckBox>
      <g:CheckBox ui:field="white" formValue="white">White</g:CheckBox>
      <g:CheckBox ui:field="blue" formValue="blue">Blue</g:CheckBox>
      <g:Button ui:field="button">Submit</g:Button>
    </g:VerticalPanel>
</ui:UiBinder>

Now add the click handler in the FavoriteColorWidget.java owner class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

package com.jeffdouglas.client;
 
import java.util.ArrayList;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
 
public class FavoriteColorWidget extends Composite {
 
     private static FavoriteColorWidgetUiBinder uiBinder = GWT
               .create(FavoriteColorWidgetUiBinder.class);
 
     interface FavoriteColorWidgetUiBinder extends
               UiBinder<widget, FavoriteColorWidget> {
     }
 
     @UiField Label greeting;
     @UiField CheckBox red;
     @UiField CheckBox white;
     @UiField CheckBox blue;
     @UiField Button button;
 
     public FavoriteColorWidget() {
          initWidget(uiBinder.createAndBindUi(this));
 
          // add a greeting
          greeting.setText("Hello Jeff!!");
 
          final ArrayList<checkBox> checkboxes = new ArrayList<checkBox>();
          checkboxes.add(red);
          checkboxes.add(white);
          checkboxes.add(blue);
 
         // add a button handler to show the color when clicked
          button.addClickHandler(new ClickHandler() {
               public void onClick(ClickEvent event) {
                    String t = "";
                    for(CheckBox box : checkboxes) {
                         // if the box was checked
                         if (box.getValue()) {
                              t += box.getFormValue() + ", ";
                         }
                    }
                    Window.alert("Your favorite color/colors are: "+ t);
               }
          });
 
     }
 
}

The last thing we’ll need to do is add our new widget to the MyBinderWidget template. Open MyBinderWidget.ui.xml and add the custom namespace reference and the FavoriteColorWidget.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!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"
     xmlns:c="urn:import:com.jeffdouglas.client">
     <ui:style>
          .bolder { font-weight:bold; }
     </ui:style>
     <g:HTMLPanel>
          <g:Label styleName="{style.bolder}" text="This is my label in bold!"/>
          <g:VerticalPanel ui:field="myPanelContent" spacing="5"/>
          <c:FavoriteColorWidget/>
     </g:HTMLPanel>
</ui:UiBinder>

Now when you run the application it should look like the following.

Google released Google Web Toolkit 2.0 (GWT) yesterday with some really cool features and improvements. For those of you not familiar with GWT, it is a development toolkit for building and optimizing complex browser-based applications. You write your front-end code in Java and it is auto-magically compiled into cross browser, optimized JavaScript.

GWT is used by many products at Google, including Google Wave and Google AdWords. It’s open source, completely free, and used by thousands of developers around the world.

The video below does a really nice feature overview but here are some of my bullet points from the video. You can find more detailed info on the new features here.

• Declarative User Interface – gone are the days of programmatically laying out your application in a Swing type manner. Similar to Adobe Flex, the new UiBinder allows you to lay out your user interface in an XML file and then bind that to a Java class that contains applications logic. This is my favorite new feature!
• Speed Tracer – a new tool that helps you analyze the performance of any web page and understand where the various sources of latency are.
• Easier Styling – with the new UiStyle feature you can write CSS styles and bundle them directly in the template. You get the speed benefit of no extra http roundtrip to fetch an external the stylesheet and prevent name conflicts across your application when using widgets.
• Predictable Performance – provide a consistent look and feel with improved layout panels that behave predictably and load quickly.
• Debug in any Browser – no more requirement to use the embedded browser when debugging Java source code. You can now debug in essentially any browser and use development tools for that browser like Firebug in Firefox.
• Faster Load Times – Developer-guided code splitting allows you to chunk your GWT code into multiple fragments for faster startup.
• Improved IDE Support – the new Eclipse plugin provides support for the UiBinder, client bundling, RPC refactoring, wizards to generate boilerplate code and the new development mode.

There are a ton of additional features and you can check them out here. Download GWT today and get started building some kickass apps!

www.youtube.com/watch?v=uExEw3OVMd0

The first milestone build for GWT 2.0 was released a couple of days ago with an announcement on Google Groups. You can download the M1 zip here.

Some of the cool new features in GWT 2.0 include:

• In-Browser Development Mode – now you can develop in your favorite browser instead of using the “hosted browser”.
• Code Splitting – you can split your code into multiple fragments allowing your application to download faster and bootstrap itself with the minimum about of required code.
• Declarative User Interface – use XML to declarativly lay out your UI as opposed to programmatically.
• Bundling of resources (ClientBundle) – build bundles of text, CSS and HTML files for download optimization.
• Using HtmlUnit for running GWT tests – debugging GWT Tests in development mode can now be done entirely in a Java debugger.

I installed Snow Leopard the other day in under 60 minutes without a hitch…. or so I thought.

When trying to run my App Engine project with GWT, I received the following fatal error:

You must use a Java 1.5 runtime to use GWT Hosted Mode on Mac OS X.

I did a search and quickly found the culprit. Snow Leopard installs with the 64bit version of the Java 6 JVM but GWT only runs with 32bit version of Java 5 JVM (as of now).

The good news is that until Google fixes the issue you can downgrade to the 32bit version of the Java 5 JVM. Here are the instructions. Good luck!

GWT Portlets is a free open source web framework for building GWT applications. It defines a very simple & productive programming model to build good looking, modular GWT applications.

The programming model is somewhat similar to writing JSR168 portlets for a portal server (Liferay, JBoss Portal etc.). The “portal” is your application built using the GWT Portlets framework as a library. Application functionality is developed as loosely coupled Portlets each with an optional server side DataProvider.

Project: http://code.google.com/p/gwtportlets/

Demo: http://095-beta.latest.gwtportletdemo.appspot.com/

I caught this off of Iein Valdez’s Twitter feed yesterday:

Adrien Ancelin: ”For all the GWT-Enthusiasts around here, the official GWT repository now includes a preview version of a very promising 2.0 feature : Ui Binder. I wrote a very simple yet efficient example of UiBinder in action and uploaded a 2.0 build, a little login form example and a small article about it.”

Apparently it’s a declarative way to lay out GWT applications using one or more XML files instead of programmatically. This should make my life much easier!

Here’s more info about the Ui Binder example.

A couple of the guys and myself at Appirio are writing a beginning Google App Engine with Java book to be released this fall. We’ve locked down the functionality of the app we are going to be discussing in the book but I would like to put the app out to everyone and get any feedback regarding the user interaction.

You can run the application at: http://book-timeentry.appspot.com

The use case is fairly simple. This is a time card application where users login with their Google credentials and enter time against a project and milestone. The user’s time is persisted to BigTable and can be viewed by selecting the “Current Entries” tab.

Please let me know if you have any issues, recommendation or general feedback on functionality. This is a beginners level book so the app won’t go into too much depth. Any feedback would be greatly appreciated.