GWT - 切換按鈕控制元件

上一頁
下一頁

引言

該ToggleButton控制元件表示一個時尚的狀態按鈕，允許使用者在向上和向下狀態之間切換。

類宣告

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

public class ToggleButton
   extends CustomButton

CSS樣式規則

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

.gwt-ToggleButton-up {}

.gwt-ToggleButton-down {}

.gwt-ToggleButton-up-hovering {}

.gwt-ToggleButton-down-hovering {}

.gwt-ToggleButton-up-disabled {}

.gwt-ToggleButton-down-disabled {}

類建構函式

序號 建構函式及描述
1

ToggleButton()

ToggleButton的建構函式。
2

ToggleButton(Image upImage)

建立一個具有向上狀態影像的ToggleButton。
3

ToggleButton(Image upImage, ClickListener listener)

建立一個具有向上狀態影像和clickListener的ToggleButton。
4

ToggleButton(Image upImage, Image downImage)

建立一個具有向上狀態影像的ToggleButton。
5

ToggleButton(Image upImage, Image downImage, ClickListener listener)

建立一個具有向上狀態影像的ToggleButton。
6

ToggleButton(java.lang.String upText)

建立一個具有向上狀態文字的ToggleButton。
7

ToggleButton(java.lang.String upText, ClickListener listener)

建立一個具有向上狀態文字和clicklistener的ToggleButton。
8

ToggleButton(java.lang.String upText, java.lang.String downText)

建立一個具有向上狀態和向下狀態文字的ToggleButton。
9

ToggleButton(java.lang.String upText, java.lang.String downText, ClickListener listener)

建立一個具有向上狀態、向下狀態文字和click listener的ToggleButton。

類方法

序號 函式名稱及描述
1

boolean isDown()

此按鈕是否按下？
2

protected void onClick()

當用戶完成點選此按鈕時呼叫。
3

void setDown(boolean down)

設定此按鈕是否按下。

繼承的方法

此類繼承自以下類的方法：

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.client.ui.FocusWidget

  • com.google.gwt.user.client.ui.CustomWidget

  • java.lang.Object

ToggleButton 控制元件示例

本示例將引導您完成簡單的步驟，以演示如何在 GWT 中使用 ToggleButton 控制元件。按照以下步驟更新我們在GWT - 建立應用章節中建立的 GWT 應用：

步驟 描述
1 按照GWT - 建立應用章節中的說明，建立一個名為HelloWorld的專案，位於com.tutorialspoint包下。
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-ToggleButton-up {
   color:green;
}

.gwt-ToggleButton-down {
   color:blue;
}

.gwt-ToggleButton-up-hovering {
   color:pink;
}

.gwt-ToggleButton-down-hovering {
   color:aqua;
}

.gwt-ToggleButton-up-disabled {
   color:lime;
}

.gwt-ToggleButton-down-disabled {
   color:maroon;
}

以下是修改後的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>ToggleButton Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

讓我們來看一下Java檔案src/com.tutorialspoint/HelloWorld.java的內容，它將演示ToggleButton控制元件的使用。

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
	  
      //create toggle buttons
      ToggleButton toggleButton = new ToggleButton("Click Me!");
      ToggleButton toggleButton1 = new ToggleButton("Click Me!");
      
      //disable a toggle button
      toggleButton1.setEnabled(false);
      
      //add a clickListener to the toggle button
      toggleButton.addClickHandler(new ClickHandler() {
        @Override
         public void onClick(ClickEvent event) {
            Window.alert("Hello World!");
         }
      });
	   
      // Add toggle button to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);            
      panel.add(toggleButton);
      panel.add(toggleButton1);

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

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

GWT ToggleButton Widget

單擊點選我按鈕時，它將顯示一條警告訊息Hello World！

您可以看到按鈕文字的顏色會隨著您的互動而改變。

  • 將滑鼠懸停在按鈕上，顏色將變為粉色。

  • 按下按鈕，顏色將變為藍色。

  • 釋放按鈕，按鈕將保持按下狀態。

gwt_form_widgets.htm
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.