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 -
![](https://assets.edu.lat/gwt/images/gwt_widget_composite.jpg)