GWT - Widget ListBox

introduzione

Il ListBox widget rappresenta un elenco di scelte per l'utente, sia come casella di riepilogo che come elenco a discesa.

Dichiarazione di classe

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

public class ListBox
   extends FocusWidget
      implements SourcesChangeEvents, HasName

Regole di stile CSS

Le seguenti regole di stile CSS predefinite verranno applicate a tutto il widget ListBox. Puoi sovrascriverlo secondo le tue esigenze.

.gwt-ListBox {}

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	ListBox() Crea una casella di riepilogo vuota in modalità di selezione singola.
2	ListBox(boolean isMultipleSelect) Crea una casella di riepilogo vuota.
3	ListBox(Element element) Questo costruttore può essere utilizzato dalle sottoclassi per utilizzare esplicitamente un elemento esistente.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	void addItem(java.lang.String item) Aggiunge un elemento alla casella di riepilogo.
2	void addItem(java.lang.String item, java.lang.String value) Aggiunge un elemento alla casella di riepilogo, specificando un valore iniziale per l'elemento.
3	void clear() Rimuove tutti gli elementi dalla casella di riepilogo.
4	int getItemCount() Ottiene il numero di elementi presenti nella casella di riepilogo.
5	java.lang.String getItemText(int index) Ottiene il testo associato all'elemento in corrispondenza dell'indice specificato.
6	java.lang.String getName() Ottiene il nome del widget.
7	int getSelectedIndex() Ottiene l'elemento attualmente selezionato.
8	java.lang.String getValue(int index) Ottiene il valore associato all'elemento in un determinato indice.
9	int getVisibleItemCount() Ottiene il numero di elementi visibili.
10	void insertItem(java.lang.String item, int index) Inserisce un elemento nella casella di riepilogo.
11	void insertItem(java.lang.String item, java.lang.String value, int index) Inserisce un elemento nella casella di riepilogo, specificando un valore iniziale per l'elemento.
12	boolean isItemSelected(int index) Determina se è selezionata una singola voce di elenco.
13	boolean isMultipleSelect() Ottiene se questo elenco consente la selezione multipla.
14	void onBrowserEvent(Event event) Attivato ogni volta che viene ricevuto un evento del browser.
15	protected void onEnsureDebugId(java.lang.String baseID) Elementi interessati: -item # = l'opzione all'indice specificato.
16	void removeChangeListener(ChangeListener listener) Rimuove un'interfaccia listener aggiunta in precedenza.
17	void removeItem(int index) Rimuove l'elemento in corrispondenza dell'indice specificato.
18	void setItemSelected(int index, boolean selected) Determina se viene selezionata una singola voce di elenco.
19	void setItemText(int index,java.lang.String text) Imposta il testo a un dato indice.
20	void setMultipleSelect(boolean multiple) Determina se questo elenco consente più selezioni.
21	void setName(java.lang.String name) Imposta il nome del widget.
22	void setSelectedIndex(int index) Imposta l'indice attualmente selezionato.
23	void setValue(int index, java.lang.String value) Imposta il valore associato all'elemento in un determinato indice.
24	void setVisibleItemCount(int visibleItems) Imposta il numero di elementi visibili.
25	static ListBox wrap(Element element) Crea un widget ListBox che racchiude un elemento <select> esistente.
26	void addChangeListener(ChangeListener listener) Aggiunge un'interfaccia listener per ricevere eventi di modifica.

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

Esempio di widget ListBox

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget ListBox 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 invariato il resto dei file.
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-ListBox{ 
   color:green;   
}

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>ListBox 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 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 volta che sei pronto con tutte le modifiche fatte, 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:

↰ Previous page