How to embed toolkit components in HTML (eg. google map info window)

I’d like to put a Toolkit button (and perhaps other components as well) in a Google Maps marker info window. Any ideas how to do this?

Well… Some pointers, at least:

I have not used the google maps component very much, but it should be possible to add a button to the info window since IT Mill components are Widgets:

marker.openInfoWindow(widget)

You’d have to make an api for this on your serverside component, so that you can add the button (i.e make your map component a ComponentContainer).
That is: 1. make a serverside api for adding components to the marker 2. make sure your paintContent() paints the components (see Panel or OrderedLayout or some other ComponentContainer for example) 3. make your client-side updateFromUIDL() show the components as appropriate (again, see IPanel or IOrderedLayout for instance) 3. …profit :wink:

If you just want a button, it’s probably easier to implement the whole thing clientside, in your map component, using gwt buttons and sending the click events back to the server via the map component. But if you do the ‘ComponentContainer’ solution, it will allow you to add any component…

Best Regards,
Marc

Thanks for the tip! I hadn’t noticed that you can add GWT widgets into the info window :oops:

Anyway, I tried what you suggested and I think I’m almost there. I have this in my server side map component paintContent:


Panel p = new Panel("Test panel");
p.setStyleName(Panel.STYLE_LIGHT);
Button b = new Button("A button", this);
p.addComponent(b);
p.paint(target);

and in the client side updateFromUIDL I have this:


Iterator it = uidl.getChildIterator();
if (it.hasNext()) {
   Widget child = (Widget) client.getPaintable((UIDL) it.next());
   marker.openInfoWindow(child);
}

I get a info window that looks like this:

The widget is drawn but it’s empty. If I inspect the marker div with firebug it looks like this:


<div style="position: absolute; left: 16px; top: 16px; width: 217px; height: 58px; z-index: 10;">
   <div class="i-panel">
      <div class="i-panel-caption">
         <span/>
      </div>
      <div class="i-panel-content"/>
      <div class="i-panel-deco"/>
   </div>
</div>

If I try to paint just one button by replacing the last line in server side with


b.paint(target);

I get similar results:

I can click the button but my server side click listener is not called. Div contents look like with the panel except with an empty i-button.

What am I doing wrong?

My educated guess is that you should call the “updateFromUIDL” method for the child widget at some point, either before you attach it to the info panel or after it.

Like so (in your component’s updateFromUIDL-method):

Iterator it = uidl.getChildIterator(); if (it.hasNext()) { UIDL childUidl = (UIDL) it.next(); Widget child = (Widget) client.getPaintable(childUidl); marker.openInfoWindow(child); child.updateFromUIDL(client, childUidl); } That should do the trick for ya :slight_smile:

-Jouni

Thanks Jouni, that did the trick! Well, almost :wink:

Now the panel and it’s contents are drawn in the info window just like they should, but the button does not work. Any additional tricks I need to do to get it working?

Just a quick note if someone runs into this; the problem was that the component in the info window (Panel in this case) did not have a parent. You need to call

p.setParent(map);

and after that everything works.