Prior to GWT 2.0, there was no easy way to add custom HTTP headers when making remote procedure calls. The new RpcRequestBuilder in GWT 2.0 makes it easy to add custom headers.

// start with a custom RpcRequestBuilder
RpcRequestBuilder reqBuilder = new RpcRequestBuilder() {
  @Override
  protected RequestBuilder doCreate(String serviceEntryPoint) {
    RequestBuilder rb = super.doCreate(serviceEntryPoint);
    rb.setHeader("username", "sookie_stackhouse");
    return rb;
  }
};

// as with any other RPC, use GWT.create(...) to generate the client proxy
MyServiceAsync service = (MyServiceAsync) GWT.create(MyService.class);

// all client proxies also implement ServiceDefTarget
((ServiceDefTarget) service).setRpcRequestBuilder(reqBuilder);

// make calls as normal
service.doFunAndInterestingThings();

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.