GWT UiBinder – Passing Parameters to Widgets | Jeff Douglas - Technology, Coding and Bears... OH MY!

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

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

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

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

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

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

Categories: Code Sample, GWT

16 Comments

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 [...]
Craig March 15th, 2010
Is is possible to pass in parameters that are not Strings ?

Thanks

Craig
Jeff Douglas March 15th, 2010
Yes! See GWT UiBinder – Passing Objects to Widgets.
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
Uri March 16th, 2010
Meant to write: In TopPanel.ui.xml I have

<div>
<b>Welcome back, >g:Label ui:field=”myField”/></b>
</div>
Uri March 16th, 2010
Nevermind I solved the whole thing using Events. Probably is a cleaner approach for the GWT.

Uri
Steve March 24th, 2010
I get an error trying to run this. NullPointerException in line 26 of MyPanel.java. initWidget(uiBinder.createAndBuildUi(this)

I had to change the first line of the MyPanel constructor to be:
myField = new Hidden() to get it to work.
Amjad hussein June 2nd, 2010
Why did you add the key word ‘provided=true’ in the line @UiField(provided=true) ? You didn’t add that in other locations.
GWT UiBinder – Passing Objects to Widgets | Jeff Douglas - Technology, Coding and Bears... OH MY! July 13th, 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 [...]
Tagor December 15th, 2010
I am getting javas-cript error on my browser….. when try this example
Clothar January 17th, 2011
Is there anyway that I can pass a parameter using UIBinder to a builtin Widget such as SplitLayoutPanel ? SplitLayoutPanel has a constructor parameter of splitterSize that can be set when creating the SplitLayoutPanel in java, i.e. new SplitLayoutPanel(5) will create a SplitLayoutPanel with a 5pixel wide splitter bar. Is it possible to do this using only UIBinder annotations ? With out directly calling the constructor in Java.
Maybe there should be constructor parameter type that we can reference in XML , for example etc ……
Thanks
CF
Nikhil March 24th, 2011
how can we change the color of a textbox in runtime…By using css i cant change it…
Peter April 10th, 2011
Hello Jeff,
thanks for your tutorials, it helped me a lot to understand basics of GWT and web development.
What I’d need is to pass an argument to the entry point from the URL. Something like: http://127.0.0.1:8888/GWT1.html?id=55
To know that id is 55. Is it possible?

Thank you.
irene May 17th, 2011
I bumped into the NullPointerException noted above. NP for the fix, but how to debug? Where do I find the source code for MyPanel_MyPanelUiBinderImpl.java:20?

09:19:50.084 [ERROR] [passparamtowidget] Unable to load module entry point class com.jeffdouglas.client.PassParamToWidget (see associated exception for details)

java.lang.NullPointerException: null
at com.jeffdouglas.client.MyPanel_MyPanelUiBinderImpl.createAndBindUi(MyPanel_MyPanelUiBinderImpl.java:20)
at com.jeffdouglas.client.MyPanel_MyPanelUiBinderImpl.createAndBindUi(MyPanel_MyPanelUiBinderImpl.java:1)
at com.jeffdouglas.client.MyPanel.<init>(MyPanel.java:30)
at com.jeffdouglas.client.PassParamToWidget.onModuleLoad(PassParamToWidget.java:11)
Oliver Lundag May 19th, 2011
Hi,
How can I integrate spring+mybatis to ext-gwt framework?

I created a simple project using spring frame work,java and MyBatis persistence.

how can I use ext-gwt to display the result in a browser?
Raghu August 30th, 2011
Very good article.