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子类。这将为您提供与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>元素。

Answer 2

您可以随时执行以下操作：

    Document doc = Document.get();
    final OListElement ol = doc.createOLElement();
    LIElement li = doc.createLIElement();
    li.appendChild((new Label()).getElement());
    ol.appendChild(li);
    li = doc.createLIElement();
    li.appendChild((new TextBox()).getElement());
    ol.appendChild(li);
    panel.add(new Widget() {{
        setElement(ol);
    }});

Answer 3

为什么不将该片段放在通过UiBinder创建的独立小部件中？（如果您事先了解结构的外观，只想插入MyLabel和TextBox）不要害怕像这样分割你的小部件 - GWT编译器非常适合优化，UiBinder模板在编译时处理，所以不应该有任何性能损失（强烈建议基准测试 - YMMV）。我甚至会说尝试通过DOM包添加这个结构会更快 - 使用UiBinder，编译器知道它正在处理什么，DOM你基本上会说：“我知道我在做什么，不要碰我的代码！“ （至少那是我对此的看法:)）。 HTMLPanel可以替代，但您必须为要修改/附加内容的每个元素分配一个ID给...：/

底线：为此使用UiBinder，这就是为它构建的。

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

3 个答案: