GWT - Widget d'étiquette

introduction

le Labelcan ne contient que du texte arbitraire et ne peut pas être interprété comme du HTML. Ce widget utilise un élément <div>, provoquant son affichage avec une disposition de bloc.

Déclaration de classe

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

public class Label 
   extends Widget 
      implements HasHorizontalAlignment, HasText, HasWordWrap, 
         HasDirection, HasClickHandlers, SourcesClickEvents, 
            SourcesMouseEvents, HasAllMouseHandlers

Règles de style CSS

La règle de style CSS par défaut suivante sera appliquée à toutes les étiquettes. Vous pouvez le remplacer selon vos besoins.

.gwt-Label { }

Constructeurs de classe

N ° Sr.	Constructeur et description
1	Label() Crée une étiquette vide.
2	protected Label(Element element) Ce constructeur peut être utilisé par des sous-classes pour utiliser explicitement un élément existant.
3	Label(java.lang.String text) Crée une étiquette avec le texte spécifié.
4	Label(java.lang.String text, boolean wordWrap) Crée une étiquette avec le texte spécifié.

Méthodes de classe

N ° Sr.	Méthode et description
1	void addClickListener(ClickListener listener) Ajoute une interface d'écoute pour recevoir les événements de clic.
2	void addMouseListener(MouseListener listener) Ajoute une interface d'écoute pour recevoir les événements de souris.
3	void addMouseWheelListener(MouseWheelListener listener) Obtient le panneau parent de ce widget.
4	HasDirection.Direction getDirection() Obtient la directionnalité du widget.
5	HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment() Obtient l'alignement horizontal.
6	java.lang.String getText() Obtient le texte de cet objet.
sept	boolean getWordWrap() Obtient si le retour à la ligne est activé.
8	void onBrowserEvent(Event event) Supprime une interface d'écoute précédemment ajoutée.
9	void removeClickListener(ClickListener listener) Cette méthode est appelée immédiatement avant qu'un widget ne soit détaché du document du navigateur.
dix	void removeMouseListener(MouseListener listener) Supprime une interface d'écoute précédemment ajoutée.
11	void removeMouseWheelListener(MouseWheelListener listener) Supprime une interface d'écoute précédemment ajoutée.
12	void setDirection(HasDirection.Direction direction) Définit la directionnalité d'un widget.
13	void setHorizontalAlignment(HasHorizontalAlignment. HorizontalAlignmentConstant align) Définit l'alignement horizontal.
14	void setText(java.lang.String text) Définit le texte de cet objet.
15	void setWordWrap(boolean wrap) Définit si le retour à la ligne est activé.
16	static Label wrap(Element element) Crée un widget Label qui encapsule un élément <div> ou <span> existant.

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

Exemple de widget d'étiquette

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget d'étiquette 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-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

.gwt-Green-Border{ 
   border:1px solid green;
}

.gwt-Blue-Border{ 
   border:1px solid blue;
}

Voici le contenu du fichier hôte HTML modifié war/HelloWorld.html pour accueillir deux boutons.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Label 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 Label.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
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 {
   public void onModuleLoad() {
      // create two Labels
      Label label1 = new Label("This is first GWT Label");
      Label label2 = new Label("This is second GWT Label");

      // use UIObject methods to set label properties.
      label1.setTitle("Title for first Lable");
      label1.addStyleName("gwt-Green-Border");
      label2.setTitle("Title for second Lable");
      label2.addStyleName("gwt-Blue-Border");

      // add labels to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(label1);
      panel.add(label2);

      RootPanel.get("gwtContainer").add(panel);
   }
}

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