How to mask the current page behind a modal dialog in vanilla GWT?

Question

I created a login composition that I display at my entry point for the user application. After entering the username and password, I send the username and password to the server via RemoteService and get back the object containing the ClientSession. If ClientSession is a valid object (recognized username and password), I want to display the main application panel, otherwise I want to display the login dialog again (with an error message).

My question is, during an asynchronous call on the server, how do I mask the screen so that the user cannot click anything while the session is received from the server?

I know that the login should be fast, but the Session object contains many cached Client Side values ​​for the current user, which is used to create the main panel. This may take longer than a second or up to 5 seconds (I cannot control the speed of the underlying infrastructure, unfortunately), so I want to hide the screen until a timeout is reached, and then ask the user to try again.

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

thank

Chris

Answer 1

The GWT PopupPanel class has an additional glass panel that blocks interaction with the page below.

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

Answer 2

GlassPanel GWT-. AFAICT , , , ;)

Answer 3

You can also use the 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 a static mask and unmask method for operations.

Answer 4

This is my decision:

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
    }
}