GWT UiBinder – Passing Objects to Widgets

February 24th, 2010

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


Categories: Code Sample, GWT

Leave a comment

Comments Feed4 Comments

  1. Sandy April 14th, 2010

    Hi Jeff,

    This is very good tutorial for passing objects to widgets.
    Will it be same in case the SomeWidget is written in old GWT version like 1.4 or 1.5.3 and then you try to import it in UIBinder. Is does not have SomeWidget.ui.xml. And also the SomeObject which is passed to constructor is also some Widget and not a POJO.

    Can I guide me to a tutorial that does something smillar I mentioned above.

    -Thanks

  2. Jeff Douglas April 14th, 2010

    Try the GWT Sushi site as they might have something.

  3. Sandy April 16th, 2010

    Hi Jeff,

    Thanks for you help, will look in there.

    -Thanks

  4. Re: How to share data ? May 26th, 2010

    [...] LinkedIn [...]

Leave a comment

Feed

http://blog.jeffdouglas.com / GWT UiBinder – Passing Objects to Widgets

WordPress Appliance - Powered by TurnKey Linux