GWT - PushButton 控制元件

上一頁
下一頁

介紹

PushButton 控制元件表示一個具有自定義樣式的標準按鈕。

類宣告

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

public class PushButton
   extends CustomButton

CSS 樣式規則

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

.gwt-PushButton-up {}

.gwt-PushButton-down {}

.gwt-PushButton-up-hovering {}

.gwt-PushButton-down-hovering {}

.gwt-PushButton-up-disabled {}

.gwt-PushButton-down-disabled {}

類建構函式

序號 建構函式 & 描述
1

PushButton()

PushButton 的建構函式。
2

PushButton(Image upImage)

建立一個帶有向上狀態影像的 PushButton。
3

PushButton(Image upImage, ClickListener listener)

建立一個帶有向上狀態影像和點選監聽器的 PushButton。
4

PushButton(Image upImage, Image downImage)

建立一個帶有向上狀態影像的 PushButton。
5

PushButton(Image upImage, Image downImage, ClickListener listener)

建立一個帶有向上狀態影像的 PushButton。
6

PushButton(java.lang.String upText)

建立一個帶有向上狀態文字的 PushButton。
7

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

建立一個帶有向上狀態文字和點選監聽器的 PushButton。
8

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

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

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

建立一個帶有向上狀態、向下狀態文字和點選監聽器的 PushButton。

類方法

序號 函式名稱 & 描述
1

protected void onClick()

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

protected void onClickCancel()

當用戶取消正在進行的點選時呼叫；例如，在釋放滑鼠按鈕之前將滑鼠拖到按鈕外部。
3

protected void onClickStart()

當用戶開始點選此按鈕時呼叫。

繼承的方法

此類繼承自以下類：

  • 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

PushButton 控制元件示例

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

步驟 描述
1 建立一個名為HelloWorld的專案，放在com.tutorialspoint包下，如GWT - 建立應用程式章節中所述。
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-PushButton { 
   color:red;   
}

.gwt-PushButton-up {
   color:green;
}

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

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

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

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

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

讓我們以下面的 Java 檔案src/com.tutorialspoint/HelloWorld.java內容為例，它將演示 PushButton 控制元件的使用。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      //create a push button
      PushButton pushButton = new PushButton("Click Me!");

      //create a push button
      PushButton pushButton1 = new PushButton("Click Me!");

      //disable a push button
      pushButton1.setEnabled(false);
      
      //add a clickListener to the push button
      pushButton.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            Window.alert("Hello World!");
         }
      });

      // Add push buttons to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(pushButton);
      panel.add(pushButton1);
      RootPanel.get("gwtContainer").add(panel);
   }	
}

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

GWT PushButton Widget

當您單擊點選我按鈕時，它將顯示一個警報訊息Hello World!

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

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

  • 按下按鈕，顏色將變為青綠色。

  • 釋放按鈕，顏色將變為綠色。

gwt_form_widgets.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.