Question

I am currently trying to use GWT’s UIBinder functionality, but without success. I have 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 e.g. a HelloWorld.ui.xml file with some widget layout in.
2) I need to create a corresponding HelloWorld class.

Here is what I can’t find info about:

A) Where do I put the HelloWorld.ui.xml file, to enable GWT to find it?

B) How to I add my HelloWorld component to e.g. a panel?

The documentation is very scarce, and definately written by someone who already knows too much about GWT to see, what a newbie doesn’t know.

Answer 1

A) You need to put the HelloWorld.ui.xml file in the same package as the widget class which contains the logic for that ui.xml file. The class name should be HelloWorld (for sake of simplicity I say you need to use the same name, but it’s possible via code to use a different name for the ui.xml file.)

B) Your HelloWorld class should be a class extending a widget. Just like any ‘normal’ widget it can than added to any panel.

Here is the code to bind the HelloWorld.ui.xml to in 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));
        ...
    }

    ...
}