« Previous | 1 | 2 | 3 | Next »

GWT FORM WIDGETS

Form widgets allow users to input data and provides them interaction capability with the application. Every form widget inherits properties from Widget class which in turn inherits properties from UIObject and Wigdet classes.

S.N.	Widget & Description
1	GWT UIObject Class This widget contains text, not interpreted as HTML using a <div>element, causing it to be displayed with block layout.
2	GWT Widget Class This widget can contain HTML text and displays the html content using a <div> element, causing it to be displayed with block layout.

GWT - UI Object Class

Introduction

The class UIObject is the superclass for all user-interface objects. It simply wraps a DOM element, and cannot receive events. It provides direct child classes like Widget, MenuItem, MenuItemSeparator, TreeItem.

All UIObject objects can be styled using CSS.
Every UIObject has a primary style name that identifies the key CSS style rule that should always be applied to it.
More complex styling behaviour can be achieved by manipulating an object's secondary style names.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.UIObject class:

public abstract class UIObject
extends java.lang.Object

Field

Following are the fields for com.google.gwt.user.client.ui.UIObject class:

public static final java.lang.String DEBUG_ID_PREFIX -- The element ID that you specify will be prefixed by the static string DEBUG_ID_PREFIX.

Class Constructors

S.N.	Constructor & Description
1	UIObject() This creates a UIObject for the child classes.

Class Methods

S.N.	Method & Description
1	void addStyleDependentName(java.lang.String styleSuffix) Adds a dependent style name by specifying the style name's suffix.
2	void addStyleName(java.lang.String style) Adds a secondary or dependent style name to this object.
3	static void ensureDebugId(Element elem, java.lang.String id) Ensure that elem has an ID property set, which allows it to integrate with third-party libraries and test tools.
4	protected static void ensureDebugId(Element elem, java.lang.String baseID, java.lang.String id) Set the debug id of a specific element.
5	ensureDebugId(java.lang.String id) Ensure that the main Element for this UIObject has an ID property set, which allows it to integrate with third-party libraries and test tools.
6	int getAbsoluteLeft() Gets the object's absolute left position in pixels, as measured from the browser window's client area.
7	int getAbsoluteTop() Gets the object's absolute top position in pixels, as measured from the browser window's client area.
8	Element getElement() Gets a handle to the object's underlying DOM element.
9	int getOffsetHeight() Gets the object's offset height in pixels.
10	int getOffsetWidth() Gets the object's offset width in pixels.
11	protected Element getStyleElement() Template method that returns the element to which style names will be applied.
12	java.lang.String getStyleName() Gets all of the object's style names, as a space-separated list.
13	protected static java.lang.String getStyleName(Element elem) Gets all of the element's style names, as a space-separated list.
14	java.lang.String getStylePrimaryName() Gets the primary style name associated with the object.
15	protected static java.lang.String getStylePrimaryName(Element elem) Gets the element's primary style name.
16	java.lang.String getTitle() Gets the title associated with this object.
17	boolean isVisible() Determines whether or not this object is visible.
18	static boolean isVisible(Element elem) Determines whether element is visible or not.
19	protected void onEnsureDebugId(java.lang.String baseID) Called when the user sets the id using the ensureDebugId(String) method.
20	void removeStyleDependentName(java.lang.String styleSuffix) Removes a dependent style name by specifying the style name's suffix.
21	void removeStyleName(java.lang.String style) Removes a style name.
22	protected void setElement(Element elem) Sets this object's browser element.
23	protected void setElement(Element elem) Sets this object's browser element.
24	void setHeight(java.lang.String height) Sets the object's height.
25	void setPixelSize(int width, int height) Sets the object's size, in pixels, not including decorations such as border, margin, and padding.
26	void setSize(java.lang.String width, java.lang.String height) Sets the object's size.
27	protected static void setStyleName(Element elem, java.lang.String styleName) Clears all of the element's style names and sets it to the given style.
28	protected static void setStyleName(Element elem, java.lang.String style, boolean add) This convenience method adds or removes a style name for a given element.
29	void setStyleName(java.lang.String style) Clears all of the object's style names and sets it to the given style.
30	protected static void setStylePrimaryName(Element elem, java.lang.String style) Sets the element's primary style name and updates all dependent style names.
31	void setStylePrimaryName(java.lang.String style) Sets the object's primary style name and updates all dependent style names.
32	void setTitle(java.lang.String title) Sets the title associated with this object.
33	void setVisible(boolean visible) Sets whether this object is visible.
34	static void setVisible(Element elem, boolean visible) Sets whether this element is visible
35	void setWidth(java.lang.String width) Sets the object's width.
36	java.lang.String toString() This method is overridden so that any object can be viewed in the debugger as an HTML snippet.
37	void unsinkEvents(int eventBitsToRemove) Removes a set of events from this object's event list.

Methods Inherited

This class inherits methods from the following classes:

java.lang.Object

GWT - Widget Class

Introduction

The class Widget is the base class for the majority of user-interface objects. Widget adds support for receiving events from the browser and being added directly to panels.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Widget class:

public class Widget
extends UIObject
implements EventListener

Field

Following are the fields for com.google.gwt.user.client.ui.Widget class:

public static final java.lang.String DEBUG_ID_PREFIX -- The element ID that you specify will be prefixed by the static string DEBUG_ID_PREFIX.

Class Constructors

S.N.	Constructor & Description
1	Widget() This creates a Widget for the child classes.

Class Methods

S.N.	Method & Description
1	protected <&H extends EventHandler> HandlerRegistration addDomHandler(H handler, DomEvent.Type<H> type) Adds a native event handler to the widget and sinks the corresponding native event.
2	protected <H extends EventHandler> HandlerRegistration addHandler(Hhandler, GwtEvent.Type<H> type) Adds this handler to the widget.
3	protected void delegateEvent(Widget target, GwtEvent<?> event) Fires an event on a child widget.
4	protected void doAttachChildren() If a widget implements HasWidgets, it must override this method and call onAttach() for each of its child widgets.
5	protected void doDetachChildren() If a widget implements HasWidgets, it must override this method and call onDetach() for each of its child widgets.
6	void fireEvent(GwtEvent<?> event) Fires the given event to all the appropriate handlers.
7	protected int getHandlerCount(GwtEvent.Type<?> type) Gets the number of handlers listening to the event type.
8	Widget getParent() Gets this widget's parent panel.
9	boolean isAttached() Determines whether this widget is currently attached to the browser's document (i.e., there is an unbroken chain of widgets between this widget and the underlying browser document).
10	protected boolean isOrWasAttached() Has this widget ever been attached?
11	protected void onAttach() This method is called when a widget is attached to the browser's document.
12	void onBrowserEvent(Event event) Fired whenever a browser event is received.
13	protected void onDetach() This method is called when a widget is detached from the browser's document.
14	protected void onLoad() Gets a handle to the object's underlying DOM element.
15	protected void onUnload() This method is called immediately before a widget will be detached from the browser's document.
16	void removeFromParent() Removes this widget from its parent widget.
17	void sinkEvents(int eventBitsToAdd) Overridden to defer the call to super.sinkEvents until the first time this widget is attached to the dom, as a performance enhancement.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject

Form Widgets

Following are the few important Form Widgets:

S.N.	Widget & Description
1	Button This widget represents a standard push button.
2	PushButton This widget represents a normal push button with custom styling.
3	ToggleButton This widget represents a stylish stateful button which allows the user to toggle between up and down states.
4	CheckBox This widget represents a standard check box widget. This class also serves as a base class for RadioButton.
5	RadioButton This widget represents a mutually-exclusive selection radio button widget.
6	ListBox This widget represents a list of choices to the user, either as a list box or as a drop-down list.
7	SuggestBox This widget represents a text box or text area which displays a pre-configured set of selections that match the user's input. Each SuggestBox is associated with a single SuggestOracle. The SuggestOracle is used to provide a set of selections given a specific query string.
8	TextBox This widget represents a single line text box.
9	PasswordTextBox This widget represents a text box that visually masks its input to prevent eavesdropping..
10	TextArea This widget represents a text box that allows multiple lines of text to be entered.
11	RichTextArea This widget represents a rich text editor that allows complex styling and formatting.
12	FileUpload This widget wraps the HTML <input type='file'> element.
13	Hidden This widget represets a hidden field in an HTML form.

GWT - Button Widget

Introduction

The Button widget represents a standard push button.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Button class:

public class Button
extends ButtonBase

CSS Style Rules

Following default CSS Style rule will be applied to all the Button widget. You can override it as per your requirements.

.gwt-Button { }

Class Constructors

S.N.	Constructor & Description
1	Button() Creates a button with no caption.
2	protected Button(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3	Button(java.lang.String html) Creates a button with the given HTML caption.
4	Button(java.lang.String html, ClickListener listener) Creates a button with the given HTML caption and click listener.

Class Methods

S.N.	Function name & Description
1	click() Programmatic equivalent of the user clicking the button.
2	static Button wrap(Element element) Creates a Button widget that wraps an existing <a> element.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.ButtonBase
java.lang.Object

Button Widget Example

This example will take you through simple steps to show usage of a Button Widget in GWT. Following steps will help you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>

<inherits name='com.google.gwt.user.User'/>

<inherits name='com.google.gwt.user.theme.clean.Clean'/>

<entry-point class='com.jtc.client.HelloWorld'/>

<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-Button{
color:red;
}
.gwt-Green-Button{
color:green;
}
.gwt-Blue-Button {
color:blue;
}

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>Button Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of Button widget.

package com.jtc.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.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
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);
}
}

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, then this will produce the following result:

When you click Click Me button, it will show an alert message saying Hello World!

GWT - PushButton Widget

Introduction

The PushButton widget represents a standard push button with custom styling.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.PushButton class:

public class PushButton
extends CustomButton

CSS Style Rules

Following default CSS Style rules will be applied to all the PushButton widget. You can override it as per your requirements.

.gwt-PushButton-up {}
.gwt-PushButton-down {}
.gwt-PushButton-up-hovering {}
.gwt-PushButton-down-hovering {}
.gwt-PushButton-up-disabled {}
.gwt-PushButton-down-disabled {}

Class Constructors

S.N.	Constructor & Description
1	PushButton() Constructor for PushButton.
2	PushButton(Image upImage) Creates a PushButton with up state image.
3	PushButton(Image upImage, ClickListener listener) Creates a PushButton with up state image and clickListener.
4	PushButton(Image upImage, Image downImage) Creates a PushButton with up state image.
5	PushButton(Image upImage, Image downImage, ClickListener listener) Creates a PushButton with up state image.
6	PushButton(java.lang.String upText) Creates a PushButton with up state text.
7	PushButton(java.lang.String upText, ClickListener listener) Creates a PushButton with up state text and clicklistener.
8	PushButton(java.lang.String upText, java.lang.String downText) Creates a PushButton with up state and down state text.
9	PushButton(java.lang.String upText, java.lang.String downText, ClickListener listener) Creates a PushButton with up state, down state text and click listener.

Class Methods

S.N.	Function name & Description
1	protected void onClick() Called when the user finishes clicking on this button.
2	protected void onClickCancel() Called when the user aborts a click in progress; for example, by dragging the mouse outside of the button before releasing the mouse button.
3	protected void onClickStart() Called when the user begins to click on this button.

Methods inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.CustomWidget
java.lang.Object

Push Button Widget Example

This example will take you through simple steps to show usage of a PushButton Widget in GWT. The following steps will help you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-PushButton{
color:red;
}
.gwt-PushButton-up {
color:green;
}
.gwt-PushButton-down {
color:blue;
}
.gwt-PushButton-up-hovering {
color:pink;
}
.gwt-PushButton-down-hovering {
color:aqua;
}
.gwt-PushButton-up-disabled {
color:lime;
}
.gwt-PushButton-down-disabled {
color:maroon;
}

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>PushButton Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of PushButton widget.

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 the following result:

When you click on Click Me! button, it will show an alert message as Hello World!

You can see the color of button text and its state will change with your interaction.

Hover over the button, color will be pink.
Press the button, color will be aqua.
Release the button, color will be green.

GWT - ToggleButton Widget

Introduction

The ToggleButton widget represents a stylish button which allows the user to toggle between up and down states.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.ToggleButton class:

public class ToggleButton
extends CustomButton

CSS Style Rules

Following default CSS Style rules will be applied to all the ToggleButton widgets. However, you can override it as per your requirements.

.gwt-ToggleButton-up {}
.gwt-ToggleButton-down {}
.gwt-ToggleButton-up-hovering {}
.gwt-ToggleButton-down-hovering {}
.gwt-ToggleButton-up-disabled {}
.gwt-ToggleButton-down-disabled {}

Class Constructors

S.N.	Constructor & Description
1	ToggleButton() Constructor for ToggleButton.
2	ToggleButton(Image upImage) Creates a ToggleButton with up state image.
3	ToggleButton(Image upImage, ClickListener listener) Creates a ToggleButton with up state image and clickListener.
4	ToggleButton(Image upImage, Image downImage) Creates a ToggleButton with up state image.
5	ToggleButton(Image upImage, Image downImage, ClickListener listener) Creates a ToggleButton with up state image.
6	ToggleButton(java.lang.String upText) Creates a ToggleButton with up state text.
7	ToggleButton(java.lang.String upText, ClickListener listener) Creates a ToggleButton with up state text and clicklistener.
8	ToggleButton(java.lang.String upText, java.lang.String downText) Creates a ToggleButton with up state and down state text.
9	ToggleButton(java.lang.String upText, java.lang.String downText, ClickListener listener) Creates a ToggleButton with up state, down state text and click listener.

Class Methods

S.N.	Function name & Description
1	boolean isDown() Is this button down?
2	protected void onClick() Called when the user finishes clicking on this button.
3	void setDown(boolean down) Sets whether this button is down.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.CustomWidget
java.lang.Object

Togglebutton Widget Example

This example will take you through simple steps to show usage of a ToggleButton Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-ToggleButton-up {
color:green;
}
.gwt-ToggleButton-down {
color:blue;
}
.gwt-ToggleButton-up-hovering {
color:pink;
}
.gwt-ToggleButton-down-hovering {
color:aqua;
}
.gwt-ToggleButton-up-disabled {
color:lime;
}
.gwt-ToggleButton-down-disabled {
color:maroon;
}

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>ToggleButton Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of ToggleButton widget.

public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
//create toggle buttons
ToggleButton toggleButton = new ToggleButton("Click Me!");
ToggleButton toggleButton1 = new ToggleButton("Click Me!");
//disable a toggle button
toggleButton1.setEnabled(false);
//add a clickListener to the toggle button
toggleButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Window.alert("Hello World!");
}
});
// Add toggle button to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(toggleButton);
panel.add(toggleButton1);
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, then this will produce the following result:

When you click Click Me button, it will show an alert message Hello World!

You can see color of button text will change with your interaction.

Hover over the button, color will be pink.
Press the button, color will be blue.
Release the button, button will remain down.

GWT - Check Box Widget

Introduction

The Checkbox widget represents a standard checkbox.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.CheckBox class:

public class CheckBox
extends ButtonBase
implements HasName

Css Style Rules

Following default CSS Style rules will be applied to all the CheckBox widget. You can override it as per your requirements.

.gwt-CheckBox {}
.gwt-CheckBox-disabled {}

Class Constructors

S.N.	Constructor & Description
1	CheckBox() Constructor for CheckkBox.
2	CheckBox(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3	CheckBox(java.lang.String label) Creates a check box with the specified text label.
4	CheckBox(java.lang.String label, boolean asHTML) Creates a check box with the specified text label and set its contents as HTML.

Class Methods

S.N.	Function name & Description
1	java.lang.String getName() Gets the widget's name.
2	int getTabIndex() Gets the widget's position in the tab index.
3	java.lang.String getText() Gets this object's text.
4	boolean isChecked() Determines whether this check box is currently checked.
5	boolean isEnabled() Gets whether this widget is enabled.
6	protected void onEnsureDebugId(java.lang.String baseID) Affected Elements: -label = label next to checkbox.
7	protected void onLoad() This method is called when a widget is attached to the browser's document.
8	protected void onUnload() This method is called when a widget is detached from the browser's document.
9	protected void replaceInputElement(Element elem) Replace the current input element with a new one.
10	void setAccessKey(char key) Sets the widget's 'access key'.
11	void setChecked(boolean checked) Checks or unchecks this check box.
12	void setEnabled(boolean enabled) Sets whether this widget is enabled.
13	void setFocus(boolean focused) Explicitly focus/unfocus this widget.
14	void setHTML(java.lang.String html) Sets this object's contents via HTML.
15	void setName(java.lang.String name) Sets the widget's name.
16	void setTabIndex(int index) Sets the widget's position in the tab index.
17	void setText(java.lang.String text) Sets this object's text.
18	void sinkEvents(int eventBitsToAdd) Adds a set of events to be sunk by this object.
19	java.lang.String getHTML() Gets this object's contents as HTML.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
java.lang.Object

CheckBox Widget Example

This example will take you through simple steps to show usage of a CheckBox Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.

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-CheckBox{
color:green;
}
.gwt-CheckBox-disabled {
color:green;
}

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>CheckBox Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of CheckBox widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Make a new check box, and select it by default.
CheckBox checkBox1 = new CheckBox("Check Me!");
CheckBox checkBox2 = new CheckBox("Check Me!");
// set check box as selected
checkBox1.setValue(true);
//disable a checkbox
checkBox2.setEnabled(false);
checkBox1.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
CheckBox checkBox = (CheckBox)event.getSource();
Window.alert("CheckBox is " +
(checkBox.getValue() ? "" : "not") + " checked");
}
});
// Add checkboxes to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(checkBox1);
panel.add(checkBox2);
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, then this will produce the following result:

When you click Click Me CheckBox, it will show an alert message saying CheckBox is checked or not checked.

GWT - Radio Button Widget

Introduction

The RadioButton widget represents a mutually exclusive selection radio button.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.RadioButton class:

public class RadioButton
extends CheckBox

CSS Style Rules

Following default CSS Style rules will be applied to all the RadioButton widget. You can override it as per your requirements.

.gwt-RadioButton {}

Class Constructors

S.N	Constructor & Description
1	RadioButton(java.lang.String name) Creates a new radio associated with a particular group name.
2	RadioButton(java.lang.String name,java.lang.String label) Creates a new radio associated with a particular group, and initialized with the given HTML label.
3	RadioButton(java.lang.String name,java.lang.String label, boolean asHTML) Creates a new radio button associated with a particular group, and initialized with the given label (optionally treated as HTML).

Class Methods

S.N.	Function name & Description
1	void setName(java.lang.String name) Change the group name of this radio button.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.CheckBox
java.lang.Object

Radio Button Widget Example

This example will take you through simple steps to show usage of a RadioButton Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-RadioButton{
color:green;
}

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>RadioButton Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of RadioButton widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RadioButton;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Create some radio buttons, all in one group 'radioGroup'.
RadioButton radioButton1 = new RadioButton("radioGroup", "First");
RadioButton radioButton2 = new RadioButton("radioGroup", "Second");
RadioButton radioButton3 = new RadioButton("radioGroup", "Third");
// Check 'First' by default.
radioButton1.setValue(true);
//disable 'Second' radio button
radioButton2.setEnabled(false);
// Add toggle button to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(radioButton1);
panel.add(radioButton2);
panel.add(radioButton3);
RootPanel.get("gwtContainer").add(panel);
}
}

public class ListBox
extends FocusWidget
implements SourcesChangeEvents, HasName

Css Style Rules

Following default CSS Style rules will be applied to all the ListBox widget. You can override it as per your requirements.

.gwt-ListBox {}

Class Constructors

S.N.	Constructor & Description
1	ListBox() Creates an empty list box in single selection mode.
2	ListBox(boolean isMultipleSelect) Creates an empty list box.
3	ListBox(Element element) This constructor may be used by subclasses to explicitly use an existing element.

Class Methods

S.N.	Function name & Description
1	void addItem(java.lang.String item) Adds an item to the list box.
2	void addItem(java.lang.String item, java.lang.String value) Adds an item to the list box, specifying an initial value for the item.
3	void clear() Removes all items from the list box.
4	int getItemCount() Gets the number of items present in the list box.
5	java.lang.String getItemText(int index) Gets the text associated with the item at the specified index.
6	java.lang.String getName() Gets the widget's name.
7	int getSelectedIndex() Gets the currently-selected item.
8	java.lang.String getValue(int index) Gets the value associated with the item at a given index.
9	int getVisibleItemCount() Gets the number of items that are visible.
10	void insertItem(java.lang.String item, int index) Inserts an item into the list box.
11	void insertItem(java.lang.String item, java.lang.String value, int index) Inserts an item into the list box, specifying an initial value for the item.
12	boolean isItemSelected(int index) Determines whether an individual list item is selected.
13	boolean isMultipleSelect() Gets whether this list allows multiple selection.
14	void onBrowserEvent(Event event) Fired whenever a browser event is received.
15	protected void onEnsureDebugId(java.lang.String baseID) Affected Elements: -item# = the option at the specified index.
16	void removeChangeListener(ChangeListener listener) Removes a previously added listener interface.
17	void removeItem(int index) Removes the item at the specified index.
18	void setItemSelected(int index, boolean selected) Sets whether an individual list item is selected.
19	void setItemText(int index,java.lang.String text) Sets the text at given index.
20	void setMultipleSelect(boolean multiple) Sets whether this list allows multiple selections.
21	void setName(java.lang.String name) Sets the widget's name.
22	void setSelectedIndex(int index) Sets the currently selected index.
23	void setValue(int index, java.lang.String value) Sets the value associated with the item at a given index.
24	void setVisibleItemCount(int visibleItems) Sets the number of items that are visible.
25	static ListBox wrap(Element element) Creates a ListBox widget that wraps an existing <select> element.
26	void addChangeListener(ChangeListener listener) Adds a listener interface to receive change events.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
java.lang.Object

List Box Widget Example

This example will take you through simple steps to show usage of a ListBox Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-ListBox{
color:green;
}

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>ListBox Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of ListBox widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Make a new list box, adding a few items to it.
ListBox listBox1 = new ListBox();
listBox1.addItem("First");
listBox1.addItem("Second");
listBox1.addItem("Third");
listBox1.addItem("Fourth");
listBox1.addItem("Fifth");
// Make a new list box, adding a few items to it.
ListBox listBox2 = new ListBox();
listBox2.addItem("First");
listBox2.addItem("Second");
listBox2.addItem("Third");
listBox2.addItem("Fourth");
listBox2.addItem("Fifth");
// Make enough room for all five items
listBox1.setVisibleItemCount(5);
//setting itemcount value to 1 turns listbox into a drop-down list.
listBox2.setVisibleItemCount(1);
// Add listboxes to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(listBox1);
panel.add(listBox2);
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, then this will produce following result:

GWT - Suggestion Box Widget

Introduction

The SuggestionBox widget represents a text box or text area which displays a pre-configured set of selections that match the user's input. Each SuggestBox is associated with a single SuggestOracle. The SuggestOracle is used to provide a set of selections given a specific query string.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.SuggestionBox class:

public final class SuggestBox
extends Composite
implements HasText, HasFocus, HasAnimation,
SourcesClickEvents, SourcesFocusEvents,
SourcesChangeEvents, SourcesKeyboardEvents,
FiresSuggestionEvents

Css Style Rules

Following default CSS Style rules will be applied to all the ListBox widget. You can override it as per your requirements.

.gwt-SuggestBox { }
.gwt-SuggestBoxPopup { }
.gwt-SuggestBoxPopup .item { }
.gwt-SuggestBoxPopup .item-selected { }
.gwt-SuggestBoxPopup .suggestPopupTopLeft { }
.gwt-SuggestBoxPopup .suggestPopupTopLeftInner { }
.gwt-SuggestBoxPopup .suggestPopupTopCenter { }
.gwt-SuggestBoxPopup .suggestPopupTopCenterInner { }
.gwt-SuggestBoxPopup .suggestPopupTopRight { }
.gwt-SuggestBoxPopup .suggestPopupTopRightInner { }
.gwt-SuggestBoxPopup .suggestPopupMiddleLeft { }
.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner { }
.gwt-SuggestBoxPopup .suggestPopupMiddleCenter { }
.gwt-SuggestBoxPopup .suggestPopupMiddleCenterInner { }
.gwt-SuggestBoxPopup .suggestPopupMiddleRight { }
.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner { }
.gwt-SuggestBoxPopup .suggestPopupBottomLeft { }
.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner { }
.gwt-SuggestBoxPopup .suggestPopupBottomCenter { }
.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner { }
.gwt-SuggestBoxPopup .suggestPopupBottomRight { }
.gwt-SuggestBoxPopup .suggestPopupBottomRightInner { }

Class Constructors

S.N.	Constructor & Description
1	SuggestBox() Constructor for Suggestion Box.
2	SuggestBox(SuggestOracle oracle) Constructor for Suggestion Box.
3	SuggestBox(SuggestOracle oracle, TextBoxBase box) Constructor for Suggestion Box.

Class Methods

S.N.	Function name & Description
1	void addChangeListener(ChangeListener listener) Adds a listener to recieve change events on the SuggestBox's text box.
2	void addClickListener(ClickListener listener) Adds a listener to recieve click events on the SuggestBox's text box.
3	void addEventHandler(SuggestionHandler handler) Adds a handler interface to receive suggestion events.
4	void addFocusListener(FocusListener listener) Adds a listener to recieve focus events on the SuggestBox's text box.
5	void addKeyboardListener(KeyboardListener listener) Adds a listener to recieve keyboard events on the SuggestBox's text box.
6	int getLimit() Gets the limit for the number of suggestions that should be displayed for this box.
7	SuggestOracle getSuggestOracle() Gets the suggest box's SuggestOracle.
8	int getTabIndex() Gets the widget's position in the tab index.
9	java.lang.String getText() Gets this object's text.
10	boolean isAnimationEnabled() Gets whether animation is enabled or not.
11	protected void onEnsureDebugId(java.lang.String baseID) Affected Elements: -popup = The popup that appears with suggestions. -items-item# = The suggested item at the specified index.
12	void removeChangeListener(ChangeListener listener) Removes a previously added listener interface.
13	void removeClickListener(ClickListener listener) Removes a previously added listener interface.
14	void removeEventHandler(SuggestionHandler handler) Removes a previously added listener interface.
15	void removeFocusListener(FocusListener listener) Removes a previously added listener interface.
16	void removeKeyboardListener(KeyboardListener listener) Removes a previously added listener interface.
17	void setAccessKey(char key) Sets the widget's 'access key'.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Composite
java.lang.Object

Suggeestion Box Widget Example

This example will take you through simple steps to show usage of a SuggestionBox Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-SuggestBox {
color: green;
}
.gwt-SuggestBoxPopup {
border: thin 1px solid green;
width: 200px;
}
.gwt-SuggestBoxPopup.item {
color: red;
}
.gwt-SuggestBoxPopup .item-selected {
color: gray;
}
.gwt-SuggestBoxPopup .suggestPopupTopLeft {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopLeftInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopCenter {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopCenterInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopRight {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopRightInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeft {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleCenter {
border: thin 1px solid green; width:200px;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleCenterInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleRight {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeft {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomCenter {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRight {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRightInner {
border: thin 1px solid green;
}

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>SuggestionBox Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of SuggestionBox widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
//create the suggestion data
MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("A");
oracle.add("AB");
oracle.add("ABC");
oracle.add("ABCD");
oracle.add("B");
oracle.add("BC");
oracle.add("BCD");
oracle.add("BCDE");
oracle.add("C");
oracle.add("CD");
oracle.add("CDE");
oracle.add("CDEF");
oracle.add("D");
oracle.add("DE");
oracle.add("DEF");
oracle.add("DEFG");
//create the suggestion box and pass it the data created above
SuggestBox suggestionBox = new SuggestBox(oracle);
//set width to 200px.
suggestionBox.setWidth("200");
// Add suggestionbox to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(suggestionBox);
RootPanel.get("gwtContainer").add(panel);
}
}

public class TextBox
extends TextBoxBase
implements HasDirection

CSS Style Rules

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

Class Constructors

S.N.	Constructor & Description
1	TextBox() Creates an empty text box.
2	TextBox(Element element) This constructor may be used by subclasses to explicitly use an existing element.

Class methods

S.N.	Function name & Description
1	HasDirection.Direction getDirection() Gets the directionality of the widget.
2	int getMaxLength() Gets the maximum allowable length of the text box.
3	int getVisibleLength() Gets the number of visible characters in the text box.
4	void setDirection(HasDirection.Direction direction) Sets the directionality for a widget.
5	void setMaxLength(int length) Sets the maximum allowable length of the text box.
6	void setVisibleLength(int length) Sets the number of visible characters in the text box.
7	static TextBox wrap(Element element) Creates a TextBox widget that wraps an existing <input type='text'> element.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.TextBoxBase
java.lang.Object

Text Box Widget Example

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:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>

<inherits name='com.google.gwt.user.theme.clean.Clean'/>

<entry-point class='com.jtc.client.HelloWorld'/>

<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.jtc/HelloWorld.java which will demonstrate use of TextBox widget.

package com.jtc.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);
}
}

public class PasswordTextBox
extends TextBox

CSS Style Rules

Following default CSS Style rules will be applied to all the PasswordTextBox widget. You can override it as per your requirements.

.gwt-PasswordTextBox {}
.gwt-PasswordTextBox-readonly {}

Class Constructors

S.N.	Constructor & Description
1	PasswordTextBox() Creates an empty password text box.
2	PasswordTextBox(Element element) This constructor may be used by subclasses to explicitly use an existing element.

Class Methods

S.N.	Function name & Description
1	static PasswordTextBox wrap(Element element) Creates a PasswordTextBox widget that wraps an existing <input type='password'> element.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.TextBoxBase
com.google.gwt.user.client.ui.TextBox
java.lang.Object

Password Text Box Widget Example

This example will take you through simple steps to show usage of a PasswordTextBox Widget in GWT. Follow the following steps to update the GWT application we created inGWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-PasswordTextBox {
color: green;
}
.gwt-PasswordTextBox-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>PasswordTextBox Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of PasswordTextBox widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
//create password textboxes
PasswordTextBox passwordTextBox1 = new PasswordTextBox();
PasswordTextBox passwordTextBox2 = new PasswordTextBox();
//add text to text box
passwordTextBox2.setText("hell@W@rld");
//set textbox as readonly
passwordTextBox2.setReadOnly(true);
// Add text boxes to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(passwordTextBox1);
panel.add(passwordTextBox2);
RootPanel.get("gwtContainer").add(panel);
}
}

public class TextArea
extends TextBoxBase
implements HasDirection

CSS Style Rules

Following default CSS Style rules will be applied to all the TextBox widget. You can override it as per your requirements.

.gwt-TextArea {}
.gwt-TextArea-readonly {}

Class Constructors

S.N.	Constructor & Description
1	TextArea() Creates an empty text area.

Class Methods

S.N.	Function name & Description
1	int getCharacterWidth() Gets the requested width of the text box (this is not an exact value, as not all characters are created equal).
2	int getCursorPos() Gets the current position of the cursor (this also serves as the beginning of the text selection).
3	HasDirection.Direction getDirection() Gets the directionality of the widget.
4	int getSelectionLength() Gets the length of the current text selection.
5	int getVisibleLines() Gets the number of text lines that are visible.
6	void setCharacterWidth(int width) Sets the requested width of the text box (this is not an exact value, as not all characters are created equal).
7	void setDirection(HasDirection.Direction direction) Sets the directionality for a widget.
8	void setVisibleLines(int lines) Sets the number of text lines that are visible.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
com.google.gwt.user.client.ui.TextBoxBase
java.lang.Object

Textbox Widget Example

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:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-TextArea {
color: green;
}
.gwt-TextArea-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>TextArea Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of TextBox widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
//create textarea elements
TextArea textArea1 = new TextArea();
TextArea textArea2 = new TextArea();
//set width as 10 characters
textArea1.setCharacterWidth(20);
textArea2.setCharacterWidth(20);
//set height as 5 lines
textArea1.setVisibleLines(5);
textArea2.setVisibleLines(5);
//add text to text area
textArea2.setText(" Hello World! \n Be Happy! \n Stay Cool!");
//set textbox as readonly
textArea2.setReadOnly(true);
// Add text boxes to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(textArea1);
panel.add(textArea2);
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, then this will produce the following result:

GWT - Rich Text Area Widget

Introduction

The RichTextArea widget represents a rich text editor that allows complex styling and formatting. As some browsers do not support rich text editing, and others support only a limited subset of functionality, there are two formatter interfaces accessed via getBasicFormatter() and getExtendedFormatter().

A browser which does not support rich text editing at all will return null for both of these and one that supports only the basic functionality will return null for the latter getExtendedFormatter().

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.RichTextArea class:

public class RichTextArea
extends FocusWidget
implements HasHTML, HasInitializeHandlers, HasSafeHtml

CSS Style Rules

Following default CSS Style rules will be applied to all the TextBox widget. You can override it as per your requirements.

.gwt-RichTextArea {}

Class Constructors

S.N.	Constructor & Description
1	RichTextArea() Creates a new, blank RichTextArea object with no stylesheet.

Class Methods

S.N.	Function name & Description
1	HandlerRegistration addInitializeHandler(InitializeHandler handler) Adds an InitializeEvent handler.
2	RichTextArea.BasicFormatter getBasicFormatter() Deprecated. use getFormatter() instead.
3	RichTextArea.ExtendedFormatter getExtendedFormatter() Deprecated. use getFormatter() instead.
4	RichTextArea.Formatter getFormatter() Gets the rich text formatting interface.
5	java.lang.String getHTML() Gets this object's contents as HTML.
6	java.lang.String getText() Gets this object's text.
7	boolean isEnabled() Gets whether this widget is enabled.
8	protected void onAttach() This method is called when a widget is attached to the browser's document.
9	protected void onDetach() This method is called when a widget is detached from the browser's document.
10	void setEnabled(boolean enabled) Sets whether this widget is enabled.
11	void setFocus(boolean focused) Explicitly focus/unfocus this widget.
12	void setHTML(java.lang.String safeHtml) Sets this object's contents via safe HTML.
13	void setHTML(java.lang.String html) Sets this object's contents via HTML.
14	void setText(java.lang.String text) Sets this object's text.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
java.lang.Object

Richtextbox Widget Example

This example will take you through simple steps to show usage of a RichTextBox Widget in GWT. The following steps will help you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-RichTextArea {
padding:10px;
}

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>RichTextArea Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of TextBox widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RichTextArea;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel; public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
//create RichTextArea elements
RichTextArea richTextArea = new RichTextArea();
richTextArea.setHeight("200");
richTextArea.setWidth("200");
//add text to text area
richTextArea.setHTML("<b>Hello World!</b> <br/> <br/>" +
"<i>Be Happy!</i> </br> <br/> <u>Stay Cool!</u>");
// Add text boxes to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(richTextArea);
RootPanel.get("gwtContainer").add(panel);
}
}

public class FileUpload
extends Widget
implements HasName, HasChangeHandlers

Css Style Rules

Following default CSS Style rules will be applied to all the TextBox widget. You can override it as per your requirements.

.gwt-FileUpload {}

Class Constructors

S.No	Constructor & Description
1	FileUpload() Constructs a new file upload widget.
2	FileUpload(Element element) This constructor may be used by subclasses to explicitly use an existing element.

Class Methods

S.No	Function name & Description
1	HandlerRegistration addChangeHandler(ChangeHandler handler) Adds a ChangeEvent handler.
2	java.lang.String getFilename() Gets the filename selected by the user.
3	java.lang.String getName() Gets the widget's name.
4	boolean isEnabled() Gets whether this widget is enabled.
5	void onBrowserEvent(Event event) Fired whenever a browser event is received.
6	void setEnabled(boolean enabled) Sets whether this widget is enabled.
7	void setName(java.lang.String name) Sets the widget's name.
8	static FileUpload wrap(Element element) Creates a FileUpload widget that wraps an existing <input type='file'> element.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

Fileupload Widget Example

This example will take you through simple steps to show usage of a FileUpload Widget in GWT. The following steps will help you update the GWT application which is created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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-FileUpload {
color: green;
}

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>FileUpload Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of FileUpload widget.

package com.jtc.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.FileUpload;
import com.google.gwt.user.client.ui.FormPanel;
import com.google.gwt.user.client.ui.FormPanel.SubmitCompleteEvent;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
VerticalPanel panel = new VerticalPanel();
//create a FormPanel
final FormPanel form = new FormPanel();
//create a file upload widget
final FileUpload fileUpload = new FileUpload();
//create labels
Label selectLabel = new Label("Select a file:");
//create upload button
Button uploadButton = new Button("Upload File");
//pass action to the form to point to service handling file
//receiving operation.
form.setAction("http://www.jtc.com/gwt/myFormHandler");
// set form to use the POST method, and multipart MIME encoding.
form.setEncoding(FormPanel.ENCODING_MULTIPART);
form.setMethod(FormPanel.METHOD_POST);
//add a label
panel.add(selectLabel);
//add fileUpload widget
panel.add(fileUpload);
//add a button to upload the file
panel.add(uploadButton);
uploadButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
//get the filename to be uploaded
String filename = fileUpload.getFilename();
if (filename.length() == 0) {
Window.alert("No File Specified!");
} else {
//submit the form
form.submit();
}
}
});
form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
@Override
public void onSubmitComplete(SubmitCompleteEvent event) {
// When the form submission is successfully completed, this
//event is fired. Assuming the service returned a response
//of type text/html, we can get the result text here
Window.alert(event.getResults());
}
});
panel.setSpacing(10);
// Add form to the root panel.
form.add(panel);
RootPanel.get("gwtContainer").add(form);
}
}

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, then this will produce the following result:

Following is the java server page code snippet demonstrating server side capability for file upload. We're using Common IO and Commons FileUpload libraries to add file-upload capability to server side page. File will be uploaded to uploadFiles folder relative to location where upload.jsp is located on server side.

<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.io.FilenameUtils"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.io.File"%>
<%@page import="java.io.FileOutputStream"%>
<%@page import="java.io.InputStream"%>
<%
// Create a factory for disk-based file items
FileItemFactory factory = new DiskFileItemFactory();
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
try{
// Parse the request
List items = upload.parseRequest(request);
// Process the uploaded items
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
//handling a normal form-field
if(item.isFormField()) {
System.out.println("Got a form field");
String name = item.getFieldName();
String value = item.getString();
System.out.print("Name:"+name+",Value:"+value);
} else {//handling file loads
System.out.println("Not form field");
String fieldName = item.getFieldName();
String fileName = item.getName();
if (fileName != null) {
fileName = FilenameUtils.getName(fileName);
}
String contentType = item.getContentType();
boolean isInMemory = item.isInMemory();
long sizeInBytes = item.getSize();
System.out.print("Field Name:"+fieldName
+",File Name:"+fileName);
System.out.print("Content Type:"+contentType
+",Is In Memory:"+isInMemory+",Size:"+sizeInBytes);
byte[] data = item.get();
fileName = getServletContext()
.getRealPath( "/uploadedFiles/" + fileName);
System.out.print("File name:" +fileName);
FileOutputStream fileOutSt = new
FileOutputStream(fileName);
fileOutSt.write(data);
fileOutSt.close();
out.print("File Uploaded Successfully!");
}
}
} catch(Exception e){
out.print("File Uploading Failed!" + e.getMessage());
}
%>

GWT - Hidden Widget

Introduction

The Hidden widget represents a hidden field in an HTML form.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Hidden class:

public class Hidden
extends Widget
implements HasName

Class Constructors

S.N.	Constructor & Description
1	Hidden() Constructor for Hidden.
2	Hidden(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3	Hidden(java.lang.String name) Constructor for Hidden.
4	Hidden(java.lang.String name, java.lang.String value) Constructor for Hidden.

Class Methods

S.N.	Function name & Description
1	java.lang.String getDefaultValue() Gets the default value of the hidden field.
2	java.lang.String getID() Gets the id of the hidden field.
3	java.lang.String getName() Gets the name of the hidden field.
4	java.lang.String getValue() Gets the value of the hidden field.
5	void setDefaultValue(java.lang.String defaultValue) Sets the default value of the hidden field.
6	void setID(java.lang.String id) Sets the id of the hidden field.
7	void setName(java.lang.String name) Sets the name of the hidden field.
8	void setValue(java.lang.String value) Sets the value of the hidden field.
9	static Hidden wrap(Element element) Creates a Hidden widget that wraps an existing <input type='hidden'> element.

Methods Inherited

This class inherits methods from the following classes:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

Hidden Widget Example

This example will take you through simple steps to show usage of a Hidden Widget in GWT. Follow the following steps to update

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

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

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>Hidden Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of Hidden widget.

« Previous | 1 | 2 | 3 | Next »

The largest Interview Solution Library on the web

GWT FORM WIDGETS