GWT - Widget PushButton

introduction

le PushButton widget représente un bouton poussoir standard avec un style personnalisé.

Déclaration de classe

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

public class PushButton
   extends CustomButton

Règles de style CSS

Les règles de style CSS par défaut suivantes seront appliquées à tous les widgets PushButton. Vous pouvez le remplacer selon vos besoins.

.gwt-PushButton-up {}

.gwt-PushButton-down {}

.gwt-PushButton-up-hovering {}

.gwt-PushButton-down-hovering {}

.gwt-PushButton-up-disabled {}

.gwt-PushButton-down-disabled {}

Constructeurs de classe

N ° Sr.	Constructeur et description
1	PushButton() Constructeur pour PushButton.
2	PushButton(Image upImage) Crée un PushButton avec une image d'état haut.
3	PushButton(Image upImage, ClickListener listener) Crée un PushButton avec une image d'état haut et clickListener.
4	PushButton(Image upImage, Image downImage) Crée un PushButton avec une image d'état haut.
5	PushButton(Image upImage, Image downImage, ClickListener listener) Crée un PushButton avec une image d'état haut.
6	PushButton(java.lang.String upText) Crée un PushButton avec un texte d'état haut.
sept	PushButton(java.lang.String upText, ClickListener listener) Crée un PushButton avec un texte d'état et un écouteur de clics.
8	PushButton(java.lang.String upText, java.lang.String downText) Crée un PushButton avec un texte d'état haut et bas.
9	PushButton(java.lang.String upText, java.lang.String downText, ClickListener listener) Crée un PushButton avec un état haut, un texte d'état bas et un écouteur de clic.

Méthodes de classe

N ° Sr.	Nom et description de la fonction
1	protected void onClick() Appelé lorsque l'utilisateur a terminé de cliquer sur ce bouton.
2	protected void onClickCancel() Appelé lorsque l'utilisateur abandonne un clic en cours; par exemple, en faisant glisser la souris en dehors du bouton avant de relâcher le bouton de la souris.
3	protected void onClickStart() Appelé lorsque l'utilisateur commence à cliquer sur ce bouton.

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.FocusWidget
com.google.gwt.user.client.ui.CustomWidget
java.lang.Object

Exemple de widget PushButton

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

.gwt-PushButton-up {
   color:green;
}

.gwt-PushButton-down {
   color:blue;
}

.gwt-PushButton-up-hovering {
   color:pink;
}

.gwt-PushButton-down-hovering {
   color:aqua;
}

.gwt-PushButton-up-disabled {
   color:lime;
}

.gwt-PushButton-down-disabled {
   color:maroon;
}

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>PushButton 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 PushButton.

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.PushButton;
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 a push button
      PushButton pushButton = new PushButton("Click Me!");

      //create a push button
      PushButton pushButton1 = new PushButton("Click Me!");

      //disable a push button
      pushButton1.setEnabled(false);
      
      //add a clickListener to the push button
      pushButton.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            Window.alert("Hello World!");
         }
      });

      // Add push buttons to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(pushButton);
      panel.add(pushButton1);
      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 -

Lorsque vous cliquez Click Me bouton, il affichera un message d'alerte Hello World!

Vous pouvez voir la couleur du texte du bouton et son état changera avec votre interaction.

Survolez le bouton, la couleur sera rose.
Appuyez sur le bouton, la couleur sera aqua.
Relâchez le bouton, la couleur sera verte.

↰ Previous page