将 GWT 小部件插入 div 元素答案

【问题标题】：Inserting GWT widget into a div element将 GWT 小部件插入 div 元素
【发布时间】：2012-07-13 14:06:43
【问题描述】：

我正在使用 GWT 库 (gwt-openlayers)，它允许我创建一个包含任意 HTML 的地图弹出窗口，类似于 Google 地图。我需要这个 HTML 来包含一个 GWT Button 小部件。

我正在像这样即时创建一些 HTML 元素：

Element outerDiv = DOM.createDiv();
outerDiv.getStyle().setOverflow(Overflow.HIDDEN);
outerDiv.getStyle().setWidth(100, Unit.PCT);
outerDiv.appendChild(new HTML(mapPOI.getHtmlDetails()).getElement());
Button popupButton = new Button("View Property");
popupButton.getElement().getStyle().setFloat(com.google.gwt.dom.client.Style.Float.RIGHT);
outerDiv.appendChild(popupButton.getElement());

然后我通过调用来获取这些元素的 HTML 源代码

String src = outerDiv.toString();

并将这个 html 插入到我的地图标记中。现在我的地图标记显示内容正常，包括按钮。但是，按钮不会响应任何事件！据我所知，这是因为按钮 onAttach() 方法从未被调用过。

有没有更好的方法来做到这一点？

谢谢，

乔恩

~~~~编辑~~~~

我现在正在尝试一种新方法，这似乎是查看其他类似帖子的公认方法。

首先我要创建我的 div：

String divId = "popup-" + ref;
String innerHTML = "<div id=\"" +divId + "\"></div>";

然后我将它添加到我的地图弹出窗口并显示它（将它添加到 DOM）。显示弹出窗口后，我得到如下元素并尝试在其周围包裹一个 HTMLPanel：

Element element = Document.get().getElementById(divId);
HTMLPanel popupHTML = HTMLPanel.wrap(element);

我的 div 元素已成功检索。但是，HTMLPanel.wrap(element); 没有完成。原因是wrap(..)调用RootPanel.detachOnWindowClose(Widget widget)，其中包含如下断言：

assert !widgetsToDetach.contains(widget) : "detachOnUnload() called twice "
    + "for the same widget";
assert !isElementChildOfWidget(widget.getElement()) : "A widget that has "
    + "an existing parent widget may not be added to the detach list";

我放了一些断点，似乎第二个断言失败了！

有人知道为什么会这样吗？失败此断言是否真的会导致方法完全失败（不返回）？

【问题讨论】：

标签： gwt html

【解决方案1】：

您的第一种方法很好，您只需要为您的按钮注册 onClick 事件，如下所示：

DOM.sinkEvents(popupButton.getElement(), Event.ONCLICK);
DOM.setEventListener(popupButton.getElement(), new EventListener() {
    @Override
    public void onBrowserEvent(Event event) {
        //implement the logic after click
    }
});

我已经检查过了，它 100% 有效！

【讨论】：

【解决方案2】：

SimplePanel 是一个 DIV。也许可以用它来代替？

【讨论】：

【解决方案3】：

你可以试试

RootPanel.get("idOfYourMapMarker").add(popupButton);

见RootPanel.get()

不幸的是，RootPanels 是AbsolutePanels，它不适合布局，但如果您只需添加一个简单的按钮就可以工作。您也可以尝试RootLayoutPanel，它会给您一个 LayoutPanel（当您只想让事情顺利进行时也不是很好）。您最终可能会创建一个容器小部件来为您进行布局，并将 that 添加到 RootPanel。

【讨论】：

我尝试了这种方法，但它似乎不起作用。它甚至没有超过RootPanel.get("divId");，但它也没有抛出异常！很奇怪。

【解决方案4】：

您添加了元素，但您也必须保留实际 GWT 小部件的层次结构。

我没有看到一个干净的方法来做到这一点，但你可以使用 jQuery 之类的东西来获取按钮和 ID，然后添加一个点击处理程序，它会调用原始点击处理程序。

private static native void registerEvents(String buttonId, MyClass instance)/*-{
    var $ = $wnd.$;

    //check click
    $('#'+buttonId).live('click', function(e) {
        e.preventDefault();
        instance.@com.package.MyClass::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
    });
}-*/;

在您的 onAttach 或构造函数中调用此 registerEvents()。

【讨论】：

这将在旧浏览器中造成内存泄漏，有标准的方法可以使用 GWT 构建它
他的问题是他正在构建元素，然后获取所有这些元素的 HTML 并发送到第 3 方小部件（一些地图标记）。最初的问题已经听起来很危险，这就是为什么我说“我没有看到干净的方法”，但这是他可以使用的解决方案，他只需要自己调用和等效的清理方法。

【解决方案5】：

我曾经遇到过类似的问题。你可以使用gwt-openlayer的MapWidget如下：

private MapWidget createMapWidget() {
    final MapOptions defaultMapOptions = new MapOptions();
    defaultMapOptions.setDisplayProjection(DEFAULT_PROJECTION);
    defaultMapOptions.setNumZoomLevels(TOTAL_ZOOM_LEVELS);

    MapWidget mapWidget = new MapWidget(MAP_WIDGET_WIDTH, MAP_WIDGET_HEIGHT, defaultMapOptions);

    map = mapWidget.getMap();

    return mapWidget;
}

然后将其添加到任何面板，无论是垂直的还是水平的。

MapWidget mapWgt = createMapWidget();

VerticalPanel mainPanel = new VerticalPanel();
mainPanel.add(mapWgt);
...
... add whatever you want
...

您最终可以将创建的Panel（包含MapWidget 和gwt 小部件）添加到PopupPanel。此外，您现在应该能够将处理程序添加到 gwt 按钮。

【讨论】：