GWT Glass Pane

This code darkens the entire screen, allowing you to create lightbox effects when showing dialogs. For example, here is the normal screen:

And here is how the screen looks with a glass pane and dialog:

There are GWT component libraries that do this sort of thing, for example GlassPanel, but I prefer to minimize external dependencies. Instead, I decided to try this code example by Evaldas Taroza.

My Changes

I made a few changes to the original code:

• Since I’m using GWT 1.7, I implement ResizeHandler instead of WindowResizeListener, which is deprecated.
• I’m removing the -moz-opacity since it is specific to older versions of Mozilla and no longer seems relevant.

The Final Code

First, here is the CSS file:

.gcomp-GlassPanel {
    background-color: black;
    filter: alpha(opacity=50);
    opacity: .50;
}

Next, here is the JavaDoc comment, listed separately because syntax highlighting wasn’t working here on my blog.

/**
 * This panel is positioned absolutely and covers the whole client
 * area of the browser. It can be used to disable everything
 * underneath it with appropriate z-index.
 * <p/>
 * For instance a dialog can attach it to the root panel during
 * opening, and remove it during closing.
 * <p/>
 * CSS:<br>
 * .gcomp-GlassPanel
 * <p/>
 * Example:<br>
 * Add and remove this widget whenever you want, and style it as
 * follows:
 * <pre>
 * .gcomp-GlassPanel{
 *   background-color: black;
 *   filter:alpha(opacity=50);
 *   opacity:.50;
 * }
 * </pre>
 */

And here is the code…

public class GlassPanel extends Composite implements ResizeHandler {
    public static final String STYLE = "gcomp-GlassPanel";

    private SimplePanel panel = new SimplePanel();

    public GlassPanel() {
        initWidget(panel);

        panel.setStylePrimaryName(STYLE);
        Window.addResizeHandler(this);
        resize();
    }

    public void onResize(ResizeEvent event) {
        resize();
    }

    public void show() {
        // Override the styles explicitly, because it's needed
        // every time the widget is detached
        Element elem = panel.getElement();
        DOM.setStyleAttribute(elem, "left", "0");
        DOM.setStyleAttribute(elem, "top", "0");
        DOM.setStyleAttribute(elem, "position", "absolute");
        RootPanel.get().add(this);
    }

    public void hide() {
        RootPanel.get().remove(this);
    }

    private void resize() {
        panel.setSize(Window.getClientWidth() + "px",
                Window.getClientHeight() + "px");
    }
}

I’ve only done minimal testing, on the latest Firefox and IE7.

Posted on Saturday, October 3rd, 2009 at 9:25 am in GWT, HTML and CSS, Java.