GWT-リストボックスウィジェット

前書き

*ListBox* ウィジェットは、リストボックスまたはドロップダウンリストとして、ユーザーに対する選択肢のリストを表します。

クラス宣言

以下は com.google.gwt.user.client.ui.ListBox クラスの宣言です-

public class ListBox
   extends FocusWidget
      implements SourcesChangeEvents, HasName

CSSスタイルルール

次のデフォルトのCSSスタイルルールは、すべてのListBoxウィジェットに適用されます。要件に応じて上書きできます。

.gwt-ListBox {}

クラスコンストラクター

Sr.No.

Constructor & Description

1

ListBox()

単一選択モードで空のリストボックスを作成します。

2

ListBox(boolean isMultipleSelect)

空のリストボックスを作成します。

3

ListBox(Element element)

このコンストラクタは、既存の要素を明示的に使用するためにサブクラスによって使用される場合があります。

クラスメソッド

Sr.No.	Function name & Description
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アプリケーションを更新します-アプリケーションの作成_の章-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.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/HelloWorldl の内容です。

<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>

ListBoxウィジェットの使用方法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を以下に示します。

package com.finddevguides.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);
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT ListBox Widget

Gwt-listbox-widget