Plugins+zindex+smartgwt - a solution

[bjvetter]

Versions:
SmartGWT 2.1, GWT 2.1, Firefox 3+, Chrome all, IE 7+, Windows XP+

We've been trying to work around getting a plugin (in this case Google Earth) and SmartGWT/GWT to co-exist. Because of zindex and other issues with the earth plugin on a variety of platforms (Windows in particular), windows, menus, and other javascript objects aren't always visible in all of the browsers on all of the platforms. It seems to vary to some degree between them.

Through research about the google earth plugin itself, placing an iframe behind the canvas for the window, menu, etc but over the plugin seems to work in almost all cases. I've attached a class we use as a peer to menus, windows, etc so that they will be visible when shown over the plugin.

For example, at the end of our window constructor, we add this line to get the shimmed peer in place:

    	this.addPeer(peer = new ShimPeer(this), "windowshim", false, false);

So the good news is this works great on most of the platforms.

That said, we are still running into a problem when using Firefox on Windows. For some reason, when we create a window and position it over the plugin, portions of the Window do not show. In particular, the window's header, the window's frame, the window's background, and any labels or IButtons that are added to the window or are part of a form. The form fields (which map to input elements) do show up.

When looking at the resulting html in firebug, I notice that the zindex values change for those items. All of the divs before and after the window are in the 800,000+ range. The Window has elements that have zindex values of around 200,000+ except for the input fields, which are in the 800,000+ range. I'm not sure if this is the problem, but it seems like things got a little weird inside the window. I played around with removing the form, etc, and ultimately all of the Windows contents, yet the window was never made visible (although the div tags associated with the window elements were set to being visible).

Any ideas on how to solve for this?

Source to ShimPeer (also attached):

package com.yourdomain.earth.client;

import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.Positioning;
import com.smartgwt.client.types.Visibility;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;

public class ShimPeer extends Canvas {
	
	private Canvas parent;
	
	public ShimPeer(Canvas parent) {
		super();
		this.parent = parent;
		this.addDrawHandler(new DrawHandler() {
			@Override
			public void onDraw(DrawEvent event) {
				Scheduler.get().scheduleDeferred(new ScheduledCommand() {
					@Override
					public void execute() {
						attachShim();
					}
				});
			}			
		});
	}
	
	private void attachShim() {
		int top = parent.getAbsoluteTop();
		int left = parent.getAbsoluteLeft();
		int width = parent.getVisibleWidth();
		int height = parent.getVisibleHeight();
		int zindex = parent.getZIndex()-1;
		this.setPosition(Positioning.ABSOLUTE);
		this.setTop(top);
		this.setLeft(left);
		this.setWidth(width);
		this.setHeight(height);
		this.setOverflow(Overflow.VISIBLE);
		this.setVisibility(Visibility.INHERIT);
		this.setZIndex(zindex);
		this.setContents(
			"<iframe height='100%' width='100%' scrolling='no' allowtransparency='yes' border='0' frameborder='0' marginwidth='0' marginheight='0' tabIndex='-1' tabStop='false' src=\"javascript:void(0);\"></iframe>");
	}
}