GWT - Widget ToggleButton

Introducción

los ToggleButton El widget representa un elegante botón con estado que permite al usuario alternar entre los estados hacia arriba y hacia abajo.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.ToggleButton clase -

public class ToggleButton
   extends CustomButton

Reglas de estilo CSS

Las siguientes reglas de estilo CSS predeterminadas se aplicarán a todos los widgets ToggleButton. Puede anularlo según sus requisitos.

.gwt-ToggleButton-up {}

.gwt-ToggleButton-down {}

.gwt-ToggleButton-up-hovering {}

.gwt-ToggleButton-down-hovering {}

.gwt-ToggleButton-up-disabled {}

.gwt-ToggleButton-down-disabled {}

Constructores de clases

No Señor.	Constructor y descripción
1	ToggleButton() Constructor para ToggleButton.
2	ToggleButton(Image upImage) Crea un ToggleButton con una imagen de estado.
3	ToggleButton(Image upImage, ClickListener listener) Crea un ToggleButton con la imagen de estado hacia arriba y clickListener.
4	ToggleButton(Image upImage, Image downImage) Crea un ToggleButton con una imagen de estado.
5	ToggleButton(Image upImage, Image downImage, ClickListener listener) Crea un ToggleButton con una imagen de estado.
6	ToggleButton(java.lang.String upText) Crea un ToggleButton con texto de estado ascendente.
7	ToggleButton(java.lang.String upText, ClickListener listener) Crea un ToggleButton con texto de estado ascendente y clicklistener.
8	ToggleButton(java.lang.String upText, java.lang.String downText) Crea un ToggleButton con texto de estado hacia arriba y hacia abajo.
9	ToggleButton(java.lang.String upText, java.lang.String downText, ClickListener listener) Crea un ToggleButton con estado hacia arriba, texto de estado hacia abajo y escucha de clic.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	boolean isDown() ¿Está este botón abajo?
2	protected void onClick() Llamado cuando el usuario termina de hacer clic en este botón.
3	void setDown(boolean down) Establece si este botón está pulsado.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de widget ToggleButton

Este ejemplo lo llevará a través de pasos simples para mostrar el uso de un widget ToggleButton en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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;
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

Cuando haces clic Click Me botón, mostrará un mensaje de alerta Hello World!

Puede ver que el color del texto del botón cambiará con su interacción.

Coloca el cursor sobre el botón, el color será rosa.
Presione el botón, el color será azul.
Suelte el botón, el botón permanecerá presionado.

↰ Previous page