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

【问题标题】：How to mix html with gwt widgets?如何将 html 与 gwt 小部件混合使用？
【发布时间】：2010-09-10 14:58:10
【问题描述】：

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

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

标签应该是 GWT 标签，输入应该是 GWT 文本框。如何使用 GWT 实现这一目标？我尝试使用 HTMLPanel 类，但如何注入

<li>

标签？

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

【问题讨论】：

标签： java gwt

【解决方案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> 元素。

【讨论】：

对我来说是完美的解决方案。谢谢。

【解决方案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);
    }});

【讨论】：

当然，但请在 x 周后尝试阅读此代码（或者更糟，由其他开发人员编写） - 噩梦。 GWT 的整个想法是让开发人员保持“更高”的水平 - 无需担心 DOM（或为他/她提供轻松创建 DOM 的工具，如 UiBinder）。
我完全同意。我想展示的只是一种达到预期结果的技术。 UiBinder 是一个很棒的工具，但更适合于一般布局/自定义，而不是高度动态的组件，我认为这里就是这种情况。我不会在我自己的代码中使用这样的 DOM 意大利面条。然而，在可重复使用的 Panel 组件中包装呈现的技术（如 hambend 所示）似乎非常有用。例如，它可以用来创建列表树，这对 UiBinder 来说会很痛苦。

【解决方案3】：

为什么不将该片段放入通过 UiBinder 创建的独立 Widget 中？（如果您事先知道结构的外观，并且只想插入 MyLabel 和 TextBox）
不要害怕像这样拆分小部件 - GWT 编译器非常擅长优化，并且 UiBinder 模板在编译时处理，因此不应该有任何性能损失（仍然强烈建议进行基准测试 - YMMV）。我什至会说，尝试通过 DOM 包添加这个结构会更快 - 使用 UiBinder，编译器知道它在处理什么，使用 DOM 你基本上是在说：“我知道我是什么”我在做，别碰我的密码！” （至少这是我对此的看法:)）。 HTMLPanel 可能是另一种选择，但您必须为要修改/附加内容的每个元素分配一个 id...：/

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

【讨论】：