GWT: widget ListBox

Introducción

los ListBox El widget representa una lista de opciones para el usuario, ya sea como un cuadro de lista o como una lista desplegable.

Declaración de clase

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

public class ListBox
   extends FocusWidget
      implements SourcesChangeEvents, HasName

Reglas de estilo CSS

Las siguientes reglas de estilo CSS predeterminadas se aplicarán a todo el widget ListBox. Puede anularlo según sus requisitos.

.gwt-ListBox {}

Constructores de clases

No Señor.	Constructor y descripción
1	ListBox() Crea un cuadro de lista vacío en el modo de selección única.
2	ListBox(boolean isMultipleSelect) Crea un cuadro de lista vacío.
3	ListBox(Element element) Este constructor puede ser usado por subclases para usar explícitamente un elemento existente.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	void addItem(java.lang.String item) Agrega un elemento al cuadro de lista.
2	void addItem(java.lang.String item, java.lang.String value) Agrega un elemento al cuadro de lista, especificando un valor inicial para el elemento.
3	void clear() Elimina todos los elementos del cuadro de lista.
4	int getItemCount() Obtiene el número de elementos presentes en el cuadro de lista.
5	java.lang.String getItemText(int index) Obtiene el texto asociado con el elemento en el índice especificado.
6	java.lang.String getName() Obtiene el nombre del widget.
7	int getSelectedIndex() Obtiene el elemento seleccionado actualmente.
8	java.lang.String getValue(int index) Obtiene el valor asociado con el elemento en un índice determinado.
9	int getVisibleItemCount() Obtiene el número de elementos visibles.
10	void insertItem(java.lang.String item, int index) Inserta un elemento en el cuadro de lista.
11	void insertItem(java.lang.String item, java.lang.String value, int index) Inserta un elemento en el cuadro de lista, especificando un valor inicial para el elemento.
12	boolean isItemSelected(int index) Determina si se selecciona un elemento de lista individual.
13	boolean isMultipleSelect() Obtiene si esta lista permite la selección múltiple.
14	void onBrowserEvent(Event event) Se activa cada vez que se recibe un evento del navegador.
15	protected void onEnsureDebugId(java.lang.String baseID) Elementos afectados: -item # = la opción en el índice especificado.
dieciséis	void removeChangeListener(ChangeListener listener) Elimina una interfaz de escucha agregada anteriormente.
17	void removeItem(int index) Elimina el elemento en el índice especificado.
18	void setItemSelected(int index, boolean selected) Establece si se selecciona un elemento de lista individual.
19	void setItemText(int index,java.lang.String text) Establece el texto en un índice determinado.
20	void setMultipleSelect(boolean multiple) Establece si esta lista permite múltiples selecciones.
21	void setName(java.lang.String name) Establece el nombre del widget.
22	void setSelectedIndex(int index) Establece el índice seleccionado actualmente.
23	void setValue(int index, java.lang.String value) Establece el valor asociado con el elemento en un índice determinado.
24	void setVisibleItemCount(int visibleItems) Establece el número de elementos visibles.
25	static ListBox wrap(Element element) Crea un widget ListBox que envuelve un elemento <select> existente.
26	void addChangeListener(ChangeListener listener) Agrega una interfaz de escucha para recibir eventos de cambio.

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
java.lang.Object

Ejemplo de widget ListBox

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget ListBox 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-ListBox{ 
   color:green;   
}

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

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {

      // Make a new list box, adding a few items to it.
      ListBox listBox1 = new ListBox();
      listBox1.addItem("First");
      listBox1.addItem("Second");
      listBox1.addItem("Third");
      listBox1.addItem("Fourth");
      listBox1.addItem("Fifth");

      // Make a new list box, adding a few items to it.
      ListBox listBox2 = new ListBox();
      listBox2.addItem("First");
      listBox2.addItem("Second");
      listBox2.addItem("Third");
      listBox2.addItem("Fourth");
      listBox2.addItem("Fifth");

      // Make enough room for all five items 
      listBox1.setVisibleItemCount(5);
	  
      //setting itemcount value to 1 turns listbox into a drop-down list.
      listBox2.setVisibleItemCount(1);

      // Add listboxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(listBox1);
      panel.add(listBox2);

      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:

↰ Previous page