GWT - ListBox 小部件

简介

ListBox 小部件向用户呈现一个选项列表，可以是列表框，也可以是下拉列表。

类声明

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

public class ListBox
   extends FocusWidget
      implements SourcesChangeEvents, HasName

CSS Style Rules

Following default CSS Style rules will be applied to all the ListBox widget. You can override it as per your requirements.

.gwt-ListBox {}

类构造函数

Sr.No.	构造函数 &描述
1	ListBox() 在单选模式下创建一个空列表框。
2	ListBox(boolean isMultipleSelect) 创建一个空列表框。
3	ListBox(Element element) 子类可以使用此构造函数来明确使用现有元素。

Sr.No.

构造函数 &描述

ListBox()

在单选模式下创建一个空列表框。

ListBox(boolean isMultipleSelect)

创建一个空列表框。

ListBox(Element element)

子类可以使用此构造函数来明确使用现有元素。

类方法

Sr.No.	函数名称 &描述
1	void addItem(java.lang.String item) 向列表框添加一个项目。
2	void addItem(java.lang.String item, java.lang.String value) 向列表框添加一个项目，并为该项目指定初始值。
3	void clear() 从列表框中删除所有项目。
4	int getItemCount() 获取列表框中存在的项目数。
5	java.lang.String getItemText(int index) 获取与指定索引处的项目关联的文本。
6	java.lang.String getName() 获取小部件的名称。
7	int getSelectedIndex() 获取当前选定的项目。
8	java.lang.String getValue(int index) 获取与给定索引处的项目关联的值。
9	int getVisibleItemCount() 获取可见项目的数量。
10	void insertItem(java.lang.String item, int index) 将项目插入列表框。
11	void insertItem(java.lang.String item, java.lang.String value, int index) 将项目插入列表框，指定项目的初始值。
12	boolean isItemSelected(int index) 确定是否选择了单个列表项。
13	boolean isMultipleSelect() 获取此列表是否允许多项选择。
14	void onBrowserEvent(Event event) 每当收到浏览器事件时触发。
15	protected void onEnsureDebugId(java.lang.String baseID) 受影响的元素:-item# = 指定索引处的选项。
16	void removeChangeListener(ChangeListener listener) 删除先前添加的侦听器接口。
17	void removeItem(int index) 删除指定位置的项目索引。
18	void setItemSelected(int index, boolean selected) 设置是否选择了单个列表项。
19	void setItemText(int index,java.lang.String text) 设置给定索引处的文本。
20	void setMultipleSelect(boolean multiple) 设置此列表是否允许多项选择。
21	void setName(java.lang.String name) 设置小部件的名称。
22	void setSelectedIndex(int index) 设置当前选定的索引。
23	void setValue(int index, java.lang.String value) 设置与给定索引处的项目关联的值。
24	void setVisibleItemCount(int visibleItems) 设置可见项目的数量。
25	static ListBox wrap(Element element) 创建一个包装现有 <select> 元素的 ListBox 小部件。
26	void addChangeListener(ChangeListener listener) 添加一个监听器接口来接收更改事件。

继承的方法

该类继承了以下类的方法 −

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
java.lang.Object

ListBox Widget 示例

此示例将带您通过简单的步骤展示 GWT 中 ListBox Widget 的使用方法。按照以下步骤更新我们在 GWT - 创建应用程序 一章中创建的 GWT 应用程序 −

步骤	描述
1	按照 GWT - 创建应用程序一章中的说明，在 com.tutorialspoint 包下创建一个名为 HelloWorld 的项目。
2	修改 HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html 和HelloWorld.java 如下所述。其余文件保持不变。
3	编译并运行应用程序以验证实施逻辑的结果。

以下是修改后的模块描述符 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>

以下是修改后的样式表文件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-ListBox{ 
   color:green;   
}

以下是修改后的 HTML 主机文件 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>ListBox Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

让我们来看看 Java 文件 src/com.tutorialspoint/HelloWorld.java 的以下内容，它将演示如何使用 ListBox 小部件。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {

    // 创建一个新列表框，向其中添加一些项目。
    ListBox listBox1 = new ListBox();
    listBox1.addItem("First");
    listBox1.addItem("Second");
    listBox1.addItem("Third");
    listBox1.addItem("Fourth");
    listBox1.addItem("Fifth");
    
    // 创建一个新列表框，向其中添加一些项目。
    ListBox listBox2 = new ListBox();
    listBox2.addItem("First");
    listBox2.addItem("Second");
    listBox2.addItem("Third");
    listBox2.addItem("Fourth");
    listBox2.addItem("Fifth");
    
    // 为所有五个项目留出足够的空间
    listBox1.setVisibleItemCount(5);
    
    // 将 itemcount 值设置为 1 可将列表框变为下拉列表。
    listBox2.setVisibleItemCount(1);
    
    // 将列表框添加到根面板。
    VerticalPanel panel = new VerticalPanel();
    panel.setSpacing(10);
    panel.add(listBox1);
    panel.add(listBox2);
    
    RootPanel.get("gwtContainer").add(panel);
   }	
}

完成所有更改后，让我们像在 GWT - 创建应用程序一章中一样，在开发模式下编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果 −