GWT user interface components

HTML host page

A GWT module needs a HTML host page to run. The HTML page includes the GWT project through the script tag. In the HTML page we do not add any HTML code ourselves. It is the responsibility of the developer to programmatically include content into the HTML page through GWT. Lets look at a sample HTML host page :

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Simple GWT Host Page</title>
    <script type="text/javascript" language="javascript" src=""></script>
    <div id="tempratureWatchDiv"></div>

In the above host page we can see that the GWT application is included through the script tag. The nocache.js is an auto generated file created using the applicationcreator command (Refer : GWT installation and creating a GWT Project for information on the applicationcreator). Next, we can see a div tag with the id attribute.
In GWT we can insert content into selective sections of the HTML page. Lets look at an example :

final Button button = new Button("Submit");

In the above code snippet, we can see that usage of the class RootPanel. The RootPanel is the container for all other GWT components. We use the RootPanel class to get a reference of tempratureWatchDiv division. Once we have a reference to it we can add Widgets(controls) to the html page.


Widgets are controls which allow the users to interact with the system. Lets look at the different types of widgets available in GWT:

  • Button
  • – Button enables the user to take a certain action

  • TextBox
  • – Textbox allows the user to enter data as text

  • Tree
  • – Tree represents a hierarchy of other widgets

  • RichTextArea
  • – RichTextArea provides the user to perform editing features on text

  • Checkbox
  • – Checkbox allows multiple selection of items

  • RadioButton
  • – RadioButton allows only single selection of items

  • PasswordTextBox
  • – PasswordTextBox is used to input password. The typed characters are not displayed as it is.

  • TextArea
  • – TextArea allows the user to enter text over multiple lines

  • Hyperlink
  • – Hyperlink allows you to link to an URL

  • Listbox
  • – Listbox allows multiple selection from a list of items

  • MenuBar
  • – MenuBar allows you to implement a standard menu bar. Menu bar can hold one or more menus.

  • SuggestBox
  • – SuggestBox is like a textbox but it provides suggestions based on the user input. The suggestions provided are pre-configured.

  • Table
  • – Table control mimics the HTML table

  • Dialog Box
  • – Dialog Box represents a form of popup

In addition to these we can also create custom widgets.


Panels are used as container for widgets and subpanels. Panels also define how the widgets will be laid out. Lets look at the type of panels in GWT:

  • Dock Panel
  • – Using dock panels the widgets are aligned directionally

  • Horizontal Panel
  • – Provides horizontal alignment of controls

  • Tab Panel
  • – Provides tabular arrangement of controls

  • Root Panel
  • – The Root panel holds the reference to the entire GWT interface.

  • Stack Panel
  • – The stack panel displays the components vertically by stacking its children.

  • Popup Panel
  • – The popup panel is a popup which can popup up over other widgets

  • Vertical Panel
  • – The vertical panel lays out the components in a vertical column

  • Flow Panel
  • – This panel lays out it components in the same manner as the default HTML layout

  • Vertical Split Panel
  • – This panels splits the window verticals into two widgets

  • Horizontal Split Panel
  • – This panels splits the window horizontally into two widgets

Style Sheets

In GWT we can apply style information to content by using Cascading Style Sheets (CSS). This is very similar to the way we apply style information to HTML pages. Each widget class in GWT has a addStyleName method which takes a string parameter. The string parameter associates a style name with the widget. The same name should be defined in the CSS file. Under the name we can set visual styling information. The reference to the CSS should be made in the GWT module. Let us now look at how we can make use of style sheets in a GWT application.

As a first step we have to associate the style attribute in the Java class:

Label nameLabel = new Label();

The next step would be to define the style attribute in the CSS file:

.LabelStyle {
  color: blue;
  font-size: large;

The final step would be to declare the style sheet file in the XML module. This enables the GWT to know exactly where to look for the styling information.

	<!--Other application level settings-->
	<stylesheet src='MyStyleSheet.css' />

GWT Reference

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!