UiBinder and child HTML 'widgets'

[Geoffrey Wiseman]

Just to give a little background, I've been doing GWT for a while, but
I'm pretty new to UiBinder.  I'm starting to fold it in to some of the
GWT work I'm doing, and I certainly like some aspects of it. I'm
building a page with a lot of repeating display elements that don't
require any events (a simple dashboard with some stats), so I started
thinking that I'd use HTML elements instead of widgets, and then I ran
into some troubles on how to do that with UiBinder.

I have a component representing the dashboard page (more specifically,
the 'body' part of the page leaving out the template and navigation),
and within that a bunch of stat widgets. I originally laid it out as a
FlowPanel, with stat widgets, e.g.:

<!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'
    xmlns:w="urn:import:myproject.client.widget">
        <g:FlowPanel>
                <g:Label>General</g:Label>
                <w:Stat heading="apps in-force" ui:field="appsInForce" />
        </g:FlowPanel>
</ui:UiBinder>

Once I started the Stat component, I realized I didn't need it to use
any widgets, that HTML would be ok, so I developed it that way:

public class Stat extends UIObject {

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

        @UiField
        SpanElement heading;

        @UiField
        SpanElement value;

        interface StatUiBinder extends UiBinder<Element, Stat> {
        }

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

        public void setHeading( String heading ) {
                this.heading.setInnerText( heading );
        }

        public void setValue( String value ) {
                this.value.setInnerText( value );
        }

}

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";>
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
        <ui:style>
                .statHeading {
                        }
                .statValue {
                        }
        </ui:style>
        <div>
                <span class="{style.statHeading}" ui:field="heading"></span>
                <span class="{style.statValue}" ui:field="value"></span>
        </div>
</ui:UiBinder>

GWT then complained that I was calling add(Widget) with a UIObject,
which made sense -- I can't put HTML elements into a flow panel. So I
switched the container to an HTMLPanel, switched the label for a Div:

<!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'
    xmlns:w="urn:import:myproject.client.widget">
        <g:HTMLPanel>
                <div>General</div>
                <w:Stat heading="apps in-force" ui:field="appsInForce" />
        </g:HTMLPanel>
</ui:UiBinder>

Now I'm getting this message:
                                [ERROR] [myproject] - Line 23: The method
addAndReplaceElement(Widget, Element) in the type HTMLPanel is not
applicable for the arguments (Stat, Element)

I'm confused as to why it's trying to treat the Stat as a Widget
(which it isn't), so I'm missing something about UiBinder or HTMLPanel
here. I did a few google searches, didn't see anything obvious.

Help appreciated.

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.