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

– 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

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:

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

Installing GWT

To develop programs using the GWT we need to first download it from here : GWT download.
Once you have it installed the next step would be to update the PATH environmental variable. For example if you have installed GWT in you C: drive as C:gwt-windows-1.5.3 then append this path to the end of the PATH variable. Once this is done you are ready to create GWT projects.

[Note: You need JDK 1.5 or above to develop GWT projects. You also need an IDE to develop the GWT projects. We will use Eclipse IDE in this tutorial]

Creating an Eclipse GWT project

Once the installation part is over we can now jump onto creating a new GWT project. Lets create a project which shows the temprature of cities.

• Open windows command prompt and navigate to the GWT installation directory. For e.g: C:gwt-windows-1.5.3>
• Create a directory by using the following command in current path:

  mkdir TempratureWatch

• Change your current working directory to the directory we just created by using the following command:

  cd TempratureWatch

  After executing this command you should be at this location :

  C:gwt-windows-1.5.3TempratureWatch>

• Next type the following command in the current path:

  projectCreator -eclipse TempratureWatch -out TempratureWatch
  

  After executing this command, a directory by the name TempratureWatch is created. Inside the directoty we see the following directory and files :

  • src – directory for storing the project source code
  • test – directory for storing unit testcase
  • .classpath – file used by Eclipse
  • .project – file used by Eclipse
• Next execute the following command :

  applicationCreator -eclipse TempratureWatch -out TempratureWatch com.google.gwt.sample.tempraturewatch.client.TempratureWatch
  

  This command creates a package structure as specified in the command line and creates a java class called TempratureWatch.java which would be the application’s entry point. The package structure chosen is as per GWT naming conventions. The entry point class must always be inside the client directory. The command also create an XML document called TempratureWatch.gwt at this location com.google.gwt.sample.tempraturewatch. This file will hold configuration settings for the GWT application.

Importing the project to Eclipse

Once you have the project directories created by using the commands explained in the last section the next step would be import the project to Eclipse. This can be done by using the following steps :

• Start Eclipse, then select File -> Import
• Select the project root directory by selecting: General -> Existing Projects into Workspace
• Select directory of the project. In our example we should choose: C:gwt-windows-1.5.3TempratureWatch
• Click Finish

Once done, you should be able to see the imported project in the Eclipse workspace. To run the application in hosted mode select the project and select the Run option under the Run menu. If the program starts successfully then you should be able to see a sample page which is created by default when you create a GWT project.

Difference between Hosted mode and Web mode

There are two possible ways by which we can execute our GWT project:

• Hosted mode
• Web mode

The way we started our application in the last section was the Hosted mode execution. In hosted mode the application is converted to bytecode and executed by the JVM (very much like java). This allows us to take advantage of the Java language API. In addition to this the hosted mode also allows us to debug application easily.

In Web mode the code is converted to JavaScript and executed by the browser.