GWT教程
 GWT Anchor组件 GWT PushButton组件 

GWT Button组件

GWT Button组件 介绍

Button组件代表一个标准的按钮。

GWT Button组件 声明

以下是com.google.gwt.user.client.ui.Button类的声明

public class Button
   extends ButtonBase

CSS 样式规则

以下默认 CSS 样式规则将应用于所有Button标签。您可以根据您的要求覆盖它。

.gwt-Button { }

GWT Button组件 构造方法

构造方法 描述
Button() 创建一个没有标题的按钮。
protected Button(Element element) 子类可以使用此构造函数来显式使用现有元素。
Button(java.lang.String html) 创建一个带有给定 HTML 标题的按钮。
Button(java.lang.String html, ClickListener listener) 使用给定的 HTML 标题创建一个按钮并单击侦听器。

GWT Button组件 方法

方法 描述
click() 用户单击按钮的事件。
static Button wrap(Element element) 创建一个包装现有 <a> 元素的 Button 小部件。

GWT Button组件 示例

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-Button {
    color:red;
}

.gwt-Green-Button {
    color:green;
}

.gwt-Blue-Button {
    color:blue;
}

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>Button 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 buttons
        Button redButton = new Button("Red");
        Button greenButton = new Button("Green");
        Button blueButton = new Button("Blue");

        // use UIObject methods to set button properties.
        redButton.setWidth("100px");
        greenButton.setWidth("100px");
        blueButton.setWidth("100px");
        greenButton.addStyleName("gwt-Green-Button");
        blueButton.addStyleName("gwt-Blue-Button");

        //add a clickListener to the button
        redButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                Window.alert("Red Button clicked!");
            }
        });

        //add a clickListener to the button
        greenButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                Window.alert("Green Button clicked!");
            }
        });

        //add a clickListener to the button
        blueButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                Window.alert("Blue Button clicked!");
            }
        });

        // Add button to the root panel.
        VerticalPanel panel = new VerticalPanel();
        panel.setSpacing(10);
        panel.add(redButton);
        panel.add(greenButton);
        panel.add(blueButton);

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

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

当您单击“Green”按钮时，它将显示一条警告消息"Green Button clicked!"！

 GWT Anchor组件 GWT PushButton组件 

热门文章

优秀文章

全部教程