Comment masquer la page en cours derrière une boîte de dialogue modale dans GWT vanilla?

Question

J'ai construit un composite de connexion que j'affiche dans le point d'entrée de mon application à l'utilisateur. Lors de la saisie du nom d'utilisateur et du mot de passe, j'envoie le nom d'utilisateur et le mot de passe au serveur via un RemoteService et je recevrai un objet contenant la session client. Si ClientSession est un objet valide (nom d'utilisateur et mot de passe reconnus), je souhaite afficher le panneau d'application principal sinon je veux afficher à nouveau la boîte de dialogue de connexion (avec un message d'erreur).

Ma question est, que lors de l'appel asynchrone au serveur, comment masquer l'écran de sorte que l'utilisateur ne peut pas cliquer sur quelque chose pendant que la session est obtenue à partir du serveur?

Je sais que la connexion doit être rapide, mais l'objet Session contient beaucoup de valeurs mises en cache côté client pour l'utilisateur actuel qui est utilisé pour générer le panneau principal. Cela peut prendre une fraction de seconde ou jusqu'à 5 secondes (je ne peux malheureusement pas contrôler la vitesse de l'infrastructure sous-jacente), donc je veux masquer l'écran jusqu'à ce qu'un délai soit atteint, puis permettre à l'utilisateur d'essayer à nouveau.

J'ai fait cette opération exacte avant d'utiliser GWT Ext, mais vanille GWT semble avoir beaucoup moins d'échantillons malheureusement.

Merci

Chris

Answer 1

La classe GWT PopupPanel possède un "panneau de verre" optionnel qui bloque l'interaction avec la page en dessous.

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

Vous pouvez consulter GlassPanel du GWT Incubator project. AFAICT n'est pas parfait, mais devrait néanmoins être utile;)

Answer 3

Vous pouvez également utiliser une boîte de dialogue à cet effet. Voici le code pour l'utiliser.

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

}

utilisation masque statique et procédé pour démasquer les opérations.

Answer 4

C'est ma 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 
    } 
}