Geek asks and answers

Insert a GWT widget into a div element

I use the GWT library (gwt-openlayers), which allows me to create pop-ups containing arbitrary HTML, similar to Google Maps. I need this HTML code to contain a GWT button widget.

I create some HTML elements on the fly:

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 get the original HTML for these elements by calling

String src = outerDiv.toString();

and paste this html into my map marker. Now my map marker displays the contents in order, including the button. However, the button will not respond to any events! From what I can compile, this is because the onAttach () buttons are never called.

Is there a better way to do this?

Thank,

John

~~~~ ~~~~ EDIT

Now I am trying to make a new way, which seems to be an accepted method, considering other similar messages.

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

, , !

- , ? ( )?

+5
5

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

+3

-

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

. RootPanel.get()

, RootPanels AbsolutePanels, , , . RootLayoutPanel, LayoutPanel ( , , ). , , RootPanel.

+2

SimplePanel - DIV. , ?

+1

, GWT.

, - jQuery, by 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);
    });
}-*/;

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

0
source

I had a similar problem. You can use gwt-openlayer MapWidgetas 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;
}

Then add it to any panel vertically or horizontally.

MapWidget mapWgt = createMapWidget();

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

Finally, you can add the created Panel(containing MapWidgetand gwt widget) to PopupPanel. In addition, you can now add handlers to the gwt button.

0
source

More articles:


All Articles