GWT - Benutzerdefinierte Widgets

GWT bietet drei Möglichkeiten zum Erstellen benutzerdefinierter Benutzeroberflächenelemente. Es gibt drei allgemeine Strategien zu befolgen -

Create a widget by extending Composite Class- Dies ist die häufigste und einfachste Möglichkeit, benutzerdefinierte Widgets zu erstellen. Hier können Sie vorhandene Widgets verwenden, um eine zusammengesetzte Ansicht mit benutzerdefinierten Eigenschaften zu erstellen.
Create a widget using GWT DOM API in JAVA- Auf diese Weise werden GWT-Basis-Widgets erstellt. Trotzdem ist es eine sehr komplizierte Art, ein benutzerdefiniertes Widget zu erstellen, und sollte mit Vorsicht verwendet werden.
Use JavaScript and wrap it in a widget using JSNI- Dies sollte im Allgemeinen nur als letztes Mittel erfolgen. In Anbetracht der browserübergreifenden Auswirkungen der nativen Methoden wird es sehr kompliziert und auch schwieriger zu debuggen.

Erstellen Sie ein benutzerdefiniertes Widget mit einer zusammengesetzten Klasse

In diesem Beispiel werden Sie durch einfache Schritte geführt, um die Erstellung eines benutzerdefinierten Widgets in GWT zu zeigen. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir im Kapitel GWT - Grundlegende Widgets erstellt haben.

Hier erstellen wir ein benutzerdefiniertes Widget, indem wir die Composite-Klasse erweitern. Dies ist der einfachste Weg, um benutzerdefinierte Widgets zu erstellen.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors 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>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei 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;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei 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>Custom Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java Dies zeigt die Erstellung eines benutzerdefinierten Widgets.

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.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

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();
      private boolean enabled = true;

      public boolean isEnabled() {
         return enabled;
      }

      public void setEnabled(boolean enabled) {
         this.enabled = enabled;
      }

      /**
       * Style this widget using .optionalTextWidget CSS class.<br/>
       * Style textbox using .optionalTextBox CSS class.<br/>
       * Style checkbox using .optionalCheckBox CSS class.<br/>
       * 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.
         HorizontalPanel panel = new HorizontalPanel();
         // panel.setBorderWidth(1);
         panel.setSpacing(10);
         panel.add(checkBox);
         panel.add(textBox);

         // all composites must call initWidget() in their constructors.
         initWidget(panel);
         
         //set style name for entire widget
         setStyleName("optionalTextWidget");
         
         //set style name for text box
         textBox.setStyleName("optionalTextBox");
         
         //set style name for check box
         checkBox.setStyleName("optionalCheckBox");
         textBox.setWidth("200");
         
         // Set the check box's caption, and check it by default.
         checkBox.setText(caption);
         checkBox.setValue(enabled);
         checkBox.addClickHandler(this);
         enableTextBox(enabled,checkBox.getValue());
      }

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

      private void enableTextBox(boolean enable,boolean isChecked){
         enable = (enable && isChecked) || (!enable && !isChecked);
         textBox.setStyleDependentName("disabled", !enable);
         textBox.setEnabled(enable);	  
      }
   }

   public void onModuleLoad() {
      // Create an optional text box and add it to the root panel.
      OptionalTextBox otb = new OptionalTextBox(
         "Want to explain the solution?");
      otb.setEnabled(true);
      RootPanel.get().add(otb);
   }    
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

You can notice following points

Das Erstellen eines benutzerdefinierten Widgets durch Erweitern des zusammengesetzten Widgets ist ziemlich einfach.
Wir haben ein Widget mit den in GWT integrierten Widgets TextBox und CheckBox erstellt und dabei das Konzept der Wiederverwendbarkeit verwendet.
TextBox wird je nach Status des Kontrollkästchens deaktiviert / aktiviert. Wir haben eine API zum Aktivieren / Deaktivieren des Steuerelements bereitgestellt.
Wir haben interne Widgets-Stile über dokumentierte CSS-Stile verfügbar gemacht.