GWT - Widget PopupPanel

introduction

le PopupPanel widget représente un panneau qui peut pop upsur d'autres widgets. Il recouvre la zone client du navigateur (et toutes les fenêtres contextuelles créées précédemment).

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.client.ui.PopupPanel classe -

public class PopupPanel
   extends SimplePanel
      implements SourcesPopupEvents, EventPreview, 
         HasAnimation, HasCloseHandlers<PopupPanel>

Constructeurs de classe

N ° Sr. Constructeur et description
1

PopupPanel()

Crée un panneau contextuel vide.
2

PopupPanel(boolean autoHide)

Crée un panneau contextuel vide, en spécifiant son auto-hide propriété.
3

PopupPanel(boolean autoHide, boolean modal)

Crée un panneau contextuel vide, en spécifiant son auto-hide et modal Propriétés.

Méthodes de classe

N ° Sr. Nom et description de la fonction
1

void addAutoHidePartner(Element partner)

Les événements de souris qui se produisent dans un partenaire autoHide ne masqueront pas un panneau défini sur autoHide.
2

HandlerRegistration addCloseHandler( CloseHandler <PopupPanel> handler)

Ajoute un gestionnaire CloseEvent.
3

void addPopupListener(PopupListener listener)

Obsolète. Utilisez plutôt addCloseHandler (com.google.gwt.event. Logic.shared.CloseHandler)
4

void center()

Centre le popup dans la fenêtre du navigateur et l'affiche.
5

protected Element getContainerElement()

Remplacez cette méthode pour spécifier qu'un élément autre que l'élément racine soit le conteneur du widget enfant du panneau.
6

protected Element getGlassElement()

Obtenez l'élément en verre utilisé par ce PopupPanel.
sept

java.lang.String getGlassStyleName()

Obtient le nom du style à utiliser sur l'élément en verre.
8

int getOffsetHeight()

Obtient la hauteur de décalage du panneau en pixels.
9

int getOffsetWidth()

Obtient la largeur de décalage du panneau en pixels.
dix

int getPopupLeft()

Obtient la position gauche de la fenêtre contextuelle par rapport à la zone client du navigateur.
11

int getPopupTop()

Obtient la première position de la fenêtre contextuelle par rapport à la zone client du navigateur.
12

protected Element getStyleElement()

Méthode de modèle qui renvoie l'élément auquel les noms de style seront appliqués.
13

java.lang.String getTitle()

Obtient le titre associé à cet objet.
14

void hide()

Masque la fenêtre contextuelle et la détache de la page.
15

void hide(boolean autoClosed)

Masque la fenêtre contextuelle et la détache de la page.
16

boolean isAnimationEnabled()

Renvoie true si les animations sont activées, false sinon.
17

boolean isAutoHideEnabled()

Renvoie true si la fenêtre contextuelle doit être automatiquement masquée lorsque l'utilisateur clique en dehors de celle-ci.
18

boolean isAutoHideOnHistoryEventsEnabled( )

Renvoie true si la fenêtre contextuelle doit être automatiquement masquée lorsque le jeton d'historique change, par exemple lorsque l'utilisateur appuie sur le bouton Précédent du navigateur.
19

boolean isGlassEnabled()

Renvoie true si un élément en verre sera affiché sous le PopupPanel.
20

boolean isModal()

Renvoie true si les événements clavier ou souris qui ne ciblent pas le PopupPanel ou ses enfants doivent être ignorés.
21

boolean isPreviewingAllNativeEvents( )

Renvoie true si la fenêtre contextuelle doit prévisualiser tous les événements natifs, même si l'événement a déjà été consommé par une autre fenêtre contextuelle.
22

boolean isShowing()

Détermine si cette fenêtre contextuelle s'affiche ou non.
23

boolean isVisible()

Détermine si cette fenêtre contextuelle est visible ou non.
24

boolean onEventPreview(Event event)

Obsolète. Utilisez plutôt onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
25

boolean onKeyDownPreview(char key, int modifiers)

Obsolète. Utilisez plutôt onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
26

boolean onKeyPressPreview(char key, int modifiers)

Obsolète. Utilisez plutôt onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
27

boolean onKeyUpPreview(char key, int modifiers)

Obsolète. Utilisez plutôt onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
28

protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
29

protected void onUnload()

Cette méthode est appelée immédiatement avant qu'un widget ne soit détaché du document du navigateur.
30

void removeAutoHidePartner(Element partner)

Supprimer un partenaire autoHide.
31

void removePopupListener(PopupListener listener)

Obsolète. Utilisez le HandlerRegistration. removeHandler () sur l'objet renvoyé par addCloseHandler (com.google.gwt.event. logic.shared.CloseHandler) à la place
32

void setAnimationEnabled(boolean enable)

Activez ou désactivez les animations.
33

void setAutoHideEnabled(boolean autoHide)

Activez ou désactivez la fonction autoHide.
34

void setAutoHideOnHistoryEventsEnabled( boolean enabled)

Activez ou désactivez le masquage automatique sur les événements de modification de l'historique.
35

void setGlassEnabled(boolean enabled)

Lorsqu'elle est activée, l'arrière-plan sera bloqué avec un volet semi-transparent la prochaine fois qu'il sera affiché.
36

void setGlassStyleName(java.lang.String glassStyleName)

Définit le nom du style à utiliser sur l'élément en verre.
37

void setHeight(java.lang.String height)

Définit la hauteur du widget enfant du panneau.
38

void setModal(boolean modal)

Lorsque le popup est modal, les événements clavier ou souris qui ne ciblent pas le PopupPanel ou ses enfants seront ignorés.
39

void setPopupPosition(int left, int top)

Définit la position de la popup par rapport à la zone client du navigateur.
40

void setPopupPositionAndShow(PopupPanel. PositionCallback callback)

Définit la position du popup à l'aide d'un PopupPanel.PositionCallback et affiche le popup.
41

void setPreviewingAllNativeEvents(boolean previewAllNativeEvents)

Lorsqu'elle est activée, la fenêtre contextuelle prévisualise tous les événements natifs, même si une autre fenêtre contextuelle a été ouverte après celle-ci.
42

void setTitle(java.lang.String title)

Définit le titre associé à cet objet.
43

void setVisible(boolean visible)

Définit si cet objet est visible.
44

void setWidget(Widget w)

Définit le widget de ce panneau.
45

void setWidth(java.lang.String width)

Définit la largeur du widget enfant du panneau.
46

void show()

Affiche la fenêtre contextuelle et attache-la à la page.
47

void showRelativeTo(UIObject target)

Normalement, la fenêtre contextuelle est positionnée directement sous la cible relative, avec son bord gauche aligné avec le bord gauche de la cible.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.client.ui.Panel

  • com.google.gwt.user.client.ui.SimplePanel

  • java.lang.Object

Exemple de widget PopupPanel

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget PopupPanel dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2 Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Voici le contenu du fichier de feuille de style modifié war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-PopupPanel {
   border: 3px solid #000000;
   padding: 3px;
   background: white;
}

.gwt-PopupPanelGlass {
   background-color: #000;
   opacity: 0.3;
   filter: alpha(opacity=30);
}

.gwt-PopupPanel .popupContent {
   border: none;
   padding: 3px;
   background: gray;	
}

Voici le contenu du fichier hôte HTML modifié war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>PopupPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du widget PopupPanel.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   private static class MyPopup extends PopupPanel {

      public MyPopup() {
         // PopupPanel's constructor takes 'auto-hide' as its boolean 
         // parameter. If this is set, the panel closes itself 
         // automatically when the user clicks outside of it.         
         super(true);

         // PopupPanel is a SimplePanel, so you have to set it's widget 
         // property to whatever you want its contents to be.
         setWidget(new Label("Click outside of this popup to close it"));
      }
   }

   public void onModuleLoad() {
      Button b1 = new Button("Click me to show popup");
      b1.addClickHandler(new ClickHandler() {
         public void onClick(ClickEvent event) {
            // Instantiate the popup and show it.
             new MyPopup().show();
         }
      });

      Button b2 = new Button("Click me to show popup partway"
         +" across the screen");
      b2.addClickHandler(new ClickHandler() {
         public void onClick(ClickEvent event) {
            
            // Create the new popup.
            final MyPopup popup = new MyPopup();
            
            // Position the popup 1/3rd of the way down and across 
            // the screen, and show the popup. Since the position 
            // calculation is based on the offsetWidth and offsetHeight 
            // of the popup, you have to use the 
            // setPopupPositionAndShow(callback)  method. The alternative 
            // would be to call show(), calculate  the left and
            // top positions, and call setPopupPosition(left, top). 
            // This would have the ugly side effect of the popup jumping 
            
            // from its original position to its new position.
            popup.setPopupPositionAndShow(new PopupPanel.PositionCallback(){
               public void setPosition(int offsetWidth, int offsetHeight) {
                  int left = (Window.getClientWidth() - offsetWidth) / 3;
                  int top = (Window.getClientHeight() - offsetHeight) / 3;
                  popup.setPopupPosition(left, top);
               }
            });
         }
      });
      VerticalPanel panel = new VerticalPanel();
      panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      panel.setSpacing(10);
      panel.add(b1);
      panel.add(b2);

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(panel);
      
      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -