GWT - Widget de PopupPanel

Introducción

los PopupPanel widget representa un panel que puede pop upsobre otros widgets. Se superpone al área del cliente del navegador (y cualquier ventana emergente creada previamente).

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.PopupPanel clase -

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

Constructores de clases

No Señor. Constructor y descripción
1

PopupPanel()

Crea un panel emergente vacío.
2

PopupPanel(boolean autoHide)

Crea un panel emergente vacío, especificando su auto-hide propiedad.
3

PopupPanel(boolean autoHide, boolean modal)

Crea un panel emergente vacío, especificando su auto-hide y modal propiedades.

Métodos de clase

No Señor. Nombre y descripción de la función
1

void addAutoHidePartner(Element partner)

Los eventos de mouse que ocurren dentro de un socio de ocultación automática no ocultarán un panel configurado para Ocultar automáticamente.
2

HandlerRegistration addCloseHandler( CloseHandler <PopupPanel> handler)

Agrega un controlador CloseEvent.
3

void addPopupListener(PopupListener listener)

Obsoleto. Utilice addCloseHandler (com.google.gwt.event. Logic.shared.CloseHandler) en su lugar
4

void center()

Centra la ventana emergente en la ventana del navegador y la muestra.
5

protected Element getContainerElement()

Reemplace este método para especificar que un elemento que no sea el elemento raíz sea el contenedor del widget secundario del panel.
6

protected Element getGlassElement()

Obtenga el elemento de vidrio utilizado por este PopupPanel.
7

java.lang.String getGlassStyleName()

Obtiene el nombre de estilo que se utilizará en el elemento de cristal.
8

int getOffsetHeight()

Obtiene la altura de desplazamiento del panel en píxeles.
9

int getOffsetWidth()

Obtiene el ancho de desplazamiento del panel en píxeles.
10

int getPopupLeft()

Obtiene la posición izquierda de la ventana emergente en relación con el área del cliente del navegador.
11

int getPopupTop()

Obtiene la posición superior de la ventana emergente en relación con el área del cliente del navegador.
12

protected Element getStyleElement()

Método de plantilla que devuelve el elemento al que se aplicarán los nombres de estilo.
13

java.lang.String getTitle()

Obtiene el título asociado a este objeto.
14

void hide()

Oculta la ventana emergente y la separa de la página.
15

void hide(boolean autoClosed)

Oculta la ventana emergente y la separa de la página.
dieciséis

boolean isAnimationEnabled()

Devuelve verdadero si las animaciones están habilitadas, falso si no.
17

boolean isAutoHideEnabled()

Devuelve verdadero si la ventana emergente debe ocultarse automáticamente cuando el usuario hace clic fuera de ella.
18

boolean isAutoHideOnHistoryEventsEnabled( )

Devuelve verdadero si la ventana emergente debe ocultarse automáticamente cuando cambia el token del historial, como cuando el usuario presiona el botón Atrás del navegador.
19

boolean isGlassEnabled()

Devuelve verdadero si un elemento de vidrio se mostrará debajo del PopupPanel.
20

boolean isModal()

Devuelve verdadero si se deben ignorar los eventos de teclado o mouse que no tienen como destino el PopupPanel o sus elementos secundarios.
21

boolean isPreviewingAllNativeEvents( )

Devuelve verdadero si la ventana emergente debe obtener una vista previa de todos los eventos nativos, incluso si el evento ya ha sido consumido por otra ventana emergente.
22

boolean isShowing()

Determina si se muestra o no esta ventana emergente.
23

boolean isVisible()

Determina si esta ventana emergente es visible o no.
24

boolean onEventPreview(Event event)

Obsoleto. Utilice onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent) en su lugar
25

boolean onKeyDownPreview(char key, int modifiers)

Obsoleto. Utilice onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent) en su lugar
26

boolean onKeyPressPreview(char key, int modifiers)

Obsoleto. Utilice onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent) en su lugar
27

boolean onKeyUpPreview(char key, int modifiers)

Obsoleto. Utilice onPreviewNativeEvent (com.google.gwt.user. Client.Event.NativePreviewEvent) en su lugar
28

protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
29

protected void onUnload()

Este método se llama inmediatamente antes de que un widget se separe del documento del navegador.
30

void removeAutoHidePartner(Element partner)

Eliminar un socio de autoHide.
31

void removePopupListener(PopupListener listener)

Obsoleto. Utilice el HandlerRegistration. método removeHandler () en el objeto devuelto por addCloseHandler (com.google.gwt.event. logic.shared.CloseHandler) en su lugar
32

void setAnimationEnabled(boolean enable)

Habilita o deshabilita animaciones.
33

void setAutoHideEnabled(boolean autoHide)

Activa o desactiva la función de ocultación automática.
34

void setAutoHideOnHistoryEventsEnabled( boolean enabled)

Habilite o deshabilite el ocultamiento automático en eventos de cambio de historial.
35

void setGlassEnabled(boolean enabled)

Cuando está habilitado, el fondo se bloqueará con un panel semitransparente la próxima vez que se muestre.
36

void setGlassStyleName(java.lang.String glassStyleName)

Establece el nombre del estilo que se utilizará en el elemento de vidrio.
37

void setHeight(java.lang.String height)

Establece la altura del widget secundario del panel.
38

void setModal(boolean modal)

Cuando la ventana emergente es modal, se ignorarán los eventos de teclado o mouse que no tengan como destino el PopupPanel o sus elementos secundarios.
39

void setPopupPosition(int left, int top)

Establece la posición de la ventana emergente en relación con el área del cliente del navegador.
40

void setPopupPositionAndShow(PopupPanel. PositionCallback callback)

Establece la posición de la ventana emergente usando un PopupPanel.PositionCallback y muestra la ventana emergente.
41

void setPreviewingAllNativeEvents(boolean previewAllNativeEvents)

Cuando está habilitada, la ventana emergente mostrará una vista previa de todos los eventos nativos, incluso si se abrió otra ventana emergente después de esta.
42

void setTitle(java.lang.String title)

Establece el título asociado con este objeto.
43

void setVisible(boolean visible)

Establece si este objeto es visible.
44

void setWidget(Widget w)

Establece el widget de este panel.
45

void setWidth(java.lang.String width)

Establece el ancho del widget secundario del panel.
46

void show()

Muestra la ventana emergente y adjúntela a la página.
47

void showRelativeTo(UIObject target)

Normalmente, la ventana emergente se coloca directamente debajo del objetivo relativo, con su borde izquierdo alineado con el borde izquierdo del objetivo.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

  • 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

Ejemplo de widget PopupPanel

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget PopupPanel en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso Descripción
1 Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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;	
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado: