How do I mask the current page behind a modal dialog box in vanilla GWT?

I've built a log-in composite that I am displaying in my application entry-point to the user. Upon entry of the username and password, I am sending the username and password to the server via a R开发者_运维百科emoteService and will receive back an object containing the ClientSession. If the ClientSession is a valid object (recognised username and password), I wish to display the main application panel otherwise I want to display the login dialog again (with an error message).

My question is, that during the async call to the server, how to I mask the screen so that the user cannot click anything whilst the Session is obtained from the server?

I know that the login should be fast, but the Session object contains a lot of Client Side cached values for the current user that is used to generate the main panel. This may take a fraction of a second or up to 5 seconds (I can't control the speed of the underlying infrastructure unfortunately) so I want to mask the screen until a timeout is reached then allow the user to try again.

I have done this exact operation before using GWT Ext, but vanilla GWT seems to have a lot less samples unfortunately.

Thanks

Chris

The GWT class PopupPanel has an optional "glass panel" that blocks interaction with the page underneath.

final PopupPanel popup = new PopupPanel(false, true); // Create a modal dialog box that will not auto-hide
popup.add(new Label("Please wait"));
popup.setGlassEnabled(true); // Enable the glass panel
popup.center(); // Center the popup and make it visible

You might want to check out GlassPanel from the GWT Incubator project. AFAICT it's not perfect, but should be of some help nevertheless ;)

You can also use a dialog box for this purpose. Here is the code how to use it.

public class NTMaskAlert extends DialogBox {

private String displayText;
private String message;
private static NTMaskAlert alert;
Label lable;

private NTMaskAlert(String text) {
    setText(text);
    setWidget(new Image(GWT.getModuleBaseURL()
            + "/images/ajax-loader_1.gif"));
    setGlassEnabled(true);
    setAnimationEnabled(true);
    super.show();
    super.center();
    WorkFlowSessionFactory.putValue(WorkFlowSesisonKey.MASKING_PANEL, this);
}

public static void mask(String text) {
    if (text != null)
        new NTMaskAlert(text);
    else
        new NTMaskAlert("Processing");
}

public static void unMask() {
    NTMaskAlert alert = (NTMaskAlert) WorkFlowSessionFactory
            .getValue(WorkFlowSesisonKey.MASKING_PANEL);
    if (alert != null) {
        alert.hide();
        alert = null;
    }
}

public void setDisplayText(String displayText) {
    this.displayText = displayText;
    alert.setText(displayText);
}

public String getDisplayText() {
    return displayText;
}

public void setMessage(String message) {
    this.message = message;
    lable.setText(message);
}

public String getMessage() {
    return message;
}

}

Use static mask and unmask method for operations.

This is my solution:

public class CustomPopupPanel extends PopupPanel {

    private Label label = new Label();

    public CustomPopupPanel() {
        super(false, true); // Create a modal dialog box that will not auto-hide
        super.setGlassEnabled(true); // Enable the glass panel
        super.add(label); // Add the widget label into the panel
    }

    public CustomPopupPanel(String text) {
        this();
        this.mask(text);
    }

    public final void mask(String text) {
        label.setText(text);
        super.center(); // Center the popup and make it visible
    }

    public void unmask() {
        super.hide(); // Hide the popup
    }
}