GWT UiBinder – Passing Parameters to Widgets

February 5th, 2010

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>


  • Share/Bookmark

Related posts:

  1. GWT UiBinder – Passing Objects to Widgets
  2. UiBinder with SuggestBox & MultiWordSuggestOracle
  3. GWT UiBinder Hello World Tutorial
  4. Passing Parameters with a CommandButton
  5. Passing Parameters with a CommandLink

Categories: GWT

Leave a comment

Comments Feed6 Comments

  1. GWT UiBinder – Passing Objects to Widgets | Jeff Douglas – Technology, Coding and Bears… OH MY! February 24th, 2010

    [...] 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 [...]

  2. Craig March 15th, 2010

    Is is possible to pass in parameters that are not Strings ?

    Thanks

    Craig

  3. Jeff Douglas March 15th, 2010

    Yes! See GWT UiBinder – Passing Objects to Widgets.

  4. Uri March 16th, 2010

    Jeff,

    In my case I have two files, Login.java/ui.xml and TopPanel.java/ui.xml — after Login I need to pass the value of the logged in user to TopPanel. I don’t understand how I can communicate between these two files using GWT. In TopPanel.java I have

    public void setLoggedInUser(String username) {
    myField.setValue(username);
    }

    In TopPanel.ui.xml I have

    Welcome back,

    So now in Login.Java how would I pass the value of the logged in user to the Label ‘myField’? I tried to use in Login.java so I could do @UiField TopPanel res and then res.setLoggedInUser but while that fired into the method correctly it did not update the text. I also tried to create a new instance of TopPanel but that didn’t work either.

    Any ideas?

    Thanks,
    Uri

  5. Uri March 16th, 2010

    Meant to write: In TopPanel.ui.xml I have

    <div>
    <b>Welcome back, >g:Label ui:field=”myField”/></b>
    </div>

  6. Uri March 16th, 2010

    Nevermind :) I solved the whole thing using Events. Probably is a cleaner approach for the GWT.

    Uri

Leave a comment

Feed

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