Quantcast
Channel: Jeff Douglas - Technology, Coding and Bears... OH MY! » GWT
Viewing all articles
Browse latest Browse all 10

GWT UiBinder – Passing Objects to Widgets

0
0

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



Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images