How to mix HTML and GWT widgets using UIBinder?

Question

We have an existing UI built with UIBinder whose ui.xml file contains the following hierarchy:

<ui:UiBinder>
<div>
Multiple <span> or <a> separated by verbatim HTML (like | separators).

I need to replace one of the anchors with a listbox.

Is there a way to make this transition without replacing the div with an HTMLPanel and changing all the anchors to something else?

If I try to stick a gwt:ValueListBox or gwt:ListBox in there, I get an error message that I cannot mix the two. I also cannot have multiple children (such as a div and an HTMLPanel) under the UIBinder.

If my only option is to convert everything to widgets, what are the appropriate conversions for and items?

Face

why don't you add an HTMLPanel to the binder and then put your div and the rest of your HTML inside ? – Procaine

Answer 1

In UIBinder, HTMLPanel can contain HTML elements and GWT widgets, but HTML elements can only contain other HTML elements.

Just replace top-level div with HTMLPanel, then replace only a specific <a> anchor with gwt:ListBox.

Schenck

…and of course, in your Java code, you'd probably have to extends Composite and initWidget rather than extends Widget and setElement. – Gualterio

from HTMLPanel javadoc: "A panel that contains HTML, and which can attach child widgets to identified elements within that HTML." - this suggest that HTML elements can in fact contain Widgets – Avouch

Answer 2

Like this

<gwt:HTMLPanel>
    <div align="center">
        <gwt:VerticalPanel res:styleName="style.background">

Sensillum