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 -