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?

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.

Answer 2

Like this

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