We modified the look and feel of the label by using a cascading stylesheet, and assigning the name of a style to the label in HelloGWT.java. We will learn more about using stylesheets and styles to beautify GWT in Chapter 6.

The user interface in this application is very simple. Hence we added the label straight to the RootPanel. However, in almost any non trivial user interface, we will need to position the widgets and lay them out more accurately. We can easily accomplish this by utilizing the various layout and panel classes in the GWT UI framework. We will learn how to use these classes in Chapters 4 and 5.

Running the Application in Hosted Mode

GWT provides a great way to test your application without deploying it but by running the application in a hosted mode. In this section, we will learn how to run the HelloGWT application in hosted mode.

Time for Action--Executing the HelloGWT-Shell Script

You can run the HelloGWT application in hosted mode by executing the HelloGWT-shell script. You can do this in three different ways:

Executing the command script from the shell:

Open a command prompt and navigate to the HelloGWT directory. Run
HelloGWT-shell.cmd to start the HelloGWT application in hosted mode.

Executing the command script from inside Eclipse:

Double-click on the HelloGWT-shell.cmd file in the Eclipse Package
Explorer or navigator view. This will execute the file and will start up the HelloGWT application in hosted mode.

Running the HelloGWT.launcher from Eclipse:

In Eclipse, navigate to the Run screen by clicking on the Run | Run link.
Expand the Java Application node. Select the HelloGWT directory. Click on the Run link to launch the HelloGWT application in hosted mode.

You will see the following screen if the application runs properly:

What Just Happened?

The command script executes the GWT development shell by providing it with the application class name as a parameter. The Eclipse launcher mimics the command script by creating a launch configuration that executes the GWT development shell from within the Eclipse environment. The launched GWT development shell loads the specified application in an embedded browser window, which displays the application. In hosted mode, the Java code in the project is not compiled into JavaScript. The application code is being run in the Java Virtual Machine as
compiled bytecode.

Running the Application in Web Mode

In the previous section, we learned how to run GWT applications in hosted mode without deploying them. That is a great way to test and debug your application. However, when your application is running in a production environment, it will be deployed to a servlet container such as Tomcat. This task explains how to compile the HelloGWT application so that it can then be deployed to any servlet container. In GWT terms, this is referred to as running in the web mode.

Time for Action--Compile the Application

In order to run the HelloGWT application in web mode we need to do the following:

1.Compile the HelloGWT application first, by running the
HelloGWT-compile script.

HelloGWT-compile.cmd

2.The above step will create a www folder in the HelloGWT directory. Navigate to the www/com.packtpub.gwt.HelloGWT.HelloGWT directory.

3.Open the HelloGWT.html file in your web browser.

Everything needed to run the HelloGWT client application is contained in the www folder. You can deploy the contents of the folder to any servlet container and serve up the HelloGWT application. Here are the contents of the folder after completing the above steps:

What Just Happened?

The HelloGWT-compile script invokes the GWT compiler and compiles all the Java source code in the com.packtpub.gwt.hellogwt.client package into HTML and JavaScript and copies it to the wwwcom.packtpub.gwt.hellogwt.HelloGWT directory. This directory name is automatically created by GWT, by removing the client portion from the fully qualified class name provided to applicationCreator previously. This folder contains a ready-to-deploy version of the HelloGWT client application. It contains: