GWT/GAE: A example of GWT, Creation, Configuration GAE, Deployment on Jetty (PART1)

After the presentation of GWT and GAE, I will introduce my first experience with GWT programming and its deployment on GAE through several articles.

Here the points of these articles:

1. Prerequisites,
2. Configuration GAE account,
3. New Eclispe project with the type “Web Application Project”,
4. Deployment on GWT embedded server named Jetty,
5. Evolution of the interface with GWT Designer,
6. Deployment on a Jboss server,
7. Deployment on a Tomcat server,
8. Deployment on GAE cloud,
9. Creation of a new version n°2 of our application on GAE,
10. Internationalization of the application,

1. Prerequisites
   For this tutorial, the installation des plug-ins et SDK Google must be done. See my previous article concerning this topic Eclispe: Installation of the Google Tools
   
2. Configuration GAE Account
   To use the Google’s Cloud (GAE), we need an Google account. Go to the URL http://appengine.google.com/
   

   After authentication, click the button “Create application”:
   

   Fill in the informations:

   • the application identification (ID): the domain name of the application in the Google cloud. Caution: Always check the availability of the ID! In this example, we have created the ID “huojavagwttest3”;
   • the title of the application. In this example, we have created the ID “HUO Java Gwt First Test 3”;

   Here, huojavagwttest3 is available on App Engine and accessible via http://huojavagwttest3.appspot.com/:
   
   

3. New Eclispe project with the type “Web Application Project”
   Let’s go, we will create our project in Eclipse:
   • Do a new project in the wizard, we choose: New -> Web Application Project:
     
   • Fill in the informations:
     • the project name: “huojavagwttest3”;
     • the package: in our example, we have created the packages “com.ho.gwt.test3.module31”;
     • check the checkboxes “Use Google Web Toolkit” and “Use Google App Engine”;
     • last important point, check the checkbox with the label “Generate project sample code”;

     So, with the project’s creation, Eclipse will create also a skeleton GWT project with the librairies “GWT SDK[GWT – 2.4.0]” containing the following jars from the Eclipse’s installation folder:
     – ..\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.4.0.v201112160242-rel-r37\gwt-2.4.0\gwt-user.jar
     – ..\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.4.0.v201112160242-rel-r37\gwt-2.4.0\gwt-dev.jar
     – ..\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.4.0.v201112160242-rel-r37\gwt-2.4.0\validation-api-1.0.0.GA-sources.jar
     – ..\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.4.0.v201112160242-rel-r37\gwt-2.4.0\validation-api-1.0.0.GA.jar

     

     More, this skeleton GWT project contains a mini-application “testable”. This generated project is a skeleton project containing a simple GWT module of client-server communications.
     

   If we investigate our skeleton project, we will see the classical structure of a GWT module, described in the post GWT 2.4.0: Presentation and Development with GWT (Google Web Toolkit):
   

   • client/GreetingService: An interface which extends RemoteService that lists the service methods.

     /**
      * The client side stub for the RPC service.
      */
     @RemoteServiceRelativePath("greet")
     public interface GreetingService extends RemoteService {
     	String greetServer(String name) throws IllegalArgumentException;
     }
     

   • client/GreetingServiceAsync: An asynchronous interface to the service which will be used in the client code. This is the AJAX GWT interface corresponding to the previous interface, but the mechanisms of integrating AJAX callback. It also specifies the methods used so distant and asynchronous.

     /**
      * The async counterpart of <code>GreetingService</code>.
      */
     public interface GreetingServiceAsync {
     	void greetServer(String input, AsyncCallback<String> callback)
     			throws IllegalArgumentException;
     }
     

   • server/GreetingServiceImpl:An implementation of the interface and extends the RemoteServiceServlet.

     /**
      * The server side implementation of the RPC service.
      */
     @SuppressWarnings("serial")
     public class GreetingServiceImpl extends RemoteServiceServlet implements GreetingService {
     
     	public String greetServer(String input) throws IllegalArgumentException {
     		// Verify that the input is valid. 
     		if (!FieldVerifier.isValidName(input)) {
     			// If the input is not valid, throw an IllegalArgumentException back to
     			// the client.
     			throw new IllegalArgumentException(
     					"Name must be at least 4 characters long");
     		}
     
     		String serverInfo = getServletContext().getServerInfo();
     		String userAgent = getThreadLocalRequest().getHeader("User-Agent");
     
     		// Escape data from the client to avoid cross-site script vulnerabilities.
     		input = escapeHtml(input);
     		userAgent = escapeHtml(userAgent);
     
     		return "Hello, " + input + "!<br><br>I am running " + serverInfo
     				+ ".<br><br>It looks like you are using:<br>" + userAgent;
     	}
     
     	//...
     

   • client/Huojavagwttest3: Entry point which is the starting point for a GWT application (similar to the main method in a standard Java program). An entry point is a Java class which implements the interface “com.google.gwt.core.client.EntryPoint” and must define the method onModuleLoad().

     /**
      * Entry point classes define <code>onModuleLoad()</code>.
      */
     public class Huojavagwttest3 implements EntryPoint {
     	//...
     
     	/**
     	 * This is the entry point method.
     	 */
     	public void onModuleLoad() {
     		final Button sendButton = new Button("Send");
     		final TextBox nameField = new TextBox();
     		nameField.setText("GWT User");
     		final Label errorLabel = new Label();
     
     		// We can add style names to widgets
     		sendButton.addStyleName("sendButton");
     
     		// Add the nameField and sendButton to the RootPanel
     		// Use RootPanel.get() to get the entire body element
     		RootPanel.get("nameFieldContainer").add(nameField);
     		RootPanel.get("sendButtonContainer").add(sendButton);
     		RootPanel.get("errorLabelContainer").add(errorLabel);
     
     		//...
     	}
     }
     

   • …etc.

4. Deployment on GWT embedded server named Jetty
   Now, we have a project which is a skeleton project containing a simple GWT module of client-server communications. So, we will deploy it on GWT embedded server named Jetty. To deploy an application in HOSTED mode (DEVELOPMENT mode) on the server JETTY embedded in GWT framework see the post GWT/GAE: Deployment an application on GWT embedded server named Jetty in Hosted mode.

   Once, our skeleton project deployed on Jetty, we will have the following interface by opening the url http://127.0.0.1:8888/Huojavagwttest3.html?gwt.codesvr=127.0.0.1:9997:
   

   …then, fill in the field with a value (for example, I filled in my first name “Huseyin”), which will be send from client to server:
   

   …at last, the server replies “Hello, Huseyin!”:
   
   

In this article, we have related the prerequisites, the configuration of a GAE account, the creation of a new Eclispe project with the type “Web Application Project” and the deployment of an application on the GWT embedded server named Jetty. In next articles, we will discuss about the evolution of the interface with GWT Designer, the deployment of an application on a Jboss server, on a Tomcat server, on GAE cloud, …etc.

Source: huojavagwttest3.zip

Notes: This file huojavagwttest3.zip contains the final version of the tutorial (from PART1 to PART4), but, it is necessary to add the librairies appengine-api-1.0-sdk-1.6.1.jar, appengine-api-labs-1.6.1.jar, appengine-jsr107cache-1.6.1.jar, datanucleus-appengine-1.0.10.final.jar, datanucleus-core-1.1.5.jar, datanucleus-jpa-1.1.5.jar, geronimo-jpa_3.0_spec-1.1.1.jar, geronimo-jta_1.1_spec-1.1.1.jar, google_sql.jar, gwt-servlet.jar, jdo2-api-2.3-eb.jar and jsr107cache-1.1.jar.

Best regards,

Huseyin OZVEREN