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:

http://download.eclipse.org/releases/indigo

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.

http://code.google.com/p/smartgwt/downloads/list

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.


entrypoint 

 

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>

<html>
 <head>
 <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>
 </head>

 <body>
 
 <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
 
 <noscript>
 <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.
 </div>
 </noscript>

 </body>
</html>

 


 

 

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 EntryPoint.java :

 


package com.sample.client;

import com.google.gwt.user.client.ui.RootPanel;
import com.sample.client.ds.ItemDS;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.ListGrid;

public class EntryPoint implements com.google.gwt.core.client.EntryPoint {

 public Canvas getViewPanel() {
 Canvas canvas = new Canvas();
 
 final ListGrid itemGrid = new ListGrid();          
 itemGrid.setWidth(500);  
 itemGrid.setHeight(224);  
 itemGrid.setShowAllRecords(true);  
 itemGrid.setDataSource(ItemDS.getInstance());  
 itemGrid.setAutoFetchData(true);  
 itemGrid.setCanEdit(true);  
 
 canvas.addChild(itemGrid);
 

 return canvas;
 }
 public void onModuleLoad() {
 RootPanel.get().add(getViewPanel());
 

 }
 

}

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.data.DataSource;
import com.smartgwt.client.data.DataSourceField;
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) {  
 setID(id);  
 setRecordXPath("/collection/item");  
 
 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);  
 setDataURL("/items.xml");  
 
 }  

} 


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:

<collection>

<item>
<name>computer</name>
<price>2500</price>
<quantity>45</quantity>
<id>a1</id>
</item>

. . . . . .
</collection>

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;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;

@Path("rest")

public class SampleREST {
 
 @GET
 @Path("itemArray")
 @Produces({"application/xml"})
 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 java.io.Serializable;

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

@XmlRootElement
public class Item implements Serializable {

 @XmlElement
 String name;
 @XmlElement
 int price;
 @XmlElement
 int quantity;
 @XmlElement
 String id;

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

 public Item() {

 }
}

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


setDataURL("http://localhost:8080/WebApp/rest/itemArray");  

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 !

0
0
0
s2smodern