Question

我有一个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中可用，GWT 2.0仍处于候选发布状态，因此无法使用。

所以，考虑到这一切（抱歉这个长期的问题！）你对于如何最好地实现这样的事情有什么建议吗？

Answer 1

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

Answer 2

如何使用HTML.wrap（）。例如，如果您向最外层的div添加了“my-widget”的ID，那么您可以执行以下操作：

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

Answer 3

您可以使用InlineHTML小部件生成范围并控制其内容。

Answer 4

您可能知道，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);

Answer 5

与上述相同，但获得GWT小组（能够追加孩子）。当您需要将第三方工具包GUI对象包装为GWT小部件时，这也很有用：

Panel gwtPanel = HTMLPanel.wrap（anElement）;

Answer 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

来自HTML的GWT Widget

6 个答案: