GWT教程
 GWT ListBox组件 GWT TextBox组件 

GWT SuggestBox组件

GWT SuggestBox组件 介绍

SuggestBox组件代表显示一个预先配置的集合匹配用户的输入端，选择的文本框或文本区域。每个 SuggestBox 都与一个 SuggestOracle 相关联。SuggestOracle 用于在给定特定查询字符串的情况下提供一组选择。

GWT SuggestBox组件 声明

以下是com.google.gwt.user.client.ui.SuggestBox类的声明

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

CSS 样式规则

以下默认 CSS 样式规则将应用于所有SuggestBox标签。您可以根据您的要求覆盖它。

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

GWT SuggestBox组件 构造方法

构造方法 描述
SuggestBox() SuggestBox的构造函数。
SuggestBox(SuggestOracle oracle) SuggestBox的构造函数。
SuggestBox(SuggestOracle oracle, TextBoxBase box) SuggestBox的构造函数。

GWT SuggestBox组件 方法

方法 描述
void addChangeListener(ChangeListener listener) 添加侦听器以接收 SuggestBox 文本框上的更改事件。
void addClickListener(ClickListener listener) 添加一个监听器来接收 SuggestBox 的文本框上的点击事件。
void addEventHandler(SuggestionHandler handler) 添加处理程序接口以接收建议事件。
void addFocusListener(FocusListener listener) 添加一个侦听器以接收 SuggestBox 文本框上的焦点事件。
void addKeyboardListener(KeyboardListener listener) 添加一个监听器来接收 SuggestBox 的文本框上的键盘事件。
int getLimit() 获取应为此框显示的建议数量的限制。
SuggestOracle getSuggestOracle() 获取SuggestBox 的 SuggestOracle。
int getTabIndex() 获取小部件在选项卡索引中的位置。
java.lang.String getText() 获取此对象的文本。
boolean isAnimationEnabled() 获取是否启用动画。
protected void onEnsureDebugId(java.lang.String baseID) 受影响的元素： -popup = 显示建议的弹出窗口。-items-item# = 指定索引处的建议项目。
void removeChangeListener(ChangeListener listener) 删除以前添加的侦听器接口。
void removeClickListener(ClickListener listener) 删除以前添加的侦听器接口。
void removeEventHandler(SuggestionHandler handler) 删除以前添加的侦听器接口。
void removeFocusListener(FocusListener listener) 删除以前添加的侦听器接口。
void removeKeyboardListener(KeyboardListener listener) 删除以前添加的侦听器接口。
void setAccessKey(char key) 设置小部件的“key”。
void setAnimationEnabled(boolean enable) 启用或禁用动画。
void setFocus(boolean focused) 显式聚焦/取消聚焦此小部件。
void setLimit(int limit) 设置 oracle 应提供的建议数量的限制。
void setPopupStyleName(java.lang.String style) 设置建议弹出窗口的样式名称。
void setTabIndex(int index) 设置小部件在选项卡索引中的位置。
void setText(java.lang.String text) 设置此对象的文本。

GWT SuggestBox组件 示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

    <!-- Specify the app entry point class.                   -->
    <entry-point class='com.yiidian.helloWorld.client.HelloWorld'/>


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改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;
}

3）修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>SuggestionBox Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4）HelloWorld.java

package com.yiidian.helloWorld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.DOM;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.ClickEvent;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
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);
    }
}

运行应用程序，显示结果如下：

 GWT ListBox组件 GWT TextBox组件 

热门文章

优秀文章

全部教程