GWT - Widget composite

introduction

le Compositewidget est un type de widget qui peut envelopper un autre widget, masquant les méthodes du widget enveloppé. Lorsqu'il est ajouté à un panneau, un composite se comporte exactement comme si le widget qu'il enveloppe avait été ajouté. Le composite est utile pour créer un seul widget à partir d'un agrégat de plusieurs autres widgets contenus dans un seul panneau.

Déclaration de classe

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

public abstract class Composite
   extends Widget

Constructeurs de classe

N ° Sr.	Constructeur et description
1	Composite()

Méthodes de classe

N ° Sr.	Nom et description de la fonction
1	protected Widget getWidget() Fournit un accès aux sous-classes au widget supérieur qui définit ce composite.
2	protected void initWidget(Widget widget) Définit le widget à envelopper par le composite.
3	boolean isAttached() Détermine si ce widget est actuellement attaché au document du navigateur (c'est-à-dire qu'il existe une chaîne ininterrompue de widgets entre ce widget et le document du navigateur sous-jacent).
4	protected void onAttach() Cette méthode est appelée lorsqu'un widget est attaché au document du navigateur.
5	void onBrowserEvent(Event event) Lancé chaque fois qu'un événement de navigateur est reçu.
6	protected void onDetach() Cette méthode est appelée lorsqu'un widget est détaché du document du navigateur.
sept	protected void setWidget(Widget widget) Obsolète. Utilisez plutôt initWidget (Widget)

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
java.lang.Object

Exemple de widget composite

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget composite 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;
}

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>Composite Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du widget composite.

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.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   /**
   * A composite of a TextBox and a CheckBox that optionally enables it.
   */
   private static class OptionalTextBox extends Composite implements
   ClickHandler {

      private TextBox textBox = new TextBox();
      private CheckBox checkBox = new CheckBox();

      /**
      * Constructs an OptionalTextBox with the given caption 
      * on the check.
      * @param caption the caption to be displayed with the check box
      */
      public OptionalTextBox(String caption) {
         // Place the check above the text box using a vertical panel.
         VerticalPanel panel = new VerticalPanel();
         // panel.setBorderWidth(1);
         panel.setSpacing(10);
         panel.add(checkBox);
         panel.add(textBox);

         textBox.setWidth("200");
         // Set the check box's caption, and check it by default.
         checkBox.setText(caption);
         checkBox.setValue(true);
         checkBox.addClickHandler(this);

         DecoratorPanel decoratorPanel = new DecoratorPanel();

         decoratorPanel.add(panel);
         // All composites must call initWidget() in their constructors.
         initWidget(decoratorPanel);
      }

      public void onClick(ClickEvent event) {
         if (event.getSource() == checkBox) {
            // When the check box is clicked,
            //update the text box's enabled state.
            textBox.setEnabled(checkBox.getValue());
         }
      }
   }

   public void onModuleLoad() {
      // Create an optional text box and add it to the root panel.
      OptionalTextBox otb = new OptionalTextBox("Check this to enable me");
      RootPanel.get().add(otb);
   }    
}

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 -

↰ Previous page