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> |
Related posts:
- GWT UiBinder – Passing Objects to Widgets
- UiBinder with SuggestBox & MultiWordSuggestOracle
- GWT UiBinder Hello World Tutorial
- Passing Parameters with a CommandButton
- Passing Parameters with a CommandLink
Categories: 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