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.