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

Métodos de clase

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 -

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: