GWT - TextBox Widget

The TextBox widget represents a standard single-line text box.
Following is the declaration for com.google.gwt.user.client.ui.TextBox class −
public class TextBox
   extends TextBoxBase
      implements HasDirection
Following default CSS Style rules will be applied to all the TextBox widget. You can override it as per your requirements.
.gwt-TextBox {}

.gwt-TextBox-readonly {} 
TextBox()
Creates an empty text box.
TextBox(Element element)
This constructor may be used by subclasses to explicitly use an existing element.
HasDirection.Direction getDirection()
Gets the directionality of the widget.
int getMaxLength()
Gets the maximum allowable length of the text box.
int getVisibleLength()
Gets the number of visible characters in the text box.
void setDirection(HasDirection.Direction direction)
Sets the directionality for a widget.
void setMaxLength(int length)
Sets the maximum allowable length of the text box.
void setVisibleLength(int length)
Sets the number of visible characters in the text box.
static TextBox wrap(Element element)
Creates a TextBox widget that wraps an existing <input type='text'> element.
This class inherits methods from the following classes −
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.TextBoxBase
com.google.gwt.user.client.ui.TextBoxBase
java.lang.Object
java.lang.Object
This example will take you through simple steps to show usage of a TextBox Widget in GWT. Follow the following steps to update the GWT application we created in GWT -  Create Application chapter −
Following is the content of the modified module descriptor src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

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

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>
Following is the content of the modified Style Sheet file war/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-TextBox {
   color: green; 
}

.gwt-TextBox-readonly {
   background-color: yellow;	
}
Following is the content of the modified HTML host file war/HelloWorld.html.
<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>TextBox Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>
Let us have following content of Java file src/com.tutorialspoint/HelloWorld.java which will demonstrate use of TextBox widget.
package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
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
      TextBox textBox1 = new TextBox(); 
      TextBox textBox2 = new TextBox();

      //add text to text box
      textBox2.setText("Hello World!");

      //set textbox as readonly
      textBox2.setReadOnly(true);

      // Add text boxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(textBox1);
      panel.add(textBox2);

      RootPanel.get("gwtContainer").add(panel);
   }	
}
Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result −
 Print
 Add Notes
 Bookmark this page