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 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.
Leave a reply
Warning: Parameter 2 to wp_hide_post_Public::query_posts_join() expected to be a reference, value given in /home/stuffthathappens/public_html/blog/wp-includes/class-wp-hook.php on line 286