GWT Custom Widget

Introduction

Sometimes, we need a user to interact with the operating system or an application, work with the real-time website data or make our website more engaging, but the question is, what is that one thing that can fulfil our needs?

The answer is widgets. Widgets allow us to interact with the user and help in creating websites that are more engaging. So, by making our own custom widgets, we can fulfil our needs.

So, now let us learn about how GWT is used to create custom widgets.

GWT Custom Widget

Google Web Toolkit provides a variety of ways for creating custom widgets. The simplest method is to group already-existing basic widgets and add interaction logic to them to build composite widgets.

There are three general ideas used while designing a custom widget, and they are as follows:

• Make an entirely new Java-based widget from scratch.
• Make a JavaScript-wrapping widget by utilizing JSNI methods.
• Make a widget that is a composite of several different widgets.

Java code created from scratch

It is also possible to build a widget from scratch, albeit it is more difficult because you need to write lower-level code. This is how a lot of the fundamental widgets—like Button and TextBox—are written. To learn how to make your own, please refer to these widgets' implementations.

Refer to the com.google.gwt.user.client.ui package's implementations of these widgets to learn how to make your own. 

Using JavaScript

You can write some of the widget's methods in JavaScript when creating a custom widget that directly derives from the Widget base class. As it gets more challenging to debug and becomes required to take into account the cross-browser implications of the native methods you write, this should typically only be done as a last resort. 

See the TextBox widget and the TextBoxImpl class's implementation of several of its methods in JavaScript for a practical illustration of this pattern in practice. The deferred binding should be used to separate browser-specific code.

Building Composites

Extending the Composite class is the best technique to produce new widgets. A composite is a specialised widget that has the ability to contain another component like panel. It is simple to join collections of already-existing widgets to create a composite that may be used again and again. Some of the UI elements offered by GWT are composites, such as the SuggestBox and TabPanel.

It is preferable to create a composite rather than subclassing Panel or another Widget type because a composite typically wants to select which methods are made available to the public without disclosing those that it would inherit from its Panel superclass.

Example

The following code sample demonstrates how to make a composite widget out of two widgets, a TextBox and a CheckBox, arranged in a VerticalPanel.

package com.google.gwt.examples;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

public class Composite_Example implements EntryPoint {
 /**
 * A combination of text box and checkbox
    that optionally enables it.
 */
 private static class Optional_TextBox extends Composite implements
     ClickHandler {
   private TextBox textBox = new TextBox();
   private CheckBox check_Box = new CheckBox();
   /**
   * Constructs an Optional_TextBox with the given
      caption on the check.
   * 
   * @param caption the caption to be displayed
      with the checkbox
   */
   public Optional_TextBox(String caption) {
     // Place the check above the text box
     // using a vertical panel.
     
     VerticalPanel panel = new VerticalPanel();
     panel.add(check_Box);
     panel.add(textBox);
     
     // Set the checkbox's caption,
     // and check it by default.
     
     check_Box.setText(caption);
     check_Box.setChecked(true);
     check_Box.addClickHandler(this);
     
     // All composites must call initWidget()
     // in their constructors.
     
     initWidget(panel);
     // Give the overall composite a style name.
     setStyleName("example-OptionalCheckBox");
   }
   public void onClick(ClickEvent event) {
     Object sender = event.getSource();
     if (sender == check_Box) {
       // When the checkbox is clicked, update the
       // text box's enabled state.
       textBox.setEnabled(check_Box.isChecked());
     }
   }
   /**
   * Sets the caption associated with the checkbox.
   * 
   * @param caption the checkbox's caption
   */
   public void setCaption(String caption) {
     // Note how we use the use composition
     // of the contained widgets to provide
     // only the methods that we want to.
     check_Box.setText(caption);
   }
   /**
   * Gets the caption associated with the checkbox.
   * 
   * @return the checkbox's caption
   */
   public String getCaption() {
     return check_Box.getText();
   }
 }
 public void onModuleLoad() {
   // Create an optional text box and
   // add it to the root panel.
   Optional_TextBox otb = new Optional_TextBox("Check this to enable");
   RootPanel.get().add(otb);
 }
}

You can also try this code with Online Java Compiler

Run Code