GWT Glass Pane
October 3rd, 2009
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
ResizeHandlerinstead ofWindowResizeListener, 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.
