GWT - Widget PopupPanel

introduzione

Il PopupPanel widget rappresenta un pannello che può pop uprispetto ad altri widget. Si sovrappone all'area client del browser (e agli eventuali popup creati in precedenza).

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.PopupPanel classe -

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

Costruttori di classi

Sr.No. Costruttore e descrizione
1

PopupPanel()

Crea un pannello popup vuoto.
2

PopupPanel(boolean autoHide)

Crea un pannello popup vuoto, specificando il suo auto-hide proprietà.
3

PopupPanel(boolean autoHide, boolean modal)

Crea un pannello popup vuoto, specificando il suo auto-hide e modal proprietà.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

void addAutoHidePartner(Element partner)

Gli eventi del mouse che si verificano all'interno di un partner autoHide non nascondono un pannello impostato su autoHide.
2

HandlerRegistration addCloseHandler( CloseHandler <PopupPanel> handler)

Aggiunge un gestore CloseEvent.
3

void addPopupListener(PopupListener listener)

Deprecato. Utilizza invece addCloseHandler (com.google.gwt.event. Logical.shared.CloseHandler)
4

void center()

Centra il popup nella finestra del browser e lo mostra.
5

protected Element getContainerElement()

Sostituisci questo metodo per specificare che un elemento diverso dall'elemento radice sia il contenitore del widget figlio del pannello.
6

protected Element getGlassElement()

Ottieni l'elemento in vetro utilizzato da questo PopupPanel.
7

java.lang.String getGlassStyleName()

Ottiene il nome dello stile da utilizzare sull'elemento in vetro.
8

int getOffsetHeight()

Ottiene l'altezza di offset del pannello in pixel.
9

int getOffsetWidth()

Ottiene la larghezza di offset del pannello in pixel.
10

int getPopupLeft()

Ottiene la posizione sinistra del popup rispetto all'area client del browser.
11

int getPopupTop()

Ottiene la prima posizione del popup rispetto all'area client del browser.
12

protected Element getStyleElement()

Metodo del modello che restituisce l'elemento a cui verranno applicati i nomi di stile.
13

java.lang.String getTitle()

Ottiene il titolo associato a questo oggetto.
14

void hide()

Nasconde il popup e lo stacca dalla pagina.
15

void hide(boolean autoClosed)

Nasconde il popup e lo stacca dalla pagina.
16

boolean isAnimationEnabled()

Restituisce true se le animazioni sono abilitate, false in caso contrario.
17

boolean isAutoHideEnabled()

Restituisce vero se il popup deve essere nascosto automaticamente quando l'utente fa clic all'esterno di esso.
18

boolean isAutoHideOnHistoryEventsEnabled( )

Restituisce vero se il popup deve essere nascosto automaticamente quando il token della cronologia cambia, ad esempio quando l'utente preme il pulsante Indietro del browser.
19

boolean isGlassEnabled()

Restituisce vero se un elemento di vetro verrà visualizzato sotto PopupPanel.
20

boolean isModal()

Restituisce true se devono essere ignorati gli eventi della tastiera o del mouse che non hanno come destinazione PopupPanel o i suoi figli.
21

boolean isPreviewingAllNativeEvents( )

Restituisce vero se il popup deve visualizzare in anteprima tutti gli eventi nativi, anche se l'evento è già stato consumato da un altro popup.
22

boolean isShowing()

Determina se questo popup viene visualizzato o meno.
23

boolean isVisible()

Determina se questo popup è visibile o meno.
24

boolean onEventPreview(Event event)

Deprecato. Utilizza invece onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
25

boolean onKeyDownPreview(char key, int modifiers)

Deprecato. Utilizza invece onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
26

boolean onKeyPressPreview(char key, int modifiers)

Deprecato. Utilizza invece onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
27

boolean onKeyUpPreview(char key, int modifiers)

Deprecato. Utilizza invece onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent)
28

protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
29

protected void onUnload()

Questo metodo viene chiamato immediatamente prima che un widget venga scollegato dal documento del browser.
30

void removeAutoHidePartner(Element partner)

Rimuovere un partner autoHide.
31

void removePopupListener(PopupListener listener)

Deprecato. Usa HandlerRegistration. metodo removeHandler () sull'oggetto restituito da addCloseHandler (com.google.gwt.event. logical.shared.CloseHandler) invece
32

void setAnimationEnabled(boolean enable)

Abilita o disabilita le animazioni.
33

void setAutoHideEnabled(boolean autoHide)

Abilita o disabilita la funzione autoHide.
34

void setAutoHideOnHistoryEventsEnabled( boolean enabled)

Abilita o disabilita AutoHide sugli eventi di modifica della cronologia.
35

void setGlassEnabled(boolean enabled)

Se abilitato, lo sfondo verrà bloccato con un riquadro semitrasparente la prossima volta che verrà visualizzato.
36

void setGlassStyleName(java.lang.String glassStyleName)

Imposta il nome dello stile da utilizzare sull'elemento in vetro.
37

void setHeight(java.lang.String height)

Imposta l'altezza del widget figlio del pannello.
38

void setModal(boolean modal)

Quando il popup è modale, gli eventi della tastiera o del mouse che non mirano al PopupPanel o ai suoi figli verranno ignorati.
39

void setPopupPosition(int left, int top)

Imposta la posizione del popup rispetto all'area client del browser.
40

void setPopupPositionAndShow(PopupPanel. PositionCallback callback)

Imposta la posizione del popup utilizzando PopupPanel.PositionCallback e mostra il popup.
41

void setPreviewingAllNativeEvents(boolean previewAllNativeEvents)

Quando abilitato, il popup visualizzerà in anteprima tutti gli eventi nativi, anche se un altro popup è stato aperto dopo questo.
42

void setTitle(java.lang.String title)

Imposta il titolo associato a questo oggetto.
43

void setVisible(boolean visible)

Determina se questo oggetto è visibile.
44

void setWidget(Widget w)

Imposta il widget di questo pannello.
45

void setWidth(java.lang.String width)

Imposta la larghezza del widget figlio del pannello.
46

void show()

Mostra il popup e allegalo alla pagina.
47

void showRelativeTo(UIObject target)

Normalmente, il popup è posizionato direttamente sotto il target relativo, con il suo bordo sinistro allineato con il bordo sinistro del target.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

  • 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

Esempio di widget PopupPanel

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget PopupPanel in GWT. Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2 Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;	
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso del 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);
   }
}

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato: