来自 HTML 的 GWT 小部件答案

【问题标题】：GWT Widget from HTML来自 HTML 的 GWT 小部件
【发布时间】：2010-12-21 19:52:32
【问题描述】：

我有一个 HTML 块，我想将它用作 GWT 小部件的基础，但我不太确定这样做的最佳方式。例如，我的 HTML 块如下所示：

<div class="my-widget">
    <div class="header">
        <span class="title">Title Text</span>
    </div>
    <div class="body">
        <span class="content">Content Text</span>
    </div>
</div>

现在，我当然可以将它作为静态字符串粘贴到 HTML 小部件中，但在这种情况下，我需要能够动态设置“标题”和“内容”元素的文本。这会杀死（或至少使静态文本选项变得更加困难）。

在这种情况下，首先想到的是手动构建 GWT 中的元素并保存对我需要更改的元素的引用，如下所示：

DivElement container = document.createDivElement();
setStyleName(container, "my-widget");
setElement(container);

DivElement header = document.createDivElement();
setStyleName(header, "header");
container.appendChild(header);

// Hold onto this element for later manipulation
DivElement title = document.createDivElement();
setStyleName(title, "title");
header.appendChild(title);

但这很快就变得难以管理，除了最简单的布局（我的不是。）

我想要的是能够将 HTML 作为静态文本发送，然后执行某种选择器（如 jQuery）来查询我想要操作的元素。我知道GWT-Query，但我无法让它在没有错误的情况下运行，而且在我看来，它的生命周期还为时过早，我无法将它整合到专业产品中。 .

我也知道 Google 的 UiBinder，这听起来完全符合我的要求。据我所知，问题在于，该功能仅在 GWT 2.0 中可用，它仍处于候选发布状态，因此对我来说无法使用。

那么，考虑到所有这些（对不起，问题太长了！）您对如何最好地实现这样的目标有什么建议吗？

【问题讨论】：

标签： html gwt

【解决方案1】：

如何使用 HTML.wrap()。例如，如果您将“my-widget”的 id 添加到最外层的 div 中，您可以执行以下操作：

HTML myWidget = HTML.wrap(RootPanel.get("my-widget").getElement());

【讨论】：

我不完全确定我理解你的意思。我猜你的意思是在 HTML 页面的某个地方隐藏我想要的标签实例，并在每次我需要一个新的小部件实例时复制它们？这并不能真正解决数据替换问题，而且我很好地将标记作为静态字符串存储在 Java 代码中，所以我认为这实际上并没有给我带来太多好处。不过，感谢您的建议。

【解决方案2】：

您可能知道，GWT 不提供直接映射到 span 元素的内置小部件。如果你可以使用 div 作为标题和内容，那么这段代码应该（这台机器上没有 GWT，有点靠内存）生成你拥有的 DOM 结构。

FlowPanel myWidget = new FlowPanel();
myWidget.setStyleName("my-widget");

SimplePanel header = new SimplePanel();
header.setStyleName("header");

Label title = new Label(titleText);
title.setStyleName("title");
header.add(title);
myWidget.add(header);

SimplePanel body = new SimplePanel();
body.setStyleName("body");

Label content = new Label(contentText);
content.setStyleName("content");
body.add(content);
myWidget.add(body);

从这里，您可以提供内容和标题标签的访问器，并根据需要更新它们。

title.setText(newTitle);
content.setText(newContent);

【讨论】：

是的，这确实给了我一个很好的近似我发布的 HTML。但是，我要重现的实际 HTML 比这要复杂得多，正如我在问题中所说，纯粹通过代码管理这么多标签很快就会变得不可行。（特别是如果布局将来需要任何形式的更新）。恐怕这个解决方案根本不适合我的需求。

【解决方案3】：

GWT 2.0 将在年底前发布。因此，除非您需要在几天内交付，否则我会开始使用 RC2 并尝试新的 UIBinder 方法。

【讨论】：

嗯，我需要在大约两周的时间内交付。 :) 对我的口味来说有点接近了，但是在昨晚在家玩了几个小时 GWT 2.0 之后，我得出的结论是，我想出的任何解决方案都远不及 Google 的精彩 UiBinder lib已创建。我只是咬紧牙关开始使用它进行开发，希望并祈祷谷歌不会在我这样做的时候把地毯从我下面拉出来。
不错的选择，我认为您不必过于害怕选择。 UiBinder 是一个重要的补充，是为 Google Wave 设计的，因此被广泛使用。此外，RC 通常功能齐全，他们只是想确保没有留下烦人的错误。

【解决方案4】：

您可以使用 InlineHTML 小部件来生成跨度并控制其内容。

【讨论】：

【解决方案5】：

与上面相同，但得到一个 GWT 面板（能够附加子级）。当您需要将第 3 方工具包 GUI 对象包装为 GWT 小部件时，这也很有用：

面板 gwtPanel = HTMLPanel.wrap(anElement);

【讨论】：

【解决方案6】：

以下代码套件适合我：

HorizontalPanel divContainer = new HorizontalPanel ();
Element div = DOM.createDiv();
div.appendChild(...); // whatever element it could fit inside
divContainer.getElement().appendChild(div);

编辑

这背后的想法是使用您已经编程的其他小部件来操作 DOM。

PS：我使用的是 GWT 2.4

【讨论】：