GWT – CREATE APPLICATION

As the power of GWT lies in Write in Java, Run in JavaScript, we'll be using Java IDE Eclipse to demonstrate our examples.

Let's start with a simple HelloWorld application:

Step 1 – Create Project

The first step is to create a simple Web Application Project using Eclipse IDE. Launch project wizard using the option Google Icon > New Web Application Project.... Now name your project as HelloWorld using the wizard window as follows:

Unselect Use Google App Engine because we're not using it in this project and leave other default values (keep the Generate Sample project code option checked as such and click Finish Button).

Once your project is created successfully, you will have the following content in your Project Explorer:

Here is a brief description of all the important folders

Folder	Location
src	Source code (java classes) files. Client folder containing the client-side specific java classes responsible for client UI display. Server folder containing the server-side java classes responsible for server side processing. Shared folder containing the java model class to transfer data from server to client and vice versa. HelloWorld.gwt.xml, a module descriptor file required for GWT compiler to compile the HelloWorld project.
test	Test code (java classes) source files. Client folder containing the java classes responsible to test gwt client side code.
war	This is the most important part, it represents the actual deployable web application. WEB-INF containing compiled classes, gwt libraries, servlet libraries. HelloWorld.css, project style sheet. HelloWorld.html, hots HTML which will invoke GWT UI Application.

Step 2 - Modify Module Descriptor: HelloWorld.gwt.xml

GWT plugin will create a default module descriptor file src/com.jtc/HelloWorld.gwt.xml which is given below. For this example, we are not modifying it, but you can modify it later based on your requirement.


Step 3 - Modify Style Sheet: HelloWorld.css

GWT plugin will create a default Style Sheet file war/HelloWorld.css. Now, let us modify this file to keep our example simple and easier to understand


Step 4 - Modify Host File: HelloWorld.html

GWT plugin will create a default HTML host file war/HelloWorld.html. Let us modify this file to keep our example simple and easier to understand


You can create more static files like HTML, CSS or images in the same source directory or you can create further sub-directories and move files in those sub-directories and configure those sub-directories in module descriptor of the application.


Step 5 - Modify Entry Point: HelloWorld.java

GWT plugin will create a default Java file src/com.jtc/HelloWorld.java, which keeps an entry point for the application.

Let us modify this file to display "Hello,World!"


You can create more Java files in the same source directory to define either entry points or to define helper routines.

Step 6 - Compile Application

Once you are ready with all the changes done, its time to compile the project. Use the option Google Icon > GWT Compile Project... to launch GWT Compile dialogue box as shown below

Keep the default values intact and click Compile button. If everything goes fine, you will see following output in Eclipse console


Step 7 - Run Application

Now click on Run application menu and select HelloWorld application to run the application.

If everything is fine, you must see GWT Development Mode active in Eclipse containing a URL as shown below. Double click the URL to open the GWT application.

Because you are running your application in development mode, you will also need to install GWT plugin for your browser. Simply follow the onscreen instructions to install the plugin.

If you already have GWT plugin set for your browser, then you should be able to see the following output

Congratulations! You have implemented your first application using Google Web Toolkit (GWT).

---