7

我正在使用一个 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";

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

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

4

5 回答 5

4

您的第一种方法很好，您只需要为您的按钮注册 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% 工作！

于 2014-07-21T07:50:16.270 回答
2

你可以尝试类似的东西

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

参见RootPanel.get()

不幸的是，RootPanelsAbsolutePanels对于布局来说不是很好，但如果你只需添加一个简单的按钮就可以工作。你也可以试试RootLayoutPanel这会给你一个 LayoutPanel （当你只想让事情流动时也不是很好）。您最终可能会创建一个为您执行布局的容器小部件，并将其添加到RootPanel。

于 2012-07-13T15:38:26.940 回答
2

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

于 2013-06-19T06:59:55.440 回答
0

您添加了元素，但您也必须保留实际 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()。

于 2012-07-13T18:27:07.463 回答
0

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

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 按钮。

于 2014-07-21T10:31:11.197 回答