Events defined in UiBinder not working ?

Question

Sorry if it's a silly question , but I'm just starting learning GWT and got stuck to this problem for a long time ... . Here is my code :

public void onModuleLoad() {

    HelloWorldPanel helloWorldPanel = new HelloWorldPanel();
    RootPanel.get().add(helloWorldPanel);
    //RootPanel.getBodyElement().appendChild(helloWorldPanel.getElement());

    Button b = new Button();
    b.setText("button B");
    b.addClickHandler(new ClickHandler()
    {
      @Override
      public void onClick(ClickEvent arg0)
      {
        System.out.println("click B");
        Window.alert("Hello button B");
      }
    });
    RootPanel.get().add(b);
}

And this is my HelloWorldPanel.java :

public class HelloWorldPanel extends Composite
{
  interface HelloWorldUiBinder extends UiBinder<Widget , HelloWorldPanel> {}

  private static HelloWorldUiBinder uiBinder = GWT.create(HelloWorldUiBinder.class);

  @UiField TextBox nameTextBox;

  @UiField Button goButton;

  public HelloWorldPanel()
  {
    initWidget(uiBinder.createAndBindUi(this));

    nameTextBox = new TextBox();
    nameTextBox.setText("World");

    goButton = new Button("Go");
    goButton.addClickHandler(new ClickHandler()
    {
      @Override
      public void onClick(ClickEvent event)
      {
        System.out.println("clicked , event = " + event);
        Window.alert("Hello " + nameTextBox.getValue());
      }
    });
  }
}

And HelloWorldPanel.ui.xml :

<ui:UiBinder 
  xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">

  <g:HTMLPanel>
    <g:TextBox ui:field="nameTextBox" />
    <g:Button  ui:field="goButton" text="Go"/>
  </g:HTMLPanel>

</ui:UiBinder>

It's a very basic "Composite" widget , but the TextBox and Button in HelloWorldPanel just not working. The default value ("World") is not shown , and button has no reaction , no System.out message ...

But the Button defined in onModuleLoad() just works well , I don't know why.... Can somebody tell me where goes wrong ? Thanks a lot !

Another question : What's the difference between RootPanel.get().add(helloWorldPanel); and RootPanel.getBodyElement().appendChild(helloWorldPanel.getElement()); ? It seems the same result ...

Answer 1

You don't have to (or to be more precise: you mustn't) instantiate the Widgets annotated with @UiField - UiBinder does that for you. So, in your code, you discard those Widgets and create your own - but since they are not added to the DOM, they don't receive DOM events. Remove the nameTextBox = new TextBox(); and goButton = new Button("Go"); lines and you should be fine :)

PS: If you need to create a Widget with some custom parameters, see the good docs.