gwtThis tutorial shows how to create Google Web Toolkit applications (GWT) using Eclipse and how to deploy them on JBoss AS. In the second part of this tutorial, we will show also how to interact with application server serices like RESTful Web services.

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. A typical GWT application is composed of client and server resources. Client resources are used to create the front end layout using just Java classes (just like you would do with Swing). Server resources include RPC services which are implemented as Ajax calls.

The first thing you need to get started is installing the Eclipse GWT plugin from the Eclipse Menu
Help | Install New Software. If you are using Eclipse Indigo, this is the update path:

Step 1: Create a new Project

When you are done, restart Eclipse and create a new Web Application Project:

File | New | Google | Web Application Project
gwt google web toolkit tutorial jboss


Name the project as you like, choose a base package for it and choose to use just "Use Google Web Toolkit".

gwt google web toolkit tutorial jboss


Step 2: Add Smart GWT Libraries

At this point you have an empty project where you will add your resources. The first thing we will add are Smart GWT libraries that allows you to utilize its comprehensive widget library for your application UI.

Add the libraries to your Project Class Path. Right-click the Project | Properties | Build Path and add smartgwt.jar and smartgwt-skins.jar.

Step 3: Create a new Module

gwt google web toolkit tutorial jboss


A GWT "module" is simply an encapsulation of a functionality. A GWT module is named similarly to a Java package in that it follows the usual dotted-path naming convention but is not the same thing.  A module is defined by an XML descriptor file ending with the extension ".gwt.xml", and the name of that file determines the name of the module.

gwt google web toolkit tutorial jboss
In your sample module, add the com.smartgwt.SmartGwt dependencies as shown in the above picture.

Step 4: Create a new Entry Point Class

gwt google web toolkit tutorial jboss


This will defines your entry point to your application. In GWT the entry point is similar to the main method in Java.



Step 5: Create a new HTML page

This will be your landing page for your application. We include a sample of it, which simply includes some Javascripts and css:

<!doctype html>

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link type="text/css" rel="stylesheet" href="/Example.css">

 <script type="text/javascript" language="javascript" src="/com.sample.SampleModule/com.sample.SampleModule.nocache.js"></script>

 <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
 <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
 Your web browser must have JavaScript enabled
 in order for this application to display correctly.





Step 6: Customize your GWT application


Now we will add a ListGrid component to your application which will be used to dispaly tabular data (just like dataTable does for JSF). Let's modify :


package com.sample.client;

import com.sample.client.ds.ItemDS;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.ListGrid;

public class EntryPoint implements {

 public Canvas getViewPanel() {
 Canvas canvas = new Canvas();
 final ListGrid itemGrid = new ListGrid();          

 return canvas;
 public void onModuleLoad() {



A ListGrid uses a DataSource object to map the fields contained in the grid. The binding can be done either with static data or with dynamic data. Let's see first an example with a static xml file.
package com.sample.client.ds;

import com.smartgwt.client.types.FieldType;

public class ItemDS extends DataSource {  
 private static ItemDS instance = null;  
 public static ItemDS getInstance() {  
 if (instance == null) {  
 instance = new ItemDS("ItemDS");  
 return instance;  

 public ItemDS(String id) {  
 DataSourceField nameField = new DataSourceField("name", FieldType.TEXT, "name");  
 DataSourceField priceField = new DataSourceField("price", FieldType.INTEGER, "price");  
 DataSourceField quantityField = new DataSourceField("quantity", FieldType.INTEGER, "quantity");  
 DataSourceField idField = new DataSourceField("id", FieldType.TEXT, "id");  

 setFields(nameField, priceField,quantityField,idField);  


The binding is done with the setDataURL method which binds data to the file items.xml.

Add the file items.xml will be added in the war folder of your prohect, so that it will be visible by your home page. Here's a short piece of it:



. . . . . .

Ok, now you're ready to test your initial project. Compile (1) at first the project, so that client stubs will be created and then launch it (2) in hosted mode. This will launch an internal Web server which can be used to test your application before deploying it to the AS.

gwt google web toolkit jboss tutorial


If everything works correctly you should see displayed a ListGrid with the data from the XML.
gwt google web toolkit jboss tutorial



Connect to JBoss AS RESTful web services

Good. So now we will replace the static XML file with some data produced by a RESTful web service.
Here's a simple Web service which produces a collection of items:

package sample;



public class SampleREST {
 public Item[]  getItem() {
 Item item[] = new Item[6];
 item[0] = new Item("a1","computer",2500,45);
 item[1] = new Item("b1","monitor",500,25);
 item[2] = new Item("c1","chair",1500,15);
 item[3] = new Item("d1","keyboard",50,45);
 item[4] = new Item("e1","mouse",25,45);
 item[5] = new Item("f1","phone",250,70);

 return item;


This is the Item object class:

package sample;


import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;

public class Item implements Serializable {

 String name;
 int price;
 int quantity;
 String id;

 public Item(String id, String name, int price, int quantity) { = id;
 this.quantity = quantity; = name;
 this.price = price;

 public Item() {


Ok. Now the only thing you need to change is the setDataURL method in ItemDS


It's time to export your war to JBoss AS. use the Eclipse Export functionality to export as archive file (f.e. example.war):

gwt google web toolkit jboss tutorial

Be careful to export only the selected directory of the war file, otherwise the Export Utility will not create a compliant war file.

If everything works correctly by pointing to your html page, you should see data displayed just like we did for static files: http://localhost:8080/example/Example.html


Enjoy Google Web Toolkit and JBoss !