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 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.
  • img
  • TextBox The application can display text and the user can type in the text box.

  • img
  • Tree A collapsible hierarchy of widgets.

  • img
  • RichTextArea A text editor that allows users to apply rich formatting of the text.

  • img

For the complete list of GWT UI elements, see Widget Gallery.

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.


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.

See Also