GWT - Widget da caixa de sugestões

Introdução

o SuggestionBoxwidget representa uma caixa de texto ou área de texto que exibe um conjunto pré-configurado de seleções que correspondem à entrada do usuário. Cada SuggestBox está associado a um único SuggestOracle. O SuggestOracle é usado para fornecer um conjunto de seleções dado uma string de consulta específica.

Declaração de Classe

A seguir está a declaração para com.google.gwt.user.client.ui.SuggestionBox classe -

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

Regras de estilo CSS

As seguintes regras de estilo CSS padrão serão aplicadas a todos os widgets ListBox. Você pode substituí-lo de acordo com seus 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 { }

Construtores de classe

Sr. Não. Construtor e descrição
1

SuggestBox()

Construtor para caixa de sugestões.
2

SuggestBox(SuggestOracle oracle)

Construtor para caixa de sugestões.
3

SuggestBox(SuggestOracle oracle, TextBoxBase box)

Construtor para caixa de sugestões.

Métodos de aula

Sr. Não. Nome e descrição da função
1

void addChangeListener(ChangeListener listener)

Adiciona um ouvinte para receber eventos de alteração na caixa de texto da caixa de sugestões.
2

void addClickListener(ClickListener listener)

Adiciona um ouvinte para receber eventos de clique na caixa de texto da caixa de sugestões.
3

void addEventHandler(SuggestionHandler handler)

Adiciona uma interface de manipulador para receber eventos de sugestão.
4

void addFocusListener(FocusListener listener)

Adiciona um ouvinte para receber eventos de foco na caixa de texto da caixa de sugestões.
5

void addKeyboardListener(KeyboardListener listener)

Adiciona um ouvinte para receber eventos do teclado na caixa de texto da caixa de sugestões.
6

int getLimit()

Obtém o limite para o número de sugestões que devem ser exibidas para esta caixa.
7

SuggestOracle getSuggestOracle()

Obtém o SuggestOracle da caixa de sugestões.
8

int getTabIndex()

Obtém a posição do widget no índice da guia.
9

java.lang.String getText()

Obtém o texto deste objeto.
10

boolean isAnimationEnabled()

Obtém se a animação está habilitada ou não.
11

protected void onEnsureDebugId(java.lang.String baseID)

Elementos afetados: -popup = O pop-up que aparece com sugestões. -items-item # = O item sugerido no índice especificado.
12

void removeChangeListener(ChangeListener listener)

Remove uma interface de ouvinte adicionada anteriormente.
13

void removeClickListener(ClickListener listener)

Remove uma interface de ouvinte adicionada anteriormente.
14

void removeEventHandler(SuggestionHandler handler)

Remove uma interface de ouvinte adicionada anteriormente.
15

void removeFocusListener(FocusListener listener)

Remove uma interface de ouvinte adicionada anteriormente.
16

void removeKeyboardListener(KeyboardListener listener)

Remove uma interface de ouvinte adicionada anteriormente.
17

void setAccessKey(char key)

Define a 'chave de acesso' do widget.
18

void setAnimationEnabled(boolean enable)

Ative ou desative as animações.
19

void setFocus(boolean focused)

Focar / desfocar explicitamente este widget.
20

void setLimit(int limit)

Define o limite para o número de sugestões que o oráculo deve fornecer.
21

void setPopupStyleName(java.lang.String style)

Define o nome do estilo do pop-up de sugestão.
22

void setTabIndex(int index)

Define a posição do widget no índice da guia.
23

void setText(java.lang.String text)

Define o texto deste objeto.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

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

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

  • java.lang.Object

Exemplo do widget SuggestionBox

Este exemplo o levará por etapas simples para mostrar o uso de um widget SuggestionBox no GWT. Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau Descrição
1 Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2 Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3 Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo 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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que demonstrará o uso do 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);
   }	
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar o aplicativo em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -