GWT: widget de cuadro de sugerencias

Introducción

los SuggestionBoxwidget representa un cuadro de texto o un área de texto que muestra un conjunto preconfigurado de selecciones que coinciden con la entrada del usuario. Cada SugerirBox está asociado con un solo SugerirOracle. SugiereOracle se utiliza para proporcionar un conjunto de selecciones dada una cadena de consulta específica.

Declaración de clase

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

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

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

Constructores de clases

No Señor. Constructor y descripción
1

SuggestBox()

Constructor para buzón de sugerencias.
2

SuggestBox(SuggestOracle oracle)

Constructor para buzón de sugerencias.
3

SuggestBox(SuggestOracle oracle, TextBoxBase box)

Constructor para buzón de sugerencias.

Métodos de clase

No Señor. Nombre y descripción de la función
1

void addChangeListener(ChangeListener listener)

Agrega un oyente para recibir eventos de cambio en el cuadro de texto del cuadro de sugerencias.
2

void addClickListener(ClickListener listener)

Agrega un oyente para recibir eventos de clic en el cuadro de texto del cuadro de sugerencias.
3

void addEventHandler(SuggestionHandler handler)

Agrega una interfaz de controlador para recibir eventos de sugerencias.
4

void addFocusListener(FocusListener listener)

Agrega un oyente para recibir eventos de enfoque en el cuadro de texto del cuadro de sugerencias.
5

void addKeyboardListener(KeyboardListener listener)

Agrega un oyente para recibir eventos de teclado en el cuadro de texto del cuadro de sugerencias.
6

int getLimit()

Obtiene el límite del número de sugerencias que se deben mostrar para este cuadro.
7

SuggestOracle getSuggestOracle()

Obtiene el SugerirOracle del cuadro de sugerencias.
8

int getTabIndex()

Obtiene la posición del widget en el índice de la pestaña.
9

java.lang.String getText()

Obtiene el texto de este objeto.
10

boolean isAnimationEnabled()

Obtiene si la animación está habilitada o no.
11

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afectados: -popup = La ventana emergente que aparece con sugerencias. -items-item # = El elemento sugerido en el índice especificado.
12

void removeChangeListener(ChangeListener listener)

Elimina una interfaz de escucha agregada anteriormente.
13

void removeClickListener(ClickListener listener)

Elimina una interfaz de escucha agregada anteriormente.
14

void removeEventHandler(SuggestionHandler handler)

Elimina una interfaz de escucha agregada anteriormente.
15

void removeFocusListener(FocusListener listener)

Elimina una interfaz de escucha agregada anteriormente.
dieciséis

void removeKeyboardListener(KeyboardListener listener)

Elimina una interfaz de escucha agregada anteriormente.
17

void setAccessKey(char key)

Establece la 'clave de acceso' del widget.
18

void setAnimationEnabled(boolean enable)

Habilita o deshabilita animaciones.
19

void setFocus(boolean focused)

Enfoque / desenfoque explícitamente este widget.
20

void setLimit(int limit)

Establece el límite de la cantidad de sugerencias que debe proporcionar el oráculo.
21

void setPopupStyleName(java.lang.String style)

Establece el nombre del estilo de la ventana emergente de sugerencias.
22

void setTabIndex(int index)

Establece la posición del widget en el índice de la pestaña.
23

void setText(java.lang.String text)

Establece el texto de este objeto.

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

  • java.lang.Object

Ejemplo de widget SuggestionBox

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

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>SuggestionBox 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 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 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: