Using HTMLPanel with UiBinder

87 views
Skip to first unread message

Tom Davies

unread,
May 26, 2010, 7:46:28 PM5/26/10
to Google Web Toolkit
I'd like to use an HTMLPanel widget with its HTML provided by a
UiBinder template.

Unfortunately, HTMLPanel always calls setElement() in its constructor.

Is there any way around this other than extending ComplexPanel and
copying the parts of HTMLPanel which I want?

Thomas Broyer

unread,
May 27, 2010, 4:16:39 AM5/27/10
to Google Web Toolkit

On 27 mai, 01:46, Tom Davies <tgdav...@gmail.com> wrote:
> I'd like to use an HTMLPanel widget with its HTML provided by a
> UiBinder template.
>
> Unfortunately, HTMLPanel always calls setElement() in its constructor.

Just like any widget.

> Is there any way around this other than extending ComplexPanel and
> copying the parts of HTMLPanel which I want?

I really don't understand how you'd like to use HTMLPanel and what
prevents you just using it.

Just so you know, because it isn't documented, you can choose the tag
name of the root element with UiBinder (the HTMLPanel(String,String)
constructor), just use a tag="" attribute, e.g.

<g:HTMLPanel>This will use a div element</g:HTMLPanel>

<g:HTMLPanel tag='p'>While this will use a p element</g:HTMLPanel>

You can then use an HTMLPanel as the root of your UiBinder and build
your widget as a Composite, passing the HTMLPanel built by UiBinder to
the initWidget method.

Tom Davies

unread,
May 27, 2010, 7:22:21 PM5/27/10
to Google Web Toolkit
Thanks for the reply Thomas.

Perhaps what I'm doing is premature optimisation.

I'm trying to make my widget simpler, by not using a composite. What I
have looks like this:

Foo.java:

class Foo extends ComplexPanel {
...ui binder boilerplate...
@UiField
Element childLocation;
public Foo() {
setElement(ui.createAndBindUi(this));
}

@Override
public void add(Widget child) {
// record the child widget for attachment during onLoad()
this.child = child;
}
@Override
protected void onLoad() {
addAndReplaceElement(child,
childLocation.<com.google.gwt.user.client.Element>cast());
}
private void addAndReplaceElement(Widget widget,
com.google.gwt.user.client.Element toReplace) {
... copied from HTMLPanel ...
}
}

Foo.ui.xml:

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

<div>
...plain html...
<span ui:field="childLocation"/>
...more html...
</div>

</ui:UiBinder>

So my template is simpler than a Composite would be.
Reply all
Reply to author
Forward
0 new messages