Widgets and Panels

You construct user interfaces in GWT applications using widgets that are contained within panels. Widgets allow you to interact with the user. Panels control the placement of user interface elements on the page. Widgets and panels work the same way on all browsers; by using them, you eliminate the need to write specialized code for each browser.

Widgets

Widgets define your applications input and output with the user. Examples of widgets include the following:

Button A user clicks the mouse button to activate the button.

TextBox The application can display text and the user can type in the text box.

Tree A collapsible hierarchy of widgets.

RichTextArea A text editor that allows R

You are not limited to the set of widgets provided by GWT. There are a number of ways to create custom widgets:

You can bundle together existing widgets and create a composite widget.
You can write GWT bindings to an existing JavaScript widget.
You can create your own widget from scratch using either Java or JavaScript.

You can also use one or more of the many third party widget libraries written for GWT.

Panels

Panels contain widgets and other panels. They are used to define the layout of the user interface in the browser. Examples of panels include the following:

DockPanel Arranges widgets and subpanels using directional alignment.

HorizontalPanel Arranges widgets and subpanels horizontally.

TabPanel Arranges subpanels and widgets under tabs.

RootPanel This panel encapsulates your entire GWT user interface.

Styles

Visual styles are applied to widgets using Cascading Style Sheets (CSS). Besides the default browser supplied definitions, each GWT widget and panel has pre-defined style sheet class definitions documented in the class reference documentation.

Widgets and Panels

Widgets

Panels

Styles

See Also