GWT教程
 GWT Button组件 GWT ToggleButton组件 

GWT PushButton组件

GWT PushButton组件 介绍

PushButton组件代表自定义样式标准按钮。

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

GWT PushButton组件 构造方法

构造方法 描述
PushButton() 按钮的构造函数。
PushButton(Image upImage) 创建一个带有向上状态图像的 PushButton。
PushButton(Image upImage, ClickListener listener) 创建一个带有向上状态图像和 clickListener 的 PushButton。
PushButton(Image upImage, Image downImage) 创建一个带有向上状态图像的 PushButton。
PushButton(Image upImage, Image downImage, ClickListener listener) 创建一个带有向上状态图像的 PushButton。
PushButton(java.lang.String upText) 创建一个带有向上状态文本的 PushButton。
PushButton(java.lang.String upText, ClickListener listener) 创建一个带有向上状态文本和点击侦听器的 PushButton。
PushButton(java.lang.String upText, java.lang.String downText) 创建具有向上状态和向下状态文本的 PushButton。
PushButton(java.lang.String upText, java.lang.String downText, ClickListener listener) 创建具有向上状态、向下状态文本和单击侦听器的 PushButton。

GWT PushButton组件 方法

方法 描述
protected void onClick() 当用户完成单击此按钮时调用。
protected void onClickCancel() 当用户中止正在进行的点击时调用；例如，在释放鼠标按钮之前将鼠标拖到按钮外。
protected void onClickStart() 当用户开始单击此按钮时调用。

GWT PushButton组件 示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<module rename-to="HelloWorld">

    <!-- Inherit the core Web Toolkit stuff.                  -->
    <inherits name='com.google.gwt.user.User'/>

    <!-- Specify the app entry point class.                   -->
    <entry-point class='com.yiidian.helloWorld.client.HelloWorld'/>


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改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;
}

3）修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>PushButton Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4）HelloWorld.java

package com.yiidian.helloWorld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.DOM;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.ClickEvent;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
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);
    }
}

运行应用程序，显示结果如下：

当您单击“Click Me”按钮时，它将显示一条警告消息Hello World！

你可以看到按钮文本的颜色，它的状态会随着你的交互而改变。

  • 将鼠标悬停在按钮上，颜色将为粉红色。

  • 按下按钮，颜色将是浅绿色。

  • 松开按钮，颜色为绿色。

 GWT Button组件 GWT ToggleButton组件 

热门文章

优秀文章

全部教程