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)?

codebusta · Accepted Answer · 2014-08-23 21:30:36Z

5

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%!

edited Aug 23, 2014 at 21:30

answered Jul 21, 2014 at 7:50

codebusta

2,0631 gold badge16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You might try something like

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

See RootPanel.get()

Unfortunately, RootPanels are AbsolutePanels which aren't so nice for layout but could work if you just have a simple button to add. You could also try RootLayoutPanel which will give you a LayoutPanel (also not so nice when you just want things to flow). You might end up creating a container widget that does the layout for you, and adding that to the RootPanel.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 13, 2012 at 15:38

Riley Lark

20.9k15 gold badges86 silver badges130 bronze badges

1 Comment

DeadPassive Over a year ago

I tried this approach, but it doesn't seem to work. It doesn't even get past RootPanel.get("divId"); but it also doesn't throw an exception! Very odd.

liftarn · Accepted Answer · 2013-06-19 06:59:55Z

2

SimplePanel is a DIV. Perhaps that can be used instead?

answered Jun 19, 2013 at 6:59

liftarn

4446 silver badges23 bronze badges

Comments

checketts · Accepted Answer · 2012-07-13 19:08:30Z

0

You added the element, but you have to keep the hierarchy of the actual GWT Widgets too.

I don't see a clean way to do this, but you could use something like jQuery to grab the button by and ID and add a click handler back to it that would call the original click handler.

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

    //check click
    $('#'+buttonId).live('click', function(e) {
        e.preventDefault();
        [email protected]::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
    });
}-*/;

Call this registerEvents() either in your onAttach or constructor.

edited Jul 13, 2012 at 19:08

answered Jul 13, 2012 at 18:27

checketts

15.2k11 gold badges59 silver badges84 bronze badges

2 Comments

Daniel Kurka Over a year ago

this will create memory leaks in older browsers, there are standard ways of building this with GWT

checketts Over a year ago

His problem is that he is building elements, then grabbing the HTML for all those elements and sending to a 3rd party widget (some map marker). The initial problem already sounds dangerous, which is why I said 'I don't see a clean way', however it IS a solution he could use, he just has to call and equivalent cleanup method himself.

pratZ · Accepted Answer · 2014-07-21 10:36:54Z

I once had a similar problem. You can use the gwt-openlayer's MapWidget as follows:

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

And then add it to any panel be it vertical or horizontal.

MapWidget mapWgt = createMapWidget();

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

You can finally add the created Panel(containing the MapWidget and the gwt widget) to the PopupPanel. Also, you should now be able to add handlers to the gwt button.

Collectives™ on Stack Overflow

Inserting GWT widget into a div element

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related