GWT - Widget a pulsante

introduzione

Il PushButton widget rappresenta un pulsante di comando standard con uno stile personalizzato.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.PushButton classe -

public class PushButton
   extends CustomButton

Regole di stile CSS

Le seguenti regole di stile CSS predefinite verranno applicate a tutti i widget PushButton. Puoi sovrascriverlo secondo le tue esigenze.

.gwt-PushButton-up {}

.gwt-PushButton-down {}

.gwt-PushButton-up-hovering {}

.gwt-PushButton-down-hovering {}

.gwt-PushButton-up-disabled {}

.gwt-PushButton-down-disabled {}

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	PushButton() Costruttore per PushButton.
2	PushButton(Image upImage) Crea un PushButton con l'immagine di stato su.
3	PushButton(Image upImage, ClickListener listener) Crea un PushButton con immagine di stato su e clickListener.
4	PushButton(Image upImage, Image downImage) Crea un PushButton con l'immagine di stato su.
5	PushButton(Image upImage, Image downImage, ClickListener listener) Crea un PushButton con l'immagine di stato su.
6	PushButton(java.lang.String upText) Crea un PushButton con testo di stato su.
7	PushButton(java.lang.String upText, ClickListener listener) Crea un PushButton con testo di stato in alto e clicklistener.
8	PushButton(java.lang.String upText, java.lang.String downText) Crea un PushButton con testo di stato su e giù.
9	PushButton(java.lang.String upText, java.lang.String downText, ClickListener listener) Crea un PushButton con lo stato su, il testo dello stato giù e il listener di clic.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	protected void onClick() Chiamato quando l'utente finisce di fare clic su questo pulsante.
2	protected void onClickCancel() Chiamato quando l'utente interrompe un clic in corso; ad esempio, trascinando il mouse all'esterno del pulsante prima di rilasciare il pulsante del mouse.
3	protected void onClickStart() Chiamato quando l'utente inizia a fare clic su questo pulsante.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di widget PushButton

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget PushButton in GWT. Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2	Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso del 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);
   }	
}

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:

Quando fai clic su Click Me pulsante, mostrerà un messaggio di avviso Hello World!

Puoi vedere il colore del testo del pulsante e il suo stato cambierà con la tua interazione.

Passa il mouse sopra il pulsante, il colore sarà rosa.
Premere il pulsante, il colore sarà acqua.
Rilascia il pulsante, il colore sarà verde.

↰ Previous page