GWT - Widget ToggleButton

introduzione

Il ToggleButton widget rappresenta un elegante pulsante con stato che consente all'utente di alternare tra gli stati su e giù.

Dichiarazione di classe

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

public class ToggleButton
   extends CustomButton

Regole di stile CSS

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

.gwt-ToggleButton-up {}

.gwt-ToggleButton-down {}

.gwt-ToggleButton-up-hovering {}

.gwt-ToggleButton-down-hovering {}

.gwt-ToggleButton-up-disabled {}

.gwt-ToggleButton-down-disabled {}

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	ToggleButton() Costruttore per ToggleButton.
2	ToggleButton(Image upImage) Crea un ToggleButton con l'immagine di stato su.
3	ToggleButton(Image upImage, ClickListener listener) Crea un ToggleButton con l'immagine di stato in alto e clickListener.
4	ToggleButton(Image upImage, Image downImage) Crea un ToggleButton con l'immagine di stato su.
5	ToggleButton(Image upImage, Image downImage, ClickListener listener) Crea un ToggleButton con l'immagine di stato su.
6	ToggleButton(java.lang.String upText) Crea un ToggleButton con il testo di stato verso l'alto.
7	ToggleButton(java.lang.String upText, ClickListener listener) Crea un ToggleButton con testo di stato in alto e clicklistener.
8	ToggleButton(java.lang.String upText, java.lang.String downText) Crea un ToggleButton con testo di stato su e giù.
9	ToggleButton(java.lang.String upText, java.lang.String downText, ClickListener listener) Crea un ToggleButton 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	boolean isDown() Questo pulsante è abbassato?
2	protected void onClick() Chiamato quando l'utente finisce di fare clic su questo pulsante.
3	void setDown(boolean down) Imposta se questo pulsante è in basso.

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 ToggleButton

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget ToggleButton in GWT. Segui i seguenti passaggi 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-ToggleButton-up {
   color:green;
}

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

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

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

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

.gwt-ToggleButton-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>ToggleButton 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 ToggleButton.

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
	  
      //create toggle buttons
      ToggleButton toggleButton = new ToggleButton("Click Me!");
      ToggleButton toggleButton1 = new ToggleButton("Click Me!");
      
      //disable a toggle button
      toggleButton1.setEnabled(false);
      
      //add a clickListener to the toggle button
      toggleButton.addClickHandler(new ClickHandler() {
        @Override
         public void onClick(ClickEvent event) {
            Window.alert("Hello World!");
         }
      });
	   
      // Add toggle button to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);            
      panel.add(toggleButton);
      panel.add(toggleButton1);

      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 che il colore del testo del pulsante cambierà con la tua interazione.

Passa il mouse sopra il pulsante, il colore sarà rosa.
Premere il pulsante, il colore sarà blu.
Rilasciare il pulsante, il pulsante rimarrà premuto.

↰ Previous page