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> |
Categories: Code Sample, GWT













[...] 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 [...]
Is is possible to pass in parameters that are not Strings ?
Thanks
Craig
Yes! See GWT UiBinder – Passing Objects to Widgets.
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
Meant to write: In TopPanel.ui.xml I have
<div>
<b>Welcome back, >g:Label ui:field=”myField”/></b>
</div>
Nevermind
I solved the whole thing using Events. Probably is a cleaner approach for the GWT.
Uri
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.
Why did you add the key word ‘provided=true’ in the line @UiField(provided=true) ? You didn’t add that in other locations.
[...] 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 [...]
I am getting javas-cript error on my browser….. when try this example
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
how can we change the color of a textbox in runtime…By using css i cant change it…
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.
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)
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?
Very good article.