Developing Web Applications
with Google Web Toolkit and OpenRules

Part 1 – Implementing Simple GWT Application

   

Part-2   Main 

Steps                                                                                                                                                      

Step 1 – Installation

  1. Install the Java SDK.  If you don't have a recent version of the Java SDK installed, download and install Sun Java Standard Edition SDK.

  2. Install the Eclipse IDE. If you don't have a recent version of the Eclipse installed, download and install from the Eclipse website.   

  3. Download Google Web Toolkit. Download the Google Web Toolkit package version 1.4.62 (or higher) for your operating system. Unzip the Google Web Toolkit package, e.g. in the directory C:/GWT/gwt-windows-1.4.62.

  4. Install GWT Designer Plugin. Install the latest GWT Designer plugin from the Instantiations website. The simplest way is to download GWT Designer archive that contains two directories: features and plugins. Copy their content to the proper directories of your Eclipse. Restart Eclipse and from the menu Window + Preferences specify the path to your GWT installation directory similar to this one:
     

  5. Install the Apache Tomcat. If you don't have a recent version of the Tomcat core installed, download and install it from the Apache website

  6. Install the OpenRules. If you don't have a recent version of the OpenRules installed, download and install from the OpenRules website

 

Step 2 – Create GWT Java Project "HelloGWT"  ►top

Use Eclipse wizard to create a new GWT Java project as below:

 

Name the project "HelloGWT":

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Create GWT module with the name "HelloGWT" and the package "com.openrules.gwt":

The generated project with all of the necessary configuration and resource files will look like below at Eclipse Package Explorer:

Step 3 – Create the Hello Composite  ►top

Select the Designer toolbar button and select GWT > Composite from the pull-down menu:

In the Hello.java view switch from the Source to the Design mode and you will see the empty Hello composite:

The GWT Designer provides a good tutorial that was customized for our sample. Use the GWT Designer graphical editor to add the following graphical elements (widgets) to the Hello composite:

Your composite will look like below:

Right-click inside the composite and select Test/Preview.. to test you graphics.

Step 4 – Create CSS Styles  ►top

Select one of the labels and click on the ellipsis on the styleName property. That brings up the CSS Style Selection dialog.
Click on the Add... button. On the New rule dialog, click OK. A new css class is added called .gwt-Label. With the .gwt-Label selected, click the Edit... button. Choose styles like below:


 

Click OKs and the generated css styles will be saved in the HelloGWTManager.css file in your public folder. Make sure to Save your work.

Select the top label and similarly create its own css style using size 16 and color Red. Now if you Test/Preview your composite you will see:


Step 5 – Add Event Handler for the Button "Generate Greeting"  ►top

Right-click the Generate Greeting button.  Select Add event handler > click > onClick. The Designer switched to Source view. As you can see a ClickListener has been added. Now you have to add a snippet of Java code that implements the onClick event.  Move the addClickListener at the end of the method Hello() and add a line that assigns a fixed text to the GeneratedGreeting: 

 

HelloGWT/src/com/openrules/gwt/client/Hello.java
...
       generateGreetingButton.addClickListener(new ClickListener() {
              public void onClick(final Widget sender) {
                      /*
                       * Manually added code
                       */

                       textBoxGeneratedGreeting.setText("HELLO - just a test");
              }
        });
....

This code will be executed when a user clicks on the button "Generate Greeting".

 

Step 6 – Add the Hello Composite to the HelloGWT module  ►top

Open the HelloGWT class in Design mode and delete the initially generated Click me! button. You should now see an empty module with the default rootPanel. Do the following:

Step 7 – Run HelloGWT Application in Hosted Mode  ►top

In the Eclipse Package explorer, right-click the HelloGWT.java and select Run As > GWT Application.
This will create a launch configuration and run the application locally.
Click on the Generate Greeting button.
 

 

Step 8 – Deploy on External Tomcat  ►top

Right click on HelloGWT.java and select Google Web Toolkit > Deploy module:

Specify the server deployment options:

On your Eclipse console you will see the protocol of your deployment similar to this one:


 

Step 9 – Run HelloGWT Application in Web Mode  ►top
 

Now you may start/restart your Tomcat server. To run the application deployed on the Tomcat, create a file run.html and place it directly into HelloGWT directory:

 

HelloGWT/run.html

<h2> Deployed GWT Application </h2>

<h3> http://localhost:8080/HelloGWT/HelloGWT.html</h3>

<a href="http://localhost:8080/HelloGWT/HelloGWT.html">

Run</a>

Double-click on the run.html and launch your application in the web mode:

Click on the Run link:


 

Step 10 – Adding Java Business Objects  ►top
 

Now we will add the actual business objects to support the real greeting generation.  Initially will use Java classes only and later on we will move business logic to OpenRules.

First of all we need an object that describes a customer we plan to greet. Here is the proper Java class:

 

HelloGWT/src/com/openrules/gwt/client/Customer.java
package com.openrules.gwt.client;

public class Customer {
	String name;
	String maritalStatus;
	String gender;
	int age;
		
	public String getGender() {
		return gender;
	}
	public String getMaritalStatus() {
		return maritalStatus;
	}
	public String getName() {
		return name;
	}
	public void setGender(String string) {
		gender = string;
	}
	public void setMaritalStatus(String string) {
		maritalStatus = string;
	}
	public void setName(String string) {
		name = string;
	}

	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
}

Now we want to create an instance "customer" of the class Customer and do two things when a user clicks on the button "Generate Greeting":

  1. Save (and probably validate) the entered information in the object customer

  2. Define rules according to which we want to generate a customer specific greeting.

To do this we will modify the file Hello.java (only the last section) as follows:

HelloGWT/src/com/openrules/gwt/client/Hello.java
...
        final Customer customer = new Customer();
       generateGreetingButton.addClickListener(new ClickListener() {
              public void onClick(final Widget sender) {
                      /*
                       * Manually added code
                       */

                       //textBoxGeneratedGreeting.setText("HELLO - just a test");
                      customer.setName(textBoxName.getText());
                      customer.setAge(Integer.parseInt(textBoxAge.getText()));
                      String gender = (maleRadioButton.isChecked()) ? "Male" : "Female";
                      customer.setGender(gender);               
                      int selectedIndex = listBoxMaritalStatus.getSelectedIndex();
                      String maritalStatus = listBoxMaritalStatus.getItemText(selectedIndex);
                      customer.setMaritalStatus(maritalStatus);
                     /*
                      * Greeting generation rules
                      */

                      String salutation = "?";
                      if
(customer.getGender().equals("Male"))
                             salutation = "Mr.";
                      else
{
                             if
(customer.getMaritalStatus().equals("Single"))
                                   salutation = "Ms.";
                             else
                                  
salutation = "Mrs.";
                      }
                      textBoxGeneratedGreeting.setText("Hello "+salutation+customer.name+"!");
              }
        });
....


If you run the application now in the host mode it will produce a more meaningful greeting:

 

Summary  ►top

  1. We created a development environment for GWT.

  2. We setup a simple GWT application that could run in both host and web modes

  3. So far, our application uses only simple greeting rules. But the whole setup works and we are now ready to add real functionality.

 

Main  Part 2   ►top

 

Copyright © 2008, OpenRules, Inc.