GWT - Widget DialogBox

introduction

le DialogBoxwidget représente une forme de popup qui a une zone de légende en haut et peut être déplacée par l'utilisateur. Contrairement à un PopupPanel, les appels à PopupPanel.setWidth (String) et PopupPanel.setHeight (String) définiront la largeur et la hauteur de la boîte de dialogue elle-même, même si un widget n'a pas encore été ajouté.

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.client.ui.DialogBox classe -

public class DialogBox
   extends DecoratedPopupPanel
      implements HasHTML, HasSafeHtml, MouseListener

Constructeurs de classe

N ° Sr. Constructeur et description
1

DialogBox()

Crée une boîte de dialogue vide.
2

DialogBox(boolean autoHide)

Crée une boîte de dialogue vide, en spécifiant son auto-hide propriété.
3

DialogBox(boolean autoHide, boolean modal)

Crée une boîte de dialogue vide, en spécifiant son auto-hide et modal Propriétés.

Méthodes de classe

N ° Sr. Nom de la fonction et description
1

protected void beginDragging(MouseDownEvent event)

Appelé en bas de la souris dans la zone de légende, commence la boucle de glissement en activant la capture d'événements.
2

protected void continueDragging(MouseMoveEvent event)

Appelé au déplacement de la souris dans la zone de légende, continue de faire glisser s'il a été lancé par beginDragging (com.google.gwt.event .dom.client.MouseDownEvent)
3

protected void doAttachChildren()

Si un widget contient un ou plusieurs widgets enfants qui ne sont pas dans la hiérarchie logique des widgets (l'enfant est physiquement connecté uniquement au niveau DOM), il doit remplacer cette méthode et appeler Widget.on Attach () pour chacun de ses widgets enfants.
4

protected void doDetachChildren()

Si un widget contient un ou plusieurs widgets enfants qui ne sont pas dans la hiérarchie logique des widgets (l'enfant est physiquement connecté uniquement au niveau DOM), il doit remplacer cette méthode et appeler Widget.onDetach () pour chacun de ses widgets enfants.
5

protected void endDragging(MouseUpEvent event)

Appelé à la souris dans la zone de légende, termine le glissement en terminant la capture d'événement.
6

DialogBox.Caption getCaption()

Donne accès à la légende de la boîte de dialogue.
sept

java.lang.String getHTML()

Obtient le contenu de cet objet au format HTML.
8

java.lang.String getText()

Obtient le texte de cet objet.
9

void hide()

Masque la fenêtre contextuelle et la détache de la page.
dix

void onBrowserEvent(Event event)

Lancé chaque fois qu'un événement de navigateur est reçu.
11

protected void onEnsureDebugId(java.lang.String baseID)

Éléments concernés: -caption = texte en haut de la boîte de dialogue. -content = le conteneur autour du contenu.
12

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

Obsolète. Utilisez begin Dragging (com.google.gwt.event.dom. Client.Mouse Down Event) et obtenez Caption () à la place
13

void on Mouse Enter(Widget sender)

Obsolète. Utilisez A des gestionnaires de souris. ajoutez à la place le Mouse Over Handler (com.google.gwt.event.dom. client.Mouse Over Handler)
14

void onMouseLeave(Widget sender)

Obsolète. À la place, utilisez 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)

Obsolète. Utilisez à la place continueDragging (com.google.gwt.event.dom. Client.MouseMoveEvent) et getCaption ()
16

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

Obsolète. Utilisez plutôt endDragging (com.google.gwt.event.dom. Client.MouseUpEvent) et getCaption ()
17

protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
18

void setHTML(SafeHtml html)

Définit la chaîne html à l'intérieur de la légende.
19

void setHTML(java.lang.String html)

Définit la chaîne html à l'intérieur de la légende.
20

void setText(java.lang.String text)

Définit le texte à l'intérieur de la légende.
21

void show()

Affiche la fenêtre contextuelle et attache-la à la page.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

  • 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

Exemple de widget DialogBox

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget DialogBox dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2 Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;
}

Voici le contenu du fichier hôte HTML modifié 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>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui illustrera l'utilisation du 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);
   }    
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -