The GWT & AppEngine Starter Project

First step is for us to create a new Google AppEngine For Java (or gaej for short) project. We will use the Eclipse IDE and the Google Plugin. Be sure to have those installed first. In this sample I have used the Google Plugin for Eclipse 3.5 (v1.3.2) and the Google Web Toolkit SDK (v2.0.3).

After you have installed the plugin, you should have three shiny new buttons in your eclipse environment:

The first button is used to create a new Google project (GWT, AppEngine, or both). The second button is to compile any GWT project (more on that later), and the third button is to deploy your application on the Google AppEngine infrastructure once finished. For now we will only use the first button.

Go ahead and press the first button. A 'Create a Web Application Project' window will pop up. We will call our new project SampleContactsApp, with package name gaej.example.contacts. Enter the details as such and be sure to leave the check boxes Use Google Web Toolkit and Use Google App Engine checked since we want to use those too. The form should look like below:

Ok, now press the Finish button and a starter project will be created for you. You can already run this application and it will show you a nice hello world type functionality:

Let's have a look at the generated project layout:

The java code can be found under the src directory, and you can see three sub-directories (or packages) are created: client, server, and shared. Various GWT classes will go here depending on whether they are for the client (e.g. those classes that generate javascript that runs in your web browser) or for the server (e.g. those classes that get things from database storage, etc). The shared folder is for classes that are shared between them, obviously.

Important here is the SampleContactsApp.gwt.xml file. This is where the GWT configuration is stored. If you open this file up, you will see things like entry-point and the module source paths pointing to the aforementioned client and shared. Server is not there because the server classes should not generate any client side code.

The META-INF folder will contains the jdoconfig.xml file for the database connection (more about this later).

The war folder contains the 'packaged' web application. If you open up this folder, you will see the SampleContactsApp.css and SampleContactsApp.html files. The css file is obviously the cascading stylesheet that will be used to present the widgets, and the html file is the index file that our initial project uses. If you open up the html file you will see that the css file is referenced there. It also points to a javascript file. This javascript file is generated by GWT.

The directory also contains a WEB-INF folder. This folder contains all the configurations and binary code needed to run our application. The configuration files are web.xml, logging.properties, appengine-web.xml. The binary code is consists of the project's compiled java classes (in the classes folder) and 3rd party libraries contained in the lib folder.

Let's have a look first at the configuration files. The appengine-web.xml is mostly needed for AppEngine deployment. To find out more about this file check here. The logging.properties is obviously there to specify the logging properties. If you open it up you can already edit the log level from WARNING to INFO or DEBUG if you want. The web.xml file is like any other web.xml file. It defines the servlets and index file used by the application. If you open it up you will see that our starter application has one servlet defined (the greetServlet) and the html index file is set to SampleContactsApp.html.

Ok, let's go back to the binary stuff. Like I mentioned, the compiled Java classes end up in the WEB-INF/classes folder, and all 3rd party libraries are placed in WEB-INF/lib folder. Now remember I briefly mentioned that the javascript files referenced in SampleContactsApp.html are generated by GWT? Well, if you refresh your project navigation tree (press F5 in Eclipse) you will see that there is an additional folder under the war directory called samplecontactsapp. This is where GWT stores all its generated files, including the javascript files mentioned earlier. You do not need to worry about this stuff since it is all compiled/generated on the fly by the Eclipse Google Plugin.

If you want to learn more about the starter project, check out the links here and here.

Alright, that concludes the introduction to the starter project. Next we will tweak this project to suit are application's needs.