GWT - Widget DialogBox

Introdução

o DialogBoxwidget representa uma forma de pop-up que possui uma área de legenda na parte superior e pode ser arrastada pelo usuário. Ao contrário de um PopupPanel, as chamadas para PopupPanel.setWidth (String) e PopupPanel.setHeight (String) definirão a largura e a altura da própria caixa de diálogo, mesmo se um widget ainda não tiver sido adicionado.

Declaração de Classe

A seguir está a declaração para com.google.gwt.user.client.ui.DialogBox classe -

public class DialogBox
   extends DecoratedPopupPanel
      implements HasHTML, HasSafeHtml, MouseListener

Construtores de classe

Sr. Não. Construtor e descrição
1

DialogBox()

Cria uma caixa de diálogo vazia.
2

DialogBox(boolean autoHide)

Cria uma caixa de diálogo vazia, especificando seu auto-hide propriedade.
3

DialogBox(boolean autoHide, boolean modal)

Cria uma caixa de diálogo vazia, especificando seu auto-hide e modal propriedades.

Métodos de aula

Sr. Não. Nome e descrição da função
1

protected void beginDragging(MouseDownEvent event)

Chamado ao pressionar o mouse na área da legenda, inicia o loop de arrastar ativando a captura de evento.
2

protected void continueDragging(MouseMoveEvent event)

Chamado ao mover o mouse na área da legenda, continua arrastando se foi iniciado por beginDragging (com.google.gwt.event .dom.client.MouseDownEvent).
3

protected void doAttachChildren()

Se um widget contiver um ou mais widgets filhos que não estão na hierarquia lógica de widgets (o filho está fisicamente conectado apenas no nível DOM), ele deve substituir este método e chamar Widget.on Attach () para cada um de seus widgets filhos.
4

protected void doDetachChildren()

Se um widget contém um ou mais widgets filhos que não estão na hierarquia lógica de widgets (o filho está fisicamente conectado apenas no nível DOM), ele deve substituir este método e chamar Widget.onDetach () para cada um de seus widgets filhos.
5

protected void endDragging(MouseUpEvent event)

Chamado com o mouse na área da legenda, termina o arrastamento ao finalizar a captura do evento.
6

DialogBox.Caption getCaption()

Fornece acesso à legenda da caixa de diálogo.
7

java.lang.String getHTML()

Obtém o conteúdo deste objeto como HTML.
8

java.lang.String getText()

Obtém o texto deste objeto.
9

void hide()

Oculta o pop-up e o desanexa da página.
10

void onBrowserEvent(Event event)

Disparado sempre que um evento do navegador é recebido.
11

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afetados: -caption = text na parte superior da DialogBox. -content = o contêiner em torno do conteúdo.
12

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

Descontinuada. Use begin Dragging (com.google.gwt.event.dom. Client.Mouse Down Event) e obtenha Caption ().
13

void on Mouse Enter(Widget sender)

Descontinuada. O uso tem manipuladores de mouse. adicione Mouse Over Handler (com.google.gwt.event.dom. client.Mouse Over Handler) em vez disso
14

void onMouseLeave(Widget sender)

Descontinuada. Em vez disso, use Has Mouse Out Handlers.add Mouse Out Handler (com.google.gwt.event.dom. Client.Mouse Out Handler)
15

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

Descontinuada. Use continueDragging (com.google.gwt.event.dom. Client.MouseMoveEvent) e getCaption () em vez disso
16

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

Descontinuada. Use endDragging (com.google.gwt.event.dom. Client.MouseUpEvent) e getCaption ().
17

protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
18

void setHTML(SafeHtml html)

Define a string html dentro da legenda.
19

void setHTML(java.lang.String html)

Define a string html dentro da legenda.
20

void setText(java.lang.String text)

Define o texto dentro da legenda.
21

void show()

Mostra o pop-up e o anexa à página.

Métodos herdados

Esta classe herda métodos das seguintes classes -

  • 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

Exemplo de widget DialogBox

Este exemplo o levará por etapas simples para mostrar o uso de um widget DialogBox no GWT. Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau Descrição
1 Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3 Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo 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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que demonstrará o uso do 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);
   }    
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar o aplicativo em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -