GWT: Using UIBinder with HTML templates ... how to make it work?

Question

I am currently trying to use the GWT UIBinder functionality, but to no avail. I read the documentation several times, but it does NOT contain the full story. Maybe you can help me.

Here is what I know so far:

1) I need to create, for example. HelloWorld.ui.xml file with some widget layout. 2) I need to create the corresponding HelloWorld class.

Here is what I can not find information about:

A) Where can I put the HelloWorld.ui.xml file to enable GWT?

B) How to add a HelloWorld component, such as a panel?

The documentation is very scarce and definitely written by someone who already knows too much about GWT to see what a beginner does not know.

Answer 1

A) You need to put the HelloWorld.ui.xml file in the same package as the widget class that contains the logic for this ui.xml file. The class name should be HelloWorld (for simplicity, I say that you need to use the same name, but with the code you can use a different name for the ui.xml file.)

B) The HelloWorld class must be a widget extension class. Like any “regular” widget, it can be added to any panel.

Here is the code to bind HelloWorld.ui.xml to your HelloWorld widget class:

 public class HelloWorld extends Composite /*or extend any widget you want*/ { //This defines an interface that represents this specific HelloWorld.ui.xml file. interface MyUiBinder extends UiBinder<Widget, HelloWorld> {} // This code is for GWT so it can generate the code from your HelloWorld.ui.xml private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class); //Constructor public HelloWidgetWorld() { // This binds the HelloWorld.ui.xml with this widget initWidget(uiBinder.createAndBindUi(this)); ... } ... } 

Answer 2

This review explains everything: http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html

• You put HelloWorld.ui.xml in the same folder as your HelloWorld.java file.

• How is it (taken from the link above):

   public class HelloWorld extends UIObject { // Could extend Widget instead interface HelloWorldUiBinder extends UiBinder<DivElement, HelloWorld> {} private static HelloWorldUiBinder uiBinder = GWT.create(HelloWorldUiBinder.class); // div element created via UiBinder private DivElement divElement; public HelloWorld() { // createAndBindUi divElement = uiBinder.createAndBindUi(this); // now you can add created DivElement to your panel } }; 

Answer 3

Here are two complete guides and examples of HelloWorld:

1) for UI Binder with GWT control: http://blog.jeffdouglas.com/2010/01/19/gwt-uibinder-hello-world-tutorial/

2) for UI Binder with simple HTML: Sorry! StackOverflow does not allow me to send two hyperlinks. Therefore, I will post the second in a separate answer or in a comment on this.