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 :
1 2 3 4 5 6 7 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Simple GWT Host Page</title> <script type="text/javascript" language="javascript" src="com.google.gwt.sample.tempraturewatch.TempratureWatch.nocache.js"></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 :
1 2 | final Button button = new Button("Submit"); RootPanel.get("tempratureWatchDiv").add(button); |
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
Widgets are controls which allow the users to interact with the system. Lets look at the different types of widgets available in GWT:
- Button
- TextBox
- Tree
- RichTextArea
- Checkbox
- RadioButton
- PasswordTextBox
- TextArea
- Hyperlink
- Listbox
- MenuBar
- SuggestBox
- Table
- Dialog Box
– Button enables the user to take a certain action
– Textbox allows the user to enter data as text
– Tree represents a hierarchy of other widgets
– RichTextArea provides the user to perform editing features on text
– Checkbox allows multiple selection of items
– RadioButton allows only single selection of items
– PasswordTextBox is used to input password. The typed characters are not displayed as it is.
– TextArea allows the user to enter text over multiple lines
– Hyperlink allows you to link to an URL
– Listbox allows multiple selection from a list of items
– MenuBar allows you to implement a standard menu bar. Menu bar can hold one or more menus.
– SuggestBox is like a textbox but it provides suggestions based on the user input. The suggestions provided are pre-configured.
– Table control mimics the HTML table
– Dialog Box represents a form of popup
In addition to these we can also create custom widgets.
Panels
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
- Horizontal Panel
- Tab Panel
- Root Panel
- Stack Panel
- Popup Panel
- Vertical Panel
- Flow Panel
- Vertical Split Panel
- Horizontal Split Panel
– Using dock panels the widgets are aligned directionally
– Provides horizontal alignment of controls
– Provides tabular arrangement of controls
– The Root panel holds the reference to the entire GWT interface.
– The stack panel displays the components vertically by stacking its children.
– The popup panel is a popup which can popup up over other widgets
– The vertical panel lays out the components in a vertical column
– This panel lays out it components in the same manner as the default HTML layout
– This panels splits the window verticals into two widgets
– 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:
1 2 | Label nameLabel = new Label(); nameLabel.addStyleName("LabelStyle"); |
The next step would be to define the style attribute in the CSS file:
1 2 3 4 | .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.
1 2 3 4 5 | <module> <!--Other application level settings--> ....... <stylesheet src="MyStyleSheet.css"> </stylesheet></module> |
GWT Reference
- GWT installation and creating a GWT Project
- GWT Articles