Gwt-suggestionbox-widget

提供：Dev Guides
移動先:案内、検索

GWT-SuggestionBoxウィジェット

前書き

*SuggestionBox* ウィジェットは、ユーザーの入力に一致する事前構成済みの選択セットを表示するテキストボックスまたはテキスト領域を表します。 各SuggestBoxは、単一のSuggestOracleに関連付けられています。 SuggestOracleは、特定のクエリ文字列を指定して一連の選択を提供するために使用されます。

クラス宣言

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

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

CSSスタイルルール

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

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

クラスコンストラクター

Sr.No. Constructor & Description
1

SuggestBox()

提案ボックスのコンストラクタ。

2

SuggestBox(SuggestOracle oracle)

提案ボックスのコンストラクタ。

3

SuggestBox(SuggestOracle oracle, TextBoxBase box)

提案ボックスのコンストラクタ。

クラスメソッド

Sr.No. Function name & Description
1

void addChangeListener(ChangeListener listener)

SuggestBoxのテキストボックスで変更イベントを受け取るためのリスナーを追加します。

2

void addClickListener(ClickListener listener)

SuggestBoxのテキストボックスでクリックイベントを受け取るためのリスナーを追加します。

3

void addEventHandler(SuggestionHandler handler)

提案イベントを受信するハンドラインターフェイスを追加します。

4

void addFocusListener(FocusListener listener)

SuggestBoxのテキストボックスでフォーカスイベントを受け取るためのリスナーを追加します。

5

void addKeyboardListener(KeyboardListener listener)

SuggestBoxのテキストボックスでキーボードイベントを受け取るためのリスナーを追加します。

6

int getLimit()

このボックスに表示される提案の数の制限を取得します。

7

SuggestOracle getSuggestOracle()

提案ボックスのSuggestOracleを取得します。

8

int getTabIndex()

タブインデックス内のウィジェットの位置を取得します。

9

java.lang.String getText()

このオブジェクトのテキストを取得します。

10

boolean isAnimationEnabled()

アニメーションが有効かどうかを取得します。

11

protected void onEnsureDebugId(java.lang.String baseID)

影響を受ける要素：-popup =提案とともに表示されるポップアップ。 -items-item＃=指定されたインデックスにある推奨アイテム。

12

void removeChangeListener(ChangeListener listener)

以前に追加されたリスナーインターフェイスを削除します。

13

void removeClickListener(ClickListener listener)

以前に追加されたリスナーインターフェイスを削除します。

14

void removeEventHandler(SuggestionHandler handler)

以前に追加されたリスナーインターフェイスを削除します。

15

void removeFocusListener(FocusListener listener)

以前に追加されたリスナーインターフェイスを削除します。

16

void removeKeyboardListener(KeyboardListener listener)

以前に追加されたリスナーインターフェイスを削除します。

17

void setAccessKey(char key)

ウィジェットの「アクセスキー」を設定します。

18

void setAnimationEnabled(boolean enable)

アニメーションを有効または無効にします。

19

void setFocus(boolean focused)

このウィジェットを明示的にフォーカス/フォーカス解除します。

20

void setLimit(int limit)

オラクルが提供する提案の数に制限を設定します。

21

void setPopupStyleName(java.lang.String style)

提案ポップアップのスタイル名を設定します。

22

void setTabIndex(int index)

タブインデックスでのウィジェットの位置を設定します。

23

void setText(java.lang.String text)

このオブジェクトのテキストを設定します。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

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

SuggestionBoxウィジェットの例

この例では、GWTのSuggestionBoxウィジェットの使用方法を示す簡単な手順を紹介します。 次の手順に従って、_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-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;
}

以下は、変更された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>SuggestionBox Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

以下のJavaファイル src/com.finddevguides/HelloWorld.java のコンテンツを見てみましょう。これは、SuggestionBoxウィジェットの使用法を示します。 

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

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

GWT SuggestionBoxウィジェット

「https://www.finddevguides.com/index.php?title=Gwt-suggestionbox-widget&oldid=14900」から取得
Powered by MediaWiki