Tuesday, October 28, 2008

Mouse Capture and IFrames in GWT

In our application, we have some split panels... On one side is some nice, happy GWT content, and on the other is an iframe. Well, when you move the splitter, and your mouse gets out over the iframe, the splitter stops moving. Huh?

It turns out that the split panel is capturing the mouse when you start the resize. After a bit of digging, I noticed that for we just stop getting the mouse events when the mouse moves over the iframe. Googling turns up something kinda similar: http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse_thread/thread/36f70df2a52f42d2.

It was pointed out to me that if you drag a MyGWT-derived dialog box over the iframe, all is good. However, dragging a regular GWT-derived dialog box over the iframe exhibits the same problem.

Do some digging, and I find out that MyGWT is covering the entire browser window with a transparent panel. The dialog is parented to this panel. The panel adds an event preview, and only allows events to go through to the dialog.

Sounds ugly, but I give that a shot...when the split panel resize starts, create a panel, make it as big as the browser window, and then only allow events through if they're destined for the splitter:
RootPanel root = RootPanel.get();
setPixelSize( root.getOffsetWidth(), root.getOffsetHeight() );
DOMHelpers.setZIndex( getElement(), DOMHelpers.getTopmostZIndex() );
root.add( this, 0, 0 );
setVisible( true );
DOMHelpers.setZIndex( splitElem, DOMHelpers.getTopmostZIndex() );
DOM.addEventPreview( this );

Inside the onEventPreview() method for this panel:
public boolean onEventPreview( Event event ) {
  Element target = DOM.eventGetTarget(event);
   // Cancel the event if the target is not the splitter...
  return ( target == splitElem );
}


Finally, when the resizing is done, clean up:
DOM.removeEventPreview( this );
RootPanel root = RootPanel.get();
root.remove( this );
setVisible( false );

Since, of course, this is only a problem in FireFox, compile, deploy, and test it out. And, it still doesn't work. :-(

Left over from a previous attempt at solving this problem, I had changed the split panel class to implement EventPreview. Once I added code in there to duplicate the handling of Event.MOUSEMOVE and Event.MOUSEUP from the onBrowserEvent()....voila! It all works!

No comments: