GWT - 複選框控制元件

簡介

複選框 控制元件表示一個標準的複選框。

類宣告

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

public class CheckBox
   extends ButtonBase
      implements HasName

CSS 樣式規則

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

.gwt-CheckBox {}

.gwt-CheckBox-disabled {}

類建構函式

序號	建構函式 & 描述
1	CheckBox() CheckkBox 的建構函式。
2	CheckBox(Element element) 子類可以使用此建構函式顯式使用現有元素。
3	CheckBox(java.lang.String label) 建立一個帶有指定文字標籤的複選框。
4	CheckBox(java.lang.String label, boolean asHTML) 建立一個帶有指定文字標籤並將其內容設定為 HTML 的複選框。

類方法

序號	函式名稱 & 描述
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 應用：

步驟	描述
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-CheckBox{ 
   color:green;   
}

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

讓我們在 Java 檔案src/com.tutorialspoint/HelloWorld.java中包含以下內容，它將演示 CheckBox 控制元件的使用。

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

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

當您單擊單擊我複選框時，它將顯示一條警報訊息，說明複選框是否選中。

gwt_form_widgets.htm

列印頁面