Create GWT applications on JBoss AS

User Rating: 4 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Inactive
 

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>

 

Follow us on Twitter