GWT - ListBox 控制元件

上一頁
下一頁

簡介

ListBox 控制元件向用戶呈現一系列選擇項，可以是列表框或下拉列表。

類宣告

以下是 com.google.gwt.user.client.ui.ListBox 類的宣告：

public class ListBox
   extends FocusWidget
      implements SourcesChangeEvents, HasName

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有 ListBox 控制元件。您可以根據需要覆蓋它。

.gwt-ListBox {}

類建構函式

序號 建構函式 & 描述
1

ListBox()

以單選模式建立一個空的列表框。
2

ListBox(boolean isMultipleSelect)

建立一個空的列表框。
3

ListBox(Element element)

子類可以使用此建構函式顯式使用現有元素。

類方法

序號 函式名稱 & 描述
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 控制元件示例

此示例將引導您完成簡單的步驟，以演示如何在 GWT 中使用 ListBox 控制元件。按照以下步驟更新我們在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() {

      // Make a new list box, adding a few items to it.
      ListBox listBox1 = new ListBox();
      listBox1.addItem("First");
      listBox1.addItem("Second");
      listBox1.addItem("Third");
      listBox1.addItem("Fourth");
      listBox1.addItem("Fifth");

      // Make a new list box, adding a few items to it.
      ListBox listBox2 = new ListBox();
      listBox2.addItem("First");
      listBox2.addItem("Second");
      listBox2.addItem("Third");
      listBox2.addItem("Fourth");
      listBox2.addItem("Fifth");

      // Make enough room for all five items 
      listBox1.setVisibleItemCount(5);
	  
      //setting itemcount value to 1 turns listbox into a drop-down list.
      listBox2.setVisibleItemCount(1);

      // Add listboxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(listBox1);
      panel.add(listBox2);

      RootPanel.get("gwtContainer").add(panel);
   }	
}

完成所有更改後，讓我們像在GWT - 建立應用章節中一樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果：

GWT ListBox Widget
gwt_form_widgets.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.