GWT - Widget DialogBox

introduzione

Il DialogBoxwidget rappresenta una forma di popup che ha un'area didascalia in alto e può essere trascinata dall'utente. A differenza di PopupPanel, le chiamate a PopupPanel.setWidth (String) e PopupPanel.setHeight (String) imposteranno la larghezza e l'altezza della finestra di dialogo stessa, anche se un widget non è stato ancora aggiunto.

Dichiarazione di classe

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

public class DialogBox
   extends DecoratedPopupPanel
      implements HasHTML, HasSafeHtml, MouseListener

Costruttori di classi

Sr.No. Costruttore e descrizione
1

DialogBox()

Crea una finestra di dialogo vuota.
2

DialogBox(boolean autoHide)

Crea una finestra di dialogo vuota, specificandone auto-hide proprietà.
3

DialogBox(boolean autoHide, boolean modal)

Crea una finestra di dialogo vuota, specificandone auto-hide e modal proprietà.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

protected void beginDragging(MouseDownEvent event)

Chiamato con il mouse in basso nell'area della didascalia, inizia il ciclo di trascinamento attivando l'acquisizione degli eventi.
2

protected void continueDragging(MouseMoveEvent event)

Chiamato al movimento del mouse nell'area della didascalia, continua a trascinare se è stato avviato da beginDragging (com.google.gwt.event .dom.client.MouseDownEvent).
3

protected void doAttachChildren()

Se un widget contiene uno o più widget figlio che non sono nella gerarchia del widget logico (il figlio è fisicamente connesso solo a livello DOM), deve sovrascrivere questo metodo e chiamare Widget.on Attach () per ciascuno dei suoi widget figlio.
4

protected void doDetachChildren()

Se un widget contiene uno o più widget figlio che non sono nella gerarchia del widget logico (il bambino è fisicamente connesso solo a livello DOM), deve sovrascrivere questo metodo e chiamare Widget.onDetach () per ciascuno dei suoi widget figlio.
5

protected void endDragging(MouseUpEvent event)

Chiamato al passaggio del mouse nell'area della didascalia, termina il trascinamento terminando l'acquisizione dell'evento.
6

DialogBox.Caption getCaption()

Fornisce accesso alla didascalia della finestra di dialogo.
7

java.lang.String getHTML()

Ottiene il contenuto di questo oggetto come HTML.
8

java.lang.String getText()

Ottiene il testo di questo oggetto.
9

void hide()

Nasconde il popup e lo stacca dalla pagina.
10

void onBrowserEvent(Event event)

Attivato ogni volta che viene ricevuto un evento del browser.
11

protected void onEnsureDebugId(java.lang.String baseID)

Elementi interessati: -caption = testo nella parte superiore della finestra di dialogo. -content = il contenitore attorno al contenuto.
12

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

Deprecato. Utilizza il trascinamento iniziale (com.google.gwt.event.dom. Client.Mouse Down Event) e ottieni invece Caption ()
13

void on Mouse Enter(Widget sender)

Deprecato. Usa ha gestori al passaggio del mouse. aggiungere invece Mouse Over Handler (com.google.gwt.event.dom. client.Mouse Over Handler)
14

void onMouseLeave(Widget sender)

Deprecato. Utilizza invece 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)

Deprecato. Utilizza invece continueDragging (com.google.gwt.event.dom. Client.MouseMoveEvent) e getCaption ()
16

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

Deprecato. Utilizza invece endDragging (com.google.gwt.event.dom. Client.MouseUpEvent) e getCaption ()
17

protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
18

void setHTML(SafeHtml html)

Imposta la stringa html all'interno della didascalia.
19

void setHTML(java.lang.String html)

Imposta la stringa html all'interno della didascalia.
20

void setText(java.lang.String text)

Imposta il testo all'interno della didascalia.
21

void show()

Mostra il popup e allegalo alla pagina.

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

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

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

  • java.lang.Object

Esempio di widget DialogBox

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget DialogBox 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-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;
}

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