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

前書き

*Checkbox* ウィジェットは標準のチェックボックスを表します。

クラス宣言

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

public class CheckBox
   extends ButtonBase
      implements HasName

CSSスタイルルール

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

.gwt-CheckBox {}

.gwt-CheckBox-disabled {}

クラスコンストラクター

Sr.No.	Constructor & Description
1	CheckBox() CheckkBoxのコンストラクター。
2	CheckBox(Element element) このコンストラクタは、既存の要素を明示的に使用するためにサブクラスによって使用される場合があります。
3	CheckBox(java.lang.String label) 指定したテキストラベルを持つチェックボックスを作成します。
4	CheckBox(java.lang.String label, boolean asHTML) 指定されたテキストラベルを持つチェックボックスを作成し、そのコンテンツをHTMLとして設定します。

クラスメソッド

Sr.No.	Function name & Description
1	java.lang.String getName() ウィジェットの名前を取得します。
2	int getTabIndex() タブインデックス内のウィジェットの位置を取得します。
3	java.lang.String getText() このオブジェクトのテキストを取得します。
4	boolean isChecked() このチェックボックスが現在チェックされているかどうかを決定します。
5	boolean isEnabled() このウィジェットが有効かどうかを取得します。
6	protected void onEnsureDebugId(java.lang.String baseID) 影響を受ける要素：-label =チェックボックスの横のラベル。
7	protected void onLoad() このメソッドは、ウィジェットがブラウザのドキュメントに添付されたときに呼び出されます。
8	protected void onUnload() このメソッドは、ウィジェットがブラウザのドキュメントから切り離されるときに呼び出されます。
9	protected void replaceInputElement(Element elem) 現在の入力要素を新しいものに置き換えます。
10	void setAccessKey(char key) ウィジェットの「アクセスキー」を設定します。
11	void setChecked(boolean checked) このチェックボックスをオンまたはオフにします。
12	void setEnabled(boolean enabled) このウィジェットを有効にするかどうかを設定します。
13	void setFocus(boolean focused) このウィジェットを明示的にフォーカス/フォーカス解除します。
14	void setHTML(java.lang.String html) このオブジェクトのコンテンツをHTML経由で設定します。
15	void setName(java.lang.String name) ウィジェットの名前を設定します。
16	void setTabIndex(int index) タブインデックスでのウィジェットの位置を設定します。
17	void setText(java.lang.String text) このオブジェクトのテキストを設定します。
18	void sinkEvents(int eventBitsToAdd) このオブジェクトによってシンクされるイベントのセットを追加します。
19	java.lang.String getHTML() このオブジェクトのコンテンツをHTMLとして取得します。

継承されるメソッド

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

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

CheckBoxウィジェットの例

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

.gwt-CheckBox-disabled {
   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>CheckBox Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

CheckBoxウィジェットの使用法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
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 check box, and select it by default.
      CheckBox checkBox1 = new CheckBox("Check Me!");
      CheckBox checkBox2 = new CheckBox("Check Me!");

     //set check box as selected
      checkBox1.setValue(true);

     //disable a checkbox
      checkBox2.setEnabled(false);

      checkBox1.addClickHandler(new ClickHandler() {

         @Override
         public void onClick(ClickEvent event) {
            CheckBox checkBox = (CheckBox)event.getSource();
            Window.alert("CheckBox is " +
               (checkBox.getValue() ? "" : "not") + " checked");
         }
      });


     //Add checkboxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(checkBox1);
      panel.add(checkBox2);

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

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

GWT CheckBoxウィジェット

*Click Me* CheckBoxをクリックすると、 *CheckBox* がオンまたはオフになっているという警告メッセージが表示されます。

Gwt-checkbox-widget

目次