How to mix HTML and GWT widgets using UIBinder?

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 i开发者_开发百科s to convert everything to widgets, what are the appropriate conversions for and items?

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.

Like this

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