uibinder : how to add a <gwt:Button> to html fragment ?

[nicolas de loof]

Hi

I've migrated some nice HTML/CSS code to uibinder, and would like now to listen to clickEvents on the <button> present in this HTML fragment.

according to http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideUiBinder.html#Simple_binding, I need to use a gwt:Button as replacement for the html element to support GWT event handlers. I tried to use it as is, to wrap all my bloc inside <gwt:HTML> and other ideas, but allways fail with some deferedBinding errors

Any suggestion ?

Here is my widget ui.xml :

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"

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

  <ui:style>

...

  </ui:style>

   

  

    <li class="{style.event}">

... (some nice HTML code)

      <button ui:field="subscribe" class="{style.button}">Inscription</button>

    </li>

</ui:UiBinder>

and java :

public class EventWidget

    extends UIObject

{

    interface MyUiBinder

        extends UiBinder<LIElement, EventWidget>

    {

    }

    @UiField

//    ButtonElement subscribe;

    Button subscribe;

    @UiHandler( "subscribe" )

    public void handleClick( ClickEvent e )

    {

...

[Ray Ryan]

EventWidget must extend Widget, and it will have to be placed in a panel whose ultimate ancestor is either a RootPanel or a RootLayoutPanel

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

[nicolas.deloof]

Do you suggest that extending Widget woul allow to mix HTML and <g:*>
tags in the ui.xml file as I did first ? If I understand well what
happens in the Deferred binding any <g:*> is converted to gwt API
calls to assmble widgets and pannel together, and static HTML have to
be placed into <g:HTML> elements, isn't it ?

Anyway it would be cool to be able to mix pure HTML and <g:*>
component, something similar to Apache Wicket inside GWT :)

I fixed my widget using this layout :

<g:HTMLPanel tag="li" styleName="{style.event}">
<g:HTML>
... static HTML code ...
</g:HTML>
<g:Button ui:field="subscribe"
styleName="{style.button}">Inscription</g:Button>
</g:HTMLPanel>

With @UiField Button subscribe;
the @UiHandler( "subscribe" ) public void handleClick( ClickEvent
e ) doesn't work anyway. Just not getting into code when the button is
clicked. Have to investigate more on that.

I tried to extend Widget as you suggested but makes no change.

Nicolas

On 20 déc, 21:34, Ray Ryan <rj...@google.com> wrote:
> EventWidget must extend Widget, and it will have to be placed in a panel
> whose ultimate ancestor is either a RootPanel or a RootLayoutPanel
>
> On Mon, Dec 21, 2009 at 5:24 AM, nicolas de loof

> <nicolas.del...@gmail.com>wrote:

>
>
>
> > Hi
>
> > I've migrated some nice HTML/CSS code to uibinder, and would like now to
> > listen to clickEvents on the <button> present in this HTML fragment.
>
> > according to

> >http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideUiBin...,

[Joel Webber]

To be precise, you don't actually need the <g:HTML> in this example. It could be simply:

 <g:HTMLPanel tag="li" styleName="{style.event}">

   <div>

      ... static HTML code ...

      <g:Button>You can do this too</g:Button>
   </div>

   <g:Button ui:field="subscribe" styleName="{style.button}">Inscription</g:Button>
 </g:HTMLPanel>

The point of the HTMLPanel/Parser is that it allows you to mix static HTML and widgets more or less arbitrarily. We've also seen that many designs can end up with a lot fewer unnecessary widgets this way.

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

[nicolas.deloof]

You're right, this works fine

just still can't have handlers working with my button, either using
@UiHandler( "subscribe" ) or a programmatic subscribe.addClickHandler
(...)
strange ... any suggestion to debug this ?

On 21 déc, 16:03, Joel Webber <j...@google.com> wrote:
> To be precise, you don't actually need the <g:HTML> in this example. It
> could be simply:
>
>  <g:HTMLPanel tag="li" styleName="{style.event}">
>    <div>
>       ... static HTML code ...
>       <g:Button>You can do this too</g:Button>
>    </div>
>    <g:Button
> ui:field="subscribe" styleName="{style.button}">Inscription</g:Button>
>  </g:HTMLPanel>
>
> The point of the HTMLPanel/Parser is that it allows you to mix static HTML
> and widgets more or less arbitrarily. We've also seen that many designs can
> end up with a lot fewer unnecessary widgets this way.
>

[Joel Webber]

Weird. Can you send a sample?

One other thing to consider -- you haven't by any chance attached the widget to the document body directly, like this, have you?

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

I know it sounds a bit strange, but this pops up fairly often. It will cause events to break because the widgets all see themselves as unattached, and thus never hook up their event handlers.

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors

[nicolas.deloof]

code is opensource ;)

http://juggers.googlecode.com/svn/trunk

add "&log_level=DEBUG" to URL string to enable gwt-log,
clicking on the [inscription] button has no effect. A popup was
expected, and a log tries to trace the handler method

On 22 déc, 14:34, Joel Webber <j...@google.com> wrote:
> Weird. Can you send a sample?
>
> One other thing to consider -- you haven't by any chance attached the widget
> to the document body directly, like this, have you?
>   Document.get().getBody().appendChild(myWidget.getElement());
>
> I know it sounds a bit strange, but this pops up fairly often. It will cause
> events to break because the widgets all see themselves as unattached, and
> thus never hook up their event handlers.
>

[nicolas.deloof]

I also made the mistake you describe :

root.getElement().appendChild( widget.getElement() );

Using root.addWidget( widget ) as replacement doesn't fixes the event
handler issue :'(

On 22 déc, 14:34, Joel Webber <j...@google.com> wrote:

> Weird. Can you send a sample?
>
> One other thing to consider -- you haven't by any chance attached the widget
> to the document body directly, like this, have you?
>   Document.get().getBody().appendChild(myWidget.getElement());
>
> I know it sounds a bit strange, but this pops up fairly often. It will cause
> events to break because the widgets all see themselves as unattached, and
> thus never hook up their event handlers.
>

[Thomas Broyer]

On Dec 23, 10:04 am, "nicolas.deloof" <nicolas.del...@gmail.com>
wrote:

> I also made the mistake you describe :
>
> root.getElement().appendChild( widget.getElement() );
>
> Using root.addWidget( widget ) as replacement doesn't fixes the event
> handler issue  :'(

Because you have the exact same kind of error in your EventWidget
(line 67)
http://code.google.com/p/juggers/source/browse/trunk/src/org/juggers/client/EventWidget.java#67

Make EventWidget extend Composite and replace line 67 with:
initWidget(binder.createAndBindUi(this));

@Joel: maybe a warning on getElement()'s JavaDoc would help?

[nicolas.deloof]

This is just a copy paste from the Hello World in the dev
documentation :

http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideUiBinder.html#Hello_World

maybe not the best sample to show best practices...

On 23 déc, 11:43, Thomas Broyer <t.bro...@gmail.com> wrote:
> On Dec 23, 10:04 am, "nicolas.deloof" <nicolas.del...@gmail.com>
> wrote:
>
> > I also made the mistake you describe :
>
> > root.getElement().appendChild( widget.getElement() );
>
> > Using root.addWidget( widget ) as replacement doesn't fixes the event
> > handler issue  :'(
>
> Because you have the exact same kind of error in your EventWidget

> (line 67)http://code.google.com/p/juggers/source/browse/trunk/src/org/juggers/...

[Joel Webber]

I agree that's a bit confusing -- though the sample class in that case doesn't actually extend Widget.

@rjrjr: Perhaps we should add a clear admonition to that example to make it clear that you can't attach *widgets* that way?

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Thomas Broyer]

On Dec 23, 3:19 pm, Joel Webber <j...@google.com> wrote:
> I agree that's a bit confusing -- though the sample class in that case
> doesn't actually extend Widget.
> @rjrjr: Perhaps we should add a clear admonition to that example to make it
> clear that you can't attach *widgets* that way?

Either that, or (or even in addition!) add the RootPanel.get().add
(...) to the following examples, or change the example to extend
Widget instead of UIObject, so it can use RootPanel.get().add(...)
(people extending UIObject are probably experienced GWT developers who
would understand they can use UiBinder to initialize their UIObject).

[Thomas Broyer]

On Dec 23, 11:58 am, "nicolas.deloof" <nicolas.del...@gmail.com>
wrote:

> This is just a copy paste from the Hello World in the dev
> documentation :
>

> http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideUiBin...

>
> maybe not the best sample to show best practices...

Well, this example starts with "that contains no widget, only HTML",
and the very next example, titled "Hello Widget World" starts with
"Here's an example of a UiBinder template that uses widgets", then the
example about @UiHandler extends Composite too.

"science without conscience is but the ruin of the soul" -- Rabelais

[Ray Ryan]

Still, that's a bad choice of first example. It may be the first thing read by many folks new to GWT. Added to the list for next year...