Well hello there

}}} {{{ public class LogoNamePanel extends Composite { interface MyUiBinder extend UiBinder {} private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class); @UiField SpanElement userNameField; public LogoNamePanel() { initWidget(uiBinder.createAndBindUi(this)); } public void setUserName(String userName) { userNameField.setInnerText(userName); } } public interface Resources extends ClientBundle { @Resource("Style.css") Style style(); @Resource("Logo.jpg") ImageResource logoImage(); public interface Style extends CssResource { String mainBlock(); String nameSpan(); Sprite userPictureSprite(); } } }}} The with element declares a field holding an object whose methods can be called to fill in attribute values. If no public api is provided to set the "with" argument (as in this example), it must be instantiable by GWT.create(). Note that there is no requirement that a ui:with resource implement the ClientBundle interface, this is just an example. =Share resource instances= Extends LogoNamePanel (from the example above) to allow the resource to be passed in. {{{ public class LogoNamePanel extends Composite { interface MyUiBinder extend UiBinder {} private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class); @UiField SpanElement nameSpan; final Resources resources; public LogoNamePanel(Resources resources) { this.resources = resources; initWidget(uiBinder.createAndBindUi(this)); } public void setUserName(String userName) { nameSpan.setInnerText(userName); } @UiFactory /* this method could be static */ public Resources getResources() { return resources; } } }}} This can be even more concise: {{{ public class LogoNamePanel extends Composite { interface MyUiBinder extend UiBinder {} private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class); @UiField SpanElement nameSpan; @UiField(provided = true) final Resources resources; public LogoNamePanel(Resources resources) { initWidget(uiBinder.createAndBindUi(this)); this.resources = resources; } public void setUserName(String userName) { nameSpan.setInnerText(userName); } } }}} =Using a widget that requires constructor args= You have an existing widget that needs constructor arguments. {{{ public CricketScores(String... teamNames) {...} }}} You use it in a template. {{{ }}} {{{ public class UserDashboard extends Composite { interface MyUiBinder extends UiBinder {} private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class); public UserDashboard() { initWidget(uiBinder.createAndBindUi(this)); } } }}} An error results: *(line numbers not yet implemented)* {{{ UserDashboard.ui.xml:7:2 [ERROR] com.my.app.widgets.CricketScores has no default (zero args) constructor. You can define a @UiFactory annotated method on UserDashboard to create an instance; mark a CrickectScores field of UserDashboard with @UiField(provided=true) and put an instance there; or annotate a constructor of CricketScores with @UiConstructor to allow its arguments to be provided by the template. }}} So you either make the @UiFactory method: {{{ public class UserDashboard extends Composite { interface MyUiBinder extends UiBinder; private static final MyUiBinder uiBinder = GWT.create(MyUiBinder.class); private final String[] teamNames; public UserDashboard(String... teamNames) { this.teamNames = teamNames; initWidget(uiBinder.createAndBindUi(this)); } /** Used by MyUiBinder to instantiate CricketScores */ @UiFactory CricketScores makeCricketScores() { // method name is insignificant return new CricketScores(teamNames); } } }}} or perhaps: {{{ public class UserDashboard extends Composite { interface MyUiBinder extends UiBinder; private static final MyUiBinder uiBinder = GWT.create(MyUiBinder.class); public UserDashboard() { this.teamNames = teamNames; initWidget(uiBinder.createAndBindUi(this)); } /** * Used by MyUiBinder to instantiate CricketScores. * Arguments to be filled in the template */ @UiFactory CricketScores makeCricketScores(String... teamNames) { return new CricketScores(teamNames); } } }}} {{{ }}} or annotate the constructor: {{{ public @UiConstructor CricketScores(String... teamNames) {...} }}} {{{ }}} or fill in a field marked with @UiField(provided=true): {{{ public class UserDashboard extends Composite { interface MyUiBinder extends UiBinder; private static final MyUiBinder uiBinder = GWT.create(MyUiBinder.class); @UiField(provided=true) final CricketScores cricketScores; // cannot be private public UserDashboard(CricketScores cricketScores) { // DI fans take note! this.cricketScores = cricketScores; initWidget(uiBinder.createAndBindUi(this)); } } }}} =Apply different xml templates to the same widget= You're an [http://code.google.com/events/io/sessions/GoogleWebToolkitBestPractices.html MVP] developer. You have a nice view interface, and a templated Widget that implements it. How might you use several different xml templates for the same view? {{{ public class FooPickerController { public interface Display { HasText getTitleField(); SourcesChangeEvents getPickerSelect(); } public void setDisplay(FooPickerDisplay display) { ... } } public class FooPickerDisplay extends Composite implements FooPickerController.Display { @UiTemplate("RedFooPicker.ui.xml") interface RedBinder extends UiBinder {} private static RedBinder redBinder = GWT.create(MyUiBinder.class); @UiTemplate("BlueFooPicker.ui.xml") interface BlueBinder extends UiBinder {} private static BlueBinder blueBinder = GWT.create(MyUiBinder.class); @UiField HasText titleField; @UiField SourcesChangeEvents pickerSelect; public HasText getTitleField() { return titleField; } public SourcesChangeEvents getPickerSelect() { return pickerSelect; } protected FooPickerDisplay(UiBinder binder) { initWidget(binder.createAndBindUi(this)); } public static FooPickerDisplay createRedPicker() { return new FooPickerDisplay(redBinder); } public static FooPickerDisplay createBluePicker() { return new FooPickerDisplay(blueBinder); } } }}}