Inserting GWT widget into a div element

Question

I'm using a GWT library (gwt-openlayers) which allows me to create a map popup containing arbitrary HTML, similar to Google Maps. I need this HTML to contain a GWT Button widget.

I'm creating some HTML elements on-the-fly like this:

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());

Then I'm getting the source HTML for these elements by calling

String src = outerDiv.toString();

and inserting this html into my map marker. Now my map marker displays the content ok, including the button. However, the button won't respond to any events! From what I can gather, this is because the buttons onAttach() method is never being called.

Is there a better way to do this?

Thanks,

Jon

~~~~EDIT~~~~

I'm now trying a new way of doing this, which seems to be the accepted method looking at other similar posts.

First I'm creating my div:

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

Then I'm adding this to my map popup and displaying it (which adds it to the DOM). After the popup has been displayed, I'm getting the Element as follows and trying to wrap a HTMLPanel around it:

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

My div element is successfully retrieved. However, HTMLPanel.wrap(element); doesn't complete. The reason for this is that wrap(..) calls RootPanel.detachOnWindowClose(Widget widget), which includes the following assertions:

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";

I put some breakpoints in and it seems that the 2nd assertion is failing!

Does anybody have any idea why this might be the case? Should failing this assertion really result in a complete failure of the method (no return)?

Answer 1

Your first approach is good, you just need to register onClick event for your button like this:

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

I have checked this, it works 100%!