qx.ui.root.Inline in an OpenLayers popup contentDiv => button won't click!

Question

I'm working on a project that integrates OpenLayers and Qooxdoo...so far I'm having lots of success. But now I want to be able to place qooxdoo widgets in an OpenLayers popup (FramedCloud in this case) and something weird is happening--the button won't click!

The hover events seem to be working, and I've determined that qx.event.handler.Focus.__onNativeMouseDown is being executed, so the click event seems to be getting to the qooxdoo event system (?), but qx.event.handler.Mouse._onButtonEvent never gets called!

Either something in OL is getting in the way, or I'm doing something wrong. See one or both of these links for a test case:

http://s89238293.onlinehome.us/olisletest/build/index.html http://s89238293.onlinehome.us/olisletest/source/index.html

(be advised that the "source" link loads the uncompressed/debug versions of both qooxdoo and OpenLayers, so it takes a while to load!)

The links above build on the skeleton qx Inline app, here's the main custom part of the code:

  var map = new OpenLayers.Map("map_canvas", {
      projection: new OpenLayers.Projection("EPSG:900913"),
      displayProjection: new OpenLayers.Projection("EPSG:4326"),
      units: "m",
      numZoomLevels: 18,
      maxResolution: 156543.0339,
      maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                       20037508, 20037508.34)
  });

  map.addLayer(new OpenLayers.Layer.OSM());

  map.setCenter(new OpenLayers.LonLat(-97.0, 38.0).transform(map.displayProjection, map.projection), 3);

  var popup = new OpenLayers.Popup.FramedCloud(
          "searchSelection",
          new OpenLayers.LonLat(-97.0, 38.0).transform(map.displayProjection, map.projection),
          new OpenLayers.Size(200, 200),
          null,
          null,
          true,
          null
  );
  popup.autoSize = false;
  map.addPopup(popup);

  var button2 = new qx.ui.form.Button("A Button");
  button2.addListener("execute", function(){alert("Hello???");}, this);

  var isle = document.createElement("DIV");
  popup.contentDiv.appendChild(isle);
  var popupIsle = new qx.ui.root.Inline(isle, false, false);
  popupIsle.setLayout(new qx.ui.layout.VBox);
  popupIsle.setBackgroundColor("#fff");
  popupIsle.add(button2);

Can anyone help me figure out what's happening to the click event?

Answer 1

Hi,

I've just tested your example and I think that the layer implementation is blocking the click event. So the click event is first processed by the OpenLayers and qooxdoo does not get it.

Do be sure that nothing is wrong with inline implementation of qooxdoo. Do you already tested your inline button without including the OpenLayers stuff? If everything is working fine without OpenLayers implementation you know at least that OpenLayers is somehow blocking the events.

This would be my first step in debugging. Hope that helps a bit.

Regards, Alex