GWT - Widget SuggestionBox

introduzione

Il SuggestionBoxwidget rappresenta una casella di testo o un'area di testo che visualizza un insieme preconfigurato di selezioni che corrispondono all'input dell'utente. Ogni SuggestBox è associato a un singolo SuggestOracle. SuggestOracle viene utilizzato per fornire una serie di selezioni data una specifica stringa di query.

Dichiarazione di classe

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

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

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

Costruttori di classi

Sr.No. Costruttore e descrizione
1

SuggestBox()

Costruttore per la casella dei suggerimenti.
2

SuggestBox(SuggestOracle oracle)

Costruttore per la casella dei suggerimenti.
3

SuggestBox(SuggestOracle oracle, TextBoxBase box)

Costruttore per la casella dei suggerimenti.

Metodi di classe

Sr.No. Nome e descrizione della funzione
1

void addChangeListener(ChangeListener listener)

Aggiunge un listener per ricevere eventi di modifica nella casella di testo del SuggestBox.
2

void addClickListener(ClickListener listener)

Aggiunge un listener per ricevere gli eventi di clic nella casella di testo del SuggestBox.
3

void addEventHandler(SuggestionHandler handler)

Aggiunge un'interfaccia gestore per ricevere eventi di suggerimento.
4

void addFocusListener(FocusListener listener)

Aggiunge un listener per ricevere eventi di attivazione nella casella di testo del SuggestBox.
5

void addKeyboardListener(KeyboardListener listener)

Aggiunge un listener per ricevere gli eventi della tastiera nella casella di testo del SuggestBox.
6

int getLimit()

Ottiene il limite per il numero di suggerimenti che devono essere visualizzati per questa casella.
7

SuggestOracle getSuggestOracle()

Ottiene il SuggestOracle della casella dei suggerimenti.
8

int getTabIndex()

Ottiene la posizione del widget nell'indice della scheda.
9

java.lang.String getText()

Ottiene il testo di questo oggetto.
10

boolean isAnimationEnabled()

Ottiene se l'animazione è abilitata o meno.
11

protected void onEnsureDebugId(java.lang.String baseID)

Elementi interessati: -popup = Il popup che appare con i suggerimenti. -items-item # = L'elemento suggerito all'indice specificato.
12

void removeChangeListener(ChangeListener listener)

Rimuove un'interfaccia listener aggiunta in precedenza.
13

void removeClickListener(ClickListener listener)

Rimuove un'interfaccia listener aggiunta in precedenza.
14

void removeEventHandler(SuggestionHandler handler)

Rimuove un'interfaccia listener aggiunta in precedenza.
15

void removeFocusListener(FocusListener listener)

Rimuove un'interfaccia listener aggiunta in precedenza.
16

void removeKeyboardListener(KeyboardListener listener)

Rimuove un'interfaccia listener aggiunta in precedenza.
17

void setAccessKey(char key)

Imposta la "chiave di accesso" del widget.
18

void setAnimationEnabled(boolean enable)

Abilita o disabilita le animazioni.
19

void setFocus(boolean focused)

Metti a fuoco / non focalizza esplicitamente questo widget.
20

void setLimit(int limit)

Imposta il limite al numero di suggerimenti che l'oracolo dovrebbe fornire.
21

void setPopupStyleName(java.lang.String style)

Imposta il nome dello stile del popup dei suggerimenti.
22

void setTabIndex(int index)

Imposta la posizione del widget nell'indice della scheda.
23

void setText(java.lang.String text)

Imposta il testo di questo oggetto.

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

  • java.lang.Object

Esempio di widget SuggestionBox

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget SuggestionBox 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-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;
}

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>SuggestionBox 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 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);
   }	
}

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: