GWT - Widget SuggestionBox

introduction

le SuggestionBoxwidget représente une zone de texte ou une zone de texte qui affiche un ensemble préconfiguré de sélections correspondant à l'entrée de l'utilisateur. Chaque suggestBox est associé à un seul suggestOracle. SuggérezOracle est utilisé pour fournir un ensemble de sélections en fonction d'une chaîne de requête spécifique.

Déclaration de classe

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

public final class SuggestBox
   extends Composite
      implements HasText, HasFocus, HasAnimation, 
         SourcesClickEvents, SourcesFocusEvents, 
            SourcesChangeEvents, SourcesKeyboardEvents, 
               FiresSuggestionEvents

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-SuggestBox { }

.gwt-SuggestBoxPopup { }

.gwt-SuggestBoxPopup .item { }

.gwt-SuggestBoxPopup .item-selected { }

.gwt-SuggestBoxPopup .suggestPopupTopLeft { }

.gwt-SuggestBoxPopup .suggestPopupTopLeftInner { }

.gwt-SuggestBoxPopup .suggestPopupTopCenter { }

.gwt-SuggestBoxPopup .suggestPopupTopCenterInner { }

.gwt-SuggestBoxPopup .suggestPopupTopRight { }

.gwt-SuggestBoxPopup .suggestPopupTopRightInner { }

.gwt-SuggestBoxPopup .suggestPopupMiddleLeft { }

.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner { }

.gwt-SuggestBoxPopup .suggestPopupMiddleCenter { }

.gwt-SuggestBoxPopup .suggestPopupMiddleCenterInner { }

.gwt-SuggestBoxPopup .suggestPopupMiddleRight { }

.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner { }

.gwt-SuggestBoxPopup .suggestPopupBottomLeft { }

.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner { }

.gwt-SuggestBoxPopup .suggestPopupBottomCenter { }

.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner { }

.gwt-SuggestBoxPopup .suggestPopupBottomRight { }

.gwt-SuggestBoxPopup .suggestPopupBottomRightInner { }

Constructeurs de classe

N ° Sr. Constructeur et description
1

SuggestBox()

Constructeur pour la boîte à suggestions.
2

SuggestBox(SuggestOracle oracle)

Constructeur pour la boîte à suggestions.
3

SuggestBox(SuggestOracle oracle, TextBoxBase box)

Constructeur pour la boîte à suggestions.

Méthodes de classe

N ° Sr. Nom de la fonction et description
1

void addChangeListener(ChangeListener listener)

Ajoute un écouteur pour recevoir les événements de modification dans la zone de texte de la boîte de suggestion.
2

void addClickListener(ClickListener listener)

Ajoute un écouteur pour recevoir des événements de clic dans la zone de texte de la boîte de suggestion.
3

void addEventHandler(SuggestionHandler handler)

Ajoute une interface de gestionnaire pour recevoir des événements de suggestion.
4

void addFocusListener(FocusListener listener)

Ajoute un écouteur pour recevoir les événements de focus sur la zone de texte de la boîte de suggestion.
5

void addKeyboardListener(KeyboardListener listener)

Ajoute un écouteur pour recevoir les événements de clavier dans la zone de texte de la boîte de suggestion.
6

int getLimit()

Obtient la limite du nombre de suggestions à afficher pour cette zone.
sept

SuggestOracle getSuggestOracle()

Obtient le suggestOracle de la boîte de suggestions.
8

int getTabIndex()

Obtient la position du widget dans l'index de l'onglet.
9

java.lang.String getText()

Obtient le texte de cet objet.
dix

boolean isAnimationEnabled()

Obtient si l'animation est activée ou non.
11

protected void onEnsureDebugId(java.lang.String baseID)

Éléments concernés: -popup = Le popup qui apparaît avec des suggestions. -items-item # = L'élément suggéré à l'index spécifié.
12

void removeChangeListener(ChangeListener listener)

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

void removeClickListener(ClickListener listener)

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

void removeEventHandler(SuggestionHandler handler)

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

void removeFocusListener(FocusListener listener)

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

void removeKeyboardListener(KeyboardListener listener)

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

void setAccessKey(char key)

Définit la «clé d'accès» du widget.
18

void setAnimationEnabled(boolean enable)

Activez ou désactivez les animations.
19

void setFocus(boolean focused)

Focalisez / détachez explicitement ce widget.
20

void setLimit(int limit)

Définit la limite du nombre de suggestions que l'oracle doit fournir.
21

void setPopupStyleName(java.lang.String style)

Définit le nom du style de la fenêtre contextuelle de suggestion.
22

void setTabIndex(int index)

Définit la position du widget dans l'index de l'onglet.
23

void setText(java.lang.String text)

Définit le texte de cet objet.

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

  • java.lang.Object

Exemple de widget SuggestionBox

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget SuggestionBox 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-SuggestBox { 
   color: green;
}

.gwt-SuggestBoxPopup { 
   border: thin 1px solid green; 
   width: 200px;
}

.gwt-SuggestBoxPopup.item { 
   color: red; 
}

.gwt-SuggestBoxPopup .item-selected { 
   color: gray;
}

.gwt-SuggestBoxPopup .suggestPopupTopLeft { 
   border: thin 1px solid green; 
}

.gwt-SuggestBoxPopup .suggestPopupTopLeftInner { 
   border: thin 1px solid green; 
}

.gwt-SuggestBoxPopup .suggestPopupTopCenter { 
   border: thin 1px solid green; 
}

.gwt-SuggestBoxPopup .suggestPopupTopCenterInner { 
   border: thin 1px solid green; 
}

.gwt-SuggestBoxPopup .suggestPopupTopRight {
   border: thin 1px solid green; 
}

.gwt-SuggestBoxPopup .suggestPopupTopRightInner {
   border: thin 1px solid green; 
}

.gwt-SuggestBoxPopup .suggestPopupMiddleLeft { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupMiddleCenter { 
   border: thin 1px solid green; width:200px;
}

.gwt-SuggestBoxPopup .suggestPopupMiddleCenterInner { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupMiddleRight { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupBottomLeft {
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupBottomCenter {
   border: thin 1px solid green;
 }

.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupBottomRight { 
   border: thin 1px solid green;
}

.gwt-SuggestBoxPopup .suggestPopupBottomRightInner { 
   border: thin 1px solid 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>SuggestionBox 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 SuggestionBox.

package com.tutorialspoint.client;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      //create the suggestion data 	  
      MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();  
      oracle.add("A");
      oracle.add("AB");
      oracle.add("ABC");
      oracle.add("ABCD");
      oracle.add("B");
      oracle.add("BC");
      oracle.add("BCD");
      oracle.add("BCDE");
      oracle.add("C");
      oracle.add("CD");
      oracle.add("CDE");
      oracle.add("CDEF");
      oracle.add("D");
      oracle.add("DE");
      oracle.add("DEF");
      oracle.add("DEFG");
      
      //create the suggestion box and pass it the data created above
      SuggestBox suggestionBox = new SuggestBox(oracle);
 
      //set width to 200px.
      suggestionBox.setWidth("200");
      
      // Add suggestionbox to the root panel. 
      VerticalPanel panel = new VerticalPanel();
      panel.add(suggestionBox);

      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 -