如何将html与gwt小部件混合使用？

Question

我尝试生成动态gwt ui.结果我得到一个像这样的html片段:

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

Label应该是GWT标签,输入应该是GWT TextBox.我怎样才能通过GWT实现这一目标？我试过使用HTMLPanel类,但是如何注入

<li>

标签？

我不能使用UIBinder,因为我想动态创建如上所示的片段.

Answer 1

你应该创建自己的子类ComplexPanel.这将为您提供与a HorizontalPanel或VerticalPanel仅基于列表元素而非表元素的工作方式非常相似的东西.它应该看起来像这样:

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;
}
}

我没有测试过,但它基本上是正确的.WRT您在问题中发布的标记,此代码将产生一个小的差异,因为GWT标签有自己的<div>元素:

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

您可能更喜欢InlineLabel,这是基于较少侵入性的<span>元素.