Table of contents
1.
Introduction
2.
PushButton Class
3.
CSS Style Rules
4.
Constructors 
5.
Methods
6.
GWT PushButton Widget Example
6.1.
Project Creation👨‍💻
6.2.
Modification in Files👨‍🔧
6.3.
Check the Result🤳🏼
6.4.
Output
7.
Frequently Asked Questions
7.1.
What in GWT is a widget?
7.2.
What characteristics does GWT have?
7.3.
What is the GWT's purpose?
7.4.
What do you mean by Maven Plugin in GWT?
7.5.
How can I use GWT's Super Dev Mode?
8.
Conclusion
Last Updated: Mar 27, 2024
Medium

GWT PushButton Widget

Author Aditya Kumar
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Users can input data into form widgets, enabling them to engage with the application.

The PushButton widget simulates a common push-button with a personalized style.

A button is a PushButton that the user can press or click to take action. We can use the PushButton widget in many places like creating a submit button, creating a reset button in a login form, creating a feedback button, etc.

GWT PushButton Widget

Must Recommended Topic, procedure call in compiler design

PushButton Class

In the GWT(Google Web Toolkit) PushButton widget, the PushButton class is declared as given below:

public class PushButton extends CustomButton
You can also try this code with Online Java Compiler
Run Code


The following classes' methods are inherited by the PushButton class:

methods in pushButton Class

The following are the implemented interfaces from the PushButton class, which are given below:

  • HasAllDragAndDropHandlers
  • HasAllFocusHandlers
  • HasAllGestureHandlers
  • HasAllKeyHandlers
  • HasAllMouseHandlers
  • HasAllTouchHandlers
  • HasBlurHandlers, etc.

CSS Style Rules

All the below-mentioned GWT PushButton widgets will be styled according to the default CSS rules. Following your needs, you can override it.

.gwt-PushButton-up {}

.gwt-PushButton-down {}

.gwt-PushButton-up-hovering {}

.gwt-PushButton-down-hovering {}

.gwt-PushButton-up-disabled {}

.gwt-PushButton-down-disabled {} 

Constructors 

In the GWT PushButton Widget, the following are the constructors mentioned below:

Sr. No.

Constructor 

Description

1.

PushButton() PushButton Constructor

2.

PushButton(Image upImg) A PushButton with an upstate image is created.

3.

PushButton(Image upImg, ClickListener listener) Creates a PushButton with a ClickListener and an upstate picture.

4.

PushButton(Image upImg, Image downImage) A PushButton with an upstate image is created.

5.

PushButton(Image upImg, Image downImg, ClickListener listener) A PushButton with an upstate image is created.

6.

PushButton(java.lang.String upTxt) A PushButton with an upstate text is created.

7.

PushButton(java.lang.String upTxt, ClickListener listener) Creates a PushButton with a ClickListener and an upstate text.

8.

PushButton(java.lang.String upTxt, java.lang.String downText) Makes a PushButton with text for the up and down states.

9.

PushButton(java.lang.String upTxt, java.lang.String downTxt, ClickListener listener) Creates a PushButton with an upstate text, a downstate text, and a click listener.

 

Methods

In the GWT PushButton Widget, the following are the methods mentioned below:

Sr. No.

Function

Description

1.

protected void onClick() When the user has finished selecting this button, a call is made.
Overrides:
onClick in class CustomButton

2.

protected void onClickCancel() Called when a user cancels a click that is currently being performed, as when the user drags the mouse outside of the button before releasing it.
Overrides:
onClickCancel in class CustomButton

3.

protected void onClickStart() When the user starts to click on this button, a call is made.
Overrides:
onClickStart in class CustomButton

 

GWT PushButton Widget Example

This example will walk you through some straightforward GWT PushButton Widget usage instructions. To upgrade the GWT application we developed in GWT, follow these steps:

Project Creation👨‍💻

Create a project with the name GWTPushButton.

Modification in Files👨‍🔧

Modify the GWTPushButton.gwt.xml, GWTPushButton.css, GWTPushButton.html, and GWTPushButton.java files as explained below. Keep the rest of the files unchanged.

Check the Result🤳🏼

Compile and run the application to verify the result of the implemented logic.

The changed module description, located at ‘src/com.codingninjas.gwtpushbut/GWTPushButton.gwt.xml’, contains the content given below:

<? xml version = "1.0" encoding = "UTF-8" ?>
<module rename-to='gwtpushbutton'>
    <inherits name='com.google.gwt.user.User' />
    <!-- For default stylesheet, you can add any style to your project-->
    <!-- <Inherits name='com.google.gwt.user.theme.clean.Clean' /> -->

    <entry-point class='com.codingninjas.gwtpushbut.client.GWTPushButton' />
    <source path='client' />
    <source path='shared' />
    <!-- Allow Super Dev Mode -->
    <add-linker name="xsiframe" />
</module>


Now write some styling in the CSS file for your project which is located at ‘war/GWTPushButton.css’.

body {
  text - align: center;
  font - family: verdana, sans - serif;
}

h1 {
  font - size: 3em;
  font - weight: bold;
  color: #004080;
  margin: 30px 0px 80px;
  text - align: center;
}

.gwt - PushButton {
  color: #32CD32;
}

.gwt - PushButton - up {
  color: #5e17eb;
}

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

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

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

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

.gwt - PushButton - down - disabled {
  color: red;}


Now write in the HTML host file for your project which is located at ‘war/GWTPushButton.html’.

<html>
  <head>
    <title>PushButtonExample</title>
    <link rel="stylesheet" href="GWTPushButton.css" />
    <script language="javascript" src="gwtpushbutton/gwtpushbutton.nocache.js">
    </script>
  </head>

  <body>
    <h1>PushButton Example</h1>
    <div id="handleDiv"></div>
  </body>
</html>


The Java file ‘src/com.codingninjas.gwtpushbut/GWTPushButton.java’ with the following contents will show how to utilise the PushButton widget.

package com.codingninjas.gwtpushbut.client;

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

public class GWTPushButton implements EntryPoint {
    public void onModuleLoad() {
        // Making a pushButton
        PushButton pushBut = new PushButton("PushButton");
        
        // Making another pushButton  
        PushButton pushBut1 = new PushButton("PushButton");

        // Make disable pushButton1
        pushBut1.setEnabled(false);
        
        // Adding onclick event listener
        pushBut.addClickHandler(new ClickHandler() {
           @Override
           public void onClick(ClickEvent event) {
              Window.alert("You have clicked on PushButton!");
           }
        });

        // Set pushButtons to RootPanel
        VerticalPanel panel = new VerticalPanel();
        panel.setSpacing(10);
        panel.add(pushBut);
        panel.add(pushBut1);
        RootPanel.get("handleDiv").add(panel);
     }    
 }
You can also try this code with Online Java Compiler
Run Code


When you are finished and have made all the necessary modifications, compile and run the application in development mode. 

Run application

Output

The above code compilation will get the results shown below:

PushButton Output

Frequently Asked Questions

What in GWT is a widget?

Use widgets to communicate with users. The positioning of user interface elements on the page is managed via panels. By utilizing widgets and panels, you may avoid writing unique code for every browser because they function the same way on all of them.

What characteristics does GWT have?

Asynchronous remote procedure calls, history management, bookmarking, UI abstraction, internationalization, and cross-browser portability.

What is the GWT's purpose?

A development toolkit called GWT is used to create and improve sophisticated browser-based apps.

What do you mean by Maven Plugin in GWT?

The Maven Plugin for GWT provides specific goals, lifecycles, and artifact handlers in order to make it simpler to create GWT projects using Maven.

How can I use GWT's Super Dev Mode?

Dev Mode automatically starts Super Dev Mode as of GWT 2.7. Reloading the page while in Dev Mode will force an automated recompilation when necessary.

Conclusion

In this article, we have discussed the GWT PushButton Widget. We have discussed its constructors, methods, and implementation. GWT PushButton Widget is a part of form widgets that are used in many places while developing applications.

We hope this blog has helped you enhance your knowledge regarding GWT PushButton Widget. To learn more, check out our articles on GWT RadioButton WidgetGWT CheckBox Widget, and GWT SuggestBox.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available; look at the Top 150 Interview Puzzles interview experiences, and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow. 

Thank you

Happy Learning Ninja!

Live masterclass