How to mix html with gwt widgets?

Question

I try to generate a dynamically gwt ui. As a result I would get a html fragment like this:

<ol>
<li>MyLabel</li>
<li><input type="text"></li>
</ol>

The Label should be a GWT Label and the input should be a GWT TextBox. How can I achieve this with GWT? I've tried to use the HTMLPanel class, but how can I inject the

<li>

Tags?

I can't use UIBinder, since I would like to dynamically create such fragments as shown above.

Answer 1

You should create your own subclass of ComplexPanel. This will give you something that works much the same as a HorizontalPanel or VerticalPanel, only based on list elements rather than table elements. It should look something like this:

public class OListPanel extends ComplexPanel { 
final OListElement ol = Document.get().createOLElement();

public OListPanel() {
    setElement(ol);
}

public void add(Widget w) {
    LIElement li = Document.get().createLIElement();
    ol.appendChild(li);
    add(w, (Element)li.cast());
}

public void insert(Widget w, int beforeIndex) {
    checkIndexBoundsForInsertion(beforeIndex);

    LIElement li = Document.get().createLIElement();
    ol.insertBefore(li, ol.getChild(beforeIndex));
    insert(w, (Element)li.cast(), beforeIndex, false);
}

public boolean remove(Widget w) {
    Element li = DOM.getParent(w.getElement());
    boolean removed = super.remove(w);
    if (removed) {
        ol.removeChild(li);
    }
    return removed;
}
}

I haven't tested that but it's basically right. WRT the markup you posted in your question, this code will produce one slight difference, since GWT labels have their own <div> element:

<ol>
<li><div>MyLabel</div></li>
<li><input type="text"></li>
</ol>

You might prefer InlineLabel, which is based on the less intrusive <span> element.