Trouble with UiBinder getting UiHandler events to fire under GWT 2.4

[Tyler Cope]

Hello,

I'm having trouble getting UiHandler events to fire in a new
application that I've created with the help of UiBinder.

I've recreated the issue using the most basic code I could come up
with. Basically, a single button is created with UiBinder xml and the
widget that is bound to it has a ClickEvent annotation. The app starts
up, shows a popup message (to ensure that the verification method
works) and then shows a single lowly button. When the button is
clicked, I expect that another popup be shown but nothing actually
happens.

I'm pretty sure this is a case of developer error but I'm not sure
what I'm missing. I've gone over the UiBinder documentation and the
HandlerDemo.java sample code and didn't see anything extra or
different from what I have.

I've also deployed the simple code to AppEngine and tested under
Chrome, Safari and Firefox. I don't see the alert popup using any of
the browsers.

http://tcope-testapp.appspot.com/

My environment is as follows:

Eclipse 3.7 Indigo on Mac 10.6.8
GWT 2.4.0

And the source looks like this:

// TestApp.java
package com.testapp.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;

public class TestApp implements EntryPoint {

public void onModuleLoad() {
MyView myView = new MyView();
Document.get().getBody().appendChild(myView.getElement());
}
}

// MyView.ui.xml
<!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:Button ui:field="myButton" width="120px" text="Click me" />
</g:HTMLPanel>
</ui:UiBinder>

// MyView.java
package com.testapp.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class MyView extends Composite {

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

interface MyViewUiBinder extends UiBinder<Widget, MyView> { }

@UiField Button myButton;

public MyView() {
initWidget(uiBinder.createAndBindUi(this));
Window.alert("ok press the button...");
System.out.println("after initWidget");
}

@UiHandler("myButton")
void handleClick(ClickEvent e) {
Window.alert("Click! [handleClick]");
System.out.println("Click! [handleClick]");
}

}

Anyone have any ideas?

Thanks,

Tyler

[Tyler Cope]

Hi again,

Tough crowd.... ha ha. I figured out how to fix my problem although
I'm not entirely sure what was wrong with the initial code.

In order to get events firing, I can add the Composite widget instance
to the RootPanel as oppose to appending the widget's root element to
the document body.

So instead of writing this and seeing the interface but not having any
events:

Document.get().getBody().appendChild(myView.getElement());

I can do this instead and events work properly:

RootPanel.get().add(myView);

I'm still interested in knowing why this is the case. I'm pretty sure
the former code was not invented by me but copied from some tutorial
out there.

Tyler

[Jeff Larsen]

You will always need to attach your widgets to RootPanel or RootLayoutPanel. 

[Tyler Cope]

Thanks Jeff, I can live with that.

I found what led me off the path of workingness... the UiBinder
documentation. Here's a snippet from the documentation for Declarative
Layout with UiBinder (http://code.google.com/webtoolkit/doc/latest/
DevGuideUiBinder.html#Hello_World):

HelloWorld helloWorld = new HelloWorld();
Document.get().getBody().appendChild(helloWorld.getElement());
helloWorld.setName("World");

The section after that one talks about making a UiBinder template that
uses widgets instead of HTML but doesn't say that you need to change
the way you add the widget to the document.

Oh well...

Tyler

[Jeff Larsen]

oh wow, that is a glaring over site. You are the first person I've seen run into this problem though

[Thomas Broyer]

Your memory needs a refresh then, Jeff ;-)

At least half a dozen people falled into the trap back when GWT 2.0 was released and the doc was written (two years ago!)

What I don't understand is that people think widgets built with UiBinder are different from widgets built otherwise.

[Jeff Larsen]

Hah, I wasn't really watching the group at all at that time, so that explains it!

[Thomas Broyer]

On Thursday, January 10, 2013 2:47:30 PM UTC+1, Nils Schröder wrote:

Just for your notice:

I had exactly the same Problem this way. Takes 2 hours to find this post -.-

What do you think? Is there a possibility that some one update the Documentation?
Just because of small, cute and new GWT Developers like me :D

Feel free to file an issue on the tracker so we can at least track it. Eventually the documentation sources should be open-sourced as well so anyone could propose patches, but it won't happen any time soon I'm afraid.

[Goktug Gokdogan]

FYI, documentation is updated to emphasize that related code sample will not work with widgets.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/XViZOjEufWAJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Jens]

Am Freitag, 8. Februar 2013 00:38:37 UTC+1 schrieb Goktug Gokdogan:

FYI, documentation is updated to emphasize that related code sample will not work with widgets.

A bit more should be corrected. The simple Hello World class example is IMHO terrible for starters.

public class HelloWorld {
  interface MyUiBinder extends UiBinder<DivElement, HelloWorld> {}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField SpanElement nameSpan;

  public HelloWorld() {
    setElement(uiBinder.createAndBindUi(this));
  }

  public void setName(String name) { nameSpan.setInnerText(name); }

  public void Element getElement() { return nameSpan; }
}

HelloWorld helloWorld = new HelloWorld();

// Don't forget, this is DOM only; will not work with GWT widgets
Document.get().getBody().appendChild(helloWorld.getElement());
helloWorld.setName("World");

First, HelloWorld has no super class but uses the (undefined) method setElement() in its constructor. Second, getElement() returns the nameSpan variable and is used in the second code example to append the Hello World UiBinder to the body element. A starter sees code that does not compile and if he assumes that setElement() is maybe the corresponding setter for getElement() { return nameSpan; } then its totally wrong because nameSpan is already assigned via @UiField.

To make things clear getElement() should return the DivElement returned by createAndBindUi() or HelloWorld should extend UiObject and have its getElement() { return nameSpan; } method removed.

-- J.

[Goktug Gokdogan]

Thanks, actually I didn't read the example before adding the comment :-)

Changed it to extend UIObject and removed getElement method. The changes will be pushed with the next release.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

For more options, visit https://groups.google.com/groups/opt_out.