GWT Hidden Widget

Introduction

In this blog, we are going to learn what a suggested box is and how we implement a Hidden widget using GWT, and also we will get to know about some inbuilt methods of GWT that will assist us in efficiently implementing it. But before that let's get to know about GWT.

GWT

A development toolkit called GWT enables programmers to create internet or web applications. For typical web-app chores like bookmarking, UI abstraction, cross-browser compatibility, etc., GWT insists on reusable techniques. It offers characteristics like:

Because GWT solves browser incompatibilities through various bindings, developers do not need to be experts in this area.

The client and server code bases for GWT are the same.

Java was the platform of choice for GWT because it offers features like code navigation and refactoring that make development more efficient.

GWT MVP (Model View Presenter) enables collaborative working and more rapid JUnit testing. By adding events to the event bus, the client-side program can make several modifications.

It enables the integration of numerous Java technologies, including hibernate via gilead.

A hidden field in an HTML form is represented by the Hidden widget. It means any data we will send this particular field of HTML will not be present on the screen instead that will get saved on the client side.

Constructor methods available for the hidden widget class:

Sr,no	Constructor
1	Hidden() constructor for Hidden.
2	Hidden (Element element) Subclasses may explicitly use an existing element using this function Object() { [native code] }.
3	Hidden (java.lang.String name) constructor for Hidden.
4	Hidden(java.lang.String name, java,lang.String value) constructor for Hidden.

Following are the methods available for the Hidden widget class in GWT:

Sr.no	Methods name and Description
1	java.lang.String getDefaultValue() gets the hidden field's default value.
2	java.lang.String getID() Obtains the hidden field's ID.
3	java.lang.String getName() obtains the hidden field's name.
4	java.lang.String getValue() get the hidden field's value.
5	void setDefaultValue(java.lang.String defaultValue) sets the hidden field's default value.
6	void setID(java.lang.String id) establishes the concealed field's id.
7	void setName(java.lang.String name) establishes the concealed field's name.
8	void setValue(java.lang.String value) sets the hidden field's value
9	static Hidden wrap(Element element) surrounds an existing input type='hidden'> element in a Hidden widget that is created.

The changed Style Sheet file war/Helloworld.css are listed below.

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;
}

Here is what the amended HTML host file war/HelloWorld.html contains

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "Helloworld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   <body>
      <h1>Hidden Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Let's look at the code in the Java file src/com.hellofriend/Helloworld.java that uses the Hidden widget.

package com.hellofriend.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.Button;
import com.google.gwt.user.client.ui.Hidden;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;


public class Helloworld implements EntryPoint {
   public void onModuleLoad() {
      //create textboxes
      final TextBox textBox = new TextBox(); 
      textBox.setWidth("275");
      Button button1 = new Button("Set Value of Hidden Input");
      Button button2 = new Button("Get Value of Hidden Input");
      final Hidden hidden = new Hidden();


      button1.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            hidden.setValue(textBox.getValue());
            Window.alert("Value of Hidden Widget Updated!");
         }
      });


      button2.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            Window.alert("Value of Hidden Widget: " + hidden.getValue());
         }
      });


      // Add widgets to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(textBox);
      panel.add(button1);
      panel.add(hidden);
      panel.add(button2);


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

You can also try this code with Online Java Compiler

Run Code

Output

Frequently asked question

What does the'module' tag in the GWT *.gwt.xml file mean?

This gives the application's name.

What does the 'entry-point' element in the GWT *.gwt.xml file mean?

This details the class name that will initiate the loading of the GWT application.

What does a GWT *.nocache.js file do?

It includes the javascript code needed to retrieve a.cache.html file using a lookup table created by the GWT compiler and resolve deferred binding configurations (for example, browser detection).

Define the Widget class.

For the vast majority of user-interface objects, widget serves as the foundation class. The support for getting events straight from the browser and adding them to panels is added by widget.

Which GWT widget serves as a suggestion box?

A text box or text area with a suggested box widget displays a pre-configured list of options that correspond to the user's input. One SuggestOracle is connected to each SuggestBox. Given a specified query string, the SuggestOracle is used to suggest a collection of choices.

Conclusion

In this article, we learned about GWT and GWT Hidden Widget class and how we can implement the GWT Hidden WIdget class with the help of the methods available for this particular class. We have also learned about the basic css and html code in order to implement the HIdden widget.

To learn more about the GWT article please refer to the following articles:

GWT Ui Binder

GWT focus panel

GWT grid

To learn more about DSA, competitive coding and many more knowledgeable topics, please look into the guided paths on Coding Ninjas Studio. Also, you can enroll in our courses and check out the mock test and problems available to you. Please check out our interview experiences and interview bundle for placement preparations.

Please upvote our blog to help other ninjas grow.

Happy Learning