GWT UiBinder – Passing Objects to Widgets

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

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

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

```html <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> ```

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

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

<!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

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;
 }

}