GWT - Widget ListBox

introduction

le ListBox widget représente une liste de choix pour l'utilisateur, sous forme de zone de liste ou de liste déroulante.

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.client.ui.ListBox classe -

public class ListBox
   extends FocusWidget
      implements SourcesChangeEvents, HasName

Règles de style CSS

Les règles de style CSS par défaut suivantes seront appliquées à tous les widgets ListBox. Vous pouvez le remplacer selon vos besoins.

.gwt-ListBox {}

Constructeurs de classe

N ° Sr. Constructeur et description
1

ListBox()

Crée une zone de liste vide en mode de sélection unique.

2

ListBox(boolean isMultipleSelect)

Crée une zone de liste vide.

3

ListBox(Element element)

Ce constructeur peut être utilisé par des sous-classes pour utiliser explicitement un élément existant.

Méthodes de classe

N ° Sr. Nom de la fonction et description
1

void addItem(java.lang.String item)

Ajoute un élément à la zone de liste.

2

void addItem(java.lang.String item, java.lang.String value)

Ajoute un élément à la zone de liste, en spécifiant une valeur initiale pour l'élément.

3

void clear()

Supprime tous les éléments de la zone de liste.

4

int getItemCount()

Obtient le nombre d'éléments présents dans la zone de liste.

5

java.lang.String getItemText(int index)

Obtient le texte associé à l'élément à l'index spécifié.

6

java.lang.String getName()

Obtient le nom du widget.

sept

int getSelectedIndex()

Obtient l'élément actuellement sélectionné.

8

java.lang.String getValue(int index)

Obtient la valeur associée à l'élément à un index donné.

9

int getVisibleItemCount()

Obtient le nombre d'éléments visibles.

dix

void insertItem(java.lang.String item, int index)

Insère un élément dans la zone de liste.

11

void insertItem(java.lang.String item, java.lang.String value, int index)

Insère un élément dans la zone de liste, en spécifiant une valeur initiale pour l'élément.

12

boolean isItemSelected(int index)

Détermine si un élément de liste individuel est sélectionné.

13

boolean isMultipleSelect()

Obtient si cette liste autorise la sélection multiple.

14

void onBrowserEvent(Event event)

Lancé chaque fois qu'un événement de navigateur est reçu.

15

protected void onEnsureDebugId(java.lang.String baseID)

Éléments concernés: -item # = l'option à l'index spécifié.

16

void removeChangeListener(ChangeListener listener)

Supprime une interface d'écoute précédemment ajoutée.

17

void removeItem(int index)

Supprime l'élément à l'index spécifié.

18

void setItemSelected(int index, boolean selected)

Définit si un élément de liste individuel est sélectionné.

19

void setItemText(int index,java.lang.String text)

Définit le texte à un index donné.

20

void setMultipleSelect(boolean multiple)

Définit si cette liste autorise plusieurs sélections.

21

void setName(java.lang.String name)

Définit le nom du widget.

22

void setSelectedIndex(int index)

Définit l'index actuellement sélectionné.

23

void setValue(int index, java.lang.String value)

Définit la valeur associée à l'élément à un index donné.

24

void setVisibleItemCount(int visibleItems)

Définit le nombre d'éléments visibles.

25

static ListBox wrap(Element element)

Crée un widget ListBox qui encapsule un élément <select> existant.

26

void addChangeListener(ChangeListener listener)

Ajoute une interface d'écoute pour recevoir les événements de modification.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.client.ui.FocusWidget

  • java.lang.Object

Exemple de widget ListBox

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget ListBox dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2 Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;   
}

Voici le contenu du fichier hôte HTML modifié 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>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du 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);
   }	
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -