GWT: widget de cuadro de diálogo

Introducción

los DialogBoxwidget representa una forma de ventana emergente que tiene un área de título en la parte superior y puede ser arrastrada por el usuario. A diferencia de PopupPanel, las llamadas a PopupPanel.setWidth (String) y PopupPanel.setHeight (String) establecerán el ancho y el alto del cuadro de diálogo, incluso si aún no se ha agregado un widget.

Declaración de clase

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

public class DialogBox
   extends DecoratedPopupPanel
      implements HasHTML, HasSafeHtml, MouseListener

Constructores de clases

No Señor. Constructor y descripción
1

DialogBox()

Crea un cuadro de diálogo vacío.
2

DialogBox(boolean autoHide)

Crea un cuadro de diálogo vacío, especificando su auto-hide propiedad.
3

DialogBox(boolean autoHide, boolean modal)

Crea un cuadro de diálogo 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

protected void beginDragging(MouseDownEvent event)

Llamado con el mouse hacia abajo en el área de subtítulos, comienza el ciclo de arrastre activando la captura de eventos.
2

protected void continueDragging(MouseMoveEvent event)

Llamado al mover el mouse en el área de subtítulos, continúa arrastrando si se inició con beginDragging (com.google.gwt.event .dom.client.MouseDownEvent).
3

protected void doAttachChildren()

Si un widget contiene uno o más widgets secundarios que no están en la jerarquía de widgets lógicos (el niño está conectado físicamente solo en el nivel DOM), debe anular este método y llamar a Widget.on Attach () para cada uno de sus widgets secundarios.
4

protected void doDetachChildren()

Si un widget contiene uno o más widgets secundarios que no están en la jerarquía de widgets lógicos (el niño está conectado físicamente solo en el nivel DOM), debe anular este método y llamar a Widget.onDetach () para cada uno de sus widgets secundarios.
5

protected void endDragging(MouseUpEvent event)

Llamado con el mouse hacia arriba en el área de subtítulos, termina arrastrando al finalizar la captura de eventos.
6

DialogBox.Caption getCaption()

Proporciona acceso al título del cuadro de diálogo.
7

java.lang.String getHTML()

Obtiene el contenido de este objeto como HTML.
8

java.lang.String getText()

Obtiene el texto de este objeto.
9

void hide()

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

void onBrowserEvent(Event event)

Se activa cada vez que se recibe un evento del navegador.
11

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afectados: -caption = texto en la parte superior del DialogBox. -content = el contenedor alrededor del contenido.
12

void on Mouse Down(Widget sender, int x, int y)

Obsoleto. Use begin Dragging (com.google.gwt.event.dom. Client.Mouse Down Event) y obtenga Caption () en su lugar
13

void on Mouse Enter(Widget sender)

Obsoleto. Utilice Controladores con mouse sobre. agregue Mouse Over Handler (com.google.gwt.event.dom. client.Mouse Over Handler) en su lugar
14

void onMouseLeave(Widget sender)

Obsoleto. Use Has Mouse Out Handlers.add Mouse Out Handler (com.google.gwt.event.dom. Client.Mouse Out Handler) en su lugar
15

void onMouseMove(Widget sender, int x, int y)

Obsoleto. Utilice continueDragging (com.google.gwt.event.dom. Client.MouseMoveEvent) y getCaption () en su lugar
dieciséis

void onMouseUp(Widget sender, int x, int y)

Obsoleto. Utilice endDragging (com.google.gwt.event.dom. Client.MouseUpEvent) y getCaption () en su lugar
17

protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
18

void setHTML(SafeHtml html)

Establece la cadena html dentro del título.
19

void setHTML(java.lang.String html)

Establece la cadena html dentro del título.
20

void setText(java.lang.String text)

Establece el texto dentro del título.
21

void show()

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

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

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

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

  • java.lang.Object

Ejemplo de widget DialogBox

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget DialogBox 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-DialogBox .Caption {
   background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
   padding: 4px 4px 4px 8px;
   cursor: default;
   border-bottom: 1px solid #bbbbbb;
   border-top: 5px solid #d0e4f6;
}

.gwt-DialogBox .dialogContent {
}

.gwt-DialogBox .dialogMiddleCenter {
   padding: 3px;
   background: white;
}

.gwt-DialogBox .dialogBottomCenter {
   background: url(images/hborder.png) repeat-x 0px -4px;
   -background: url(images/hborder_ie6.png) repeat-x 0px -4px;
}

.gwt-DialogBox .dialogMiddleLeft {
   background: url(images/vborder.png) repeat-y;
}

.gwt-DialogBox .dialogMiddleRight {
   background: url(images/vborder.png) repeat-y -4px 0px;
   -background: url(images/vborder_ie6.png) repeat-y -4px 0px;
}

.gwt-DialogBox .dialogTopLeftInner {
   width: 5px;
   zoom: 1;
}

.gwt-DialogBox .dialogTopRightInner {
   width: 8px;
   zoom: 1;
}

.gwt-DialogBox .dialogBottomLeftInner {
   width: 5px;
   height: 8px;
   zoom: 1;
}

.gwt-DialogBox .dialogBottomRightInner {
   width: 5px;
   height: 8px;
   zoom: 1;
}

.gwt-DialogBox .dialogTopLeft {
   background: url(images/corner.png) no-repeat -13px 0px;
   -background: url(images/corner_ie6.png) no-repeat -13px 0px;
}

.gwt-DialogBox .dialogTopRight {
   background: url(images/corner.png) no-repeat -18px 0px;
   -background: url(images/corner_ie6.png) no-repeat -18px 0px;
}

.gwt-DialogBox .dialogBottomLeft {
   background: url(images/corner.png) no-repeat 0px -15px;
   -background: url(images/corner_ie6.png) no-repeat 0px -15px;
}

.gwt-DialogBox .dialogBottomRight {
   background: url(images/corner.png) no-repeat -5px -15px;
   -background: url(images/corner_ie6.png) no-repeat -5px -15px;
}

html>body .gwt-DialogBox {
}

* html .gwt-DialogBox .dialogTopLeftInner {
   width: 5px;
   overflow: hidden;
}

* html .gwt-DialogBox .dialogTopRightInner {
   width: 8px;
   overflow: hidden;
}

* html .gwt-DialogBox .dialogBottomLeftInner {
   width: 5px;
   height: 8px;
   overflow: hidden;
}

* html .gwt-DialogBox .dialogBottomRightInner {
   width: 8px;
   height: 8px;
   overflow: hidden;
}

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>DialogBox 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 DialogBox.

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.DialogBox;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   private static class MyDialog extends DialogBox {

      public MyDialog() {
         // Set the dialog box's caption.
         setText("My First Dialog");

         // Enable animation.
         setAnimationEnabled(true);

         // Enable glass background.
         setGlassEnabled(true);

         // DialogBox is a SimplePanel, so you have to set its widget 
         // property to whatever you want its contents to be.
         Button ok = new Button("OK");
         ok.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
               MyDialog.this.hide();
            }
         });

         Label label = new Label("This is a simple dialog box.");

         VerticalPanel panel = new VerticalPanel();
         panel.setHeight("100");
         panel.setWidth("300");
         panel.setSpacing(10);
         panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
         panel.add(label);
         panel.add(ok);

         setWidget(panel);
      }
   }

   public void onModuleLoad() {
      Button b = new Button("Click me");
      b.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            // Instantiate the dialog box and show it.
            MyDialog myDialog = new MyDialog();

            int left = Window.getClientWidth()/ 2;
            int top = Window.getClientHeight()/ 2;
            myDialog.setPopupPosition(left, top);
            myDialog.show();				
         }
      });

      RootPanel.get().add(b);
   }    
}

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: