A Simple Ajax Web Application using Google Web Toolkit, Eclipse and Tomcat

Google Web Toolkit (GWT) makes it easier to write high-performance AJAX applications. You write your front end in the Java programming language and GWT compiles your source into highly optimized JavaScript. [source: http://code.google.com/webtoolkit/]


Below is not a tutorial on GWT and is not written to be read by ‘dummies’. This is just a skeleton or fill-in-the-blanks type of document. After I learned the basics of GWT I wanted to try an example which involves client-server communication. Once successful I thought about documenting it. Below are steps to create a simple HelloWorld Ajax web application which involves both client (HTML, JavaScript) and server (Servlet) components. I assume that you have a good knowledge of Java, Eclipse, Tomcat, HTML and you have learned a bit about GWT. I also assume you have downloaded the GWT package somewhere on your hard drive. So let us get started.


Run projectCreator command (using CMD prompt)
projectCreator -eclipse MyGwtProject -out MyGwtProject

Run applicationCreator command
applicationCreator -eclipse MyGwtProject -out MyGwtProject com.examples.gwt.client.mygwtapp

Import newly created project into Eclipse
Project: MyGwtProject
Copy projects into workspace: CHECKED

Test the skeleton application
right click on “mygwtapp.launch” -> Run as -> mygwtapp

Add the following packages under MyGwtProject/src
com.examples.gwt.client.common
com.examples.gwt.server

Add the following interfaces to the package com.examples.gwt.client.common
Please note the full qualified name of RemoteService is com.google.gwt.user.client.rpc.RemoteService;

public interface MyService extends RemoteService {
	public String echo(String input);
}
public interface MyServiceAsync {
	public void echo(String input, AsyncCallback callback);
}

Add the following class to the package com.examples.gwt.server

public class MyServiceImpl extends RemoteServiceServlet implements MyService {
	@Override
	public String echo(String input) {
		return "Echo: " + input;
	}
}

Modify the HTML file /MyGwtProject/src/com/examples/gwt/public/mygwtapp.html

<html>
<head></head>
<body>
<script language="javascript" src="gwt.js"></script>
<script type="text/javascript" language="javascript" src="com.examples.gwt.mygwtapp.nocache.js"></script>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
<h1>My GWT App</h1>
<p>This is an example of a simple GWT Application</p>
<table align=center>
<tr>
<td id="slot1"></td>
<td id="slot2"></td>
<td id="slot3"></td>
</tr>
</table>
</body>
</html>

Modify the XML file /MyGwtProject/src/com/examples/gwt/mygwtapp.gwt.xml

<module>
<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<entry-point class='com.examples.gwt.client.mygwtapp'/>

<servlet path="/myservice" class="com.examples.gwt.server.MyServiceImpl"/>

<stylesheet src='mygwtapp.css' />
</module>

Modify the onModuleLoad() method of the class /MyGwtProject/src/com/examples/gwt/client/mygwtapp.java

public void onModuleLoad() {
final Button button = new Button("Click me");
final Label label = new Label();
final TextBox textBox = new TextBox();
button.addClickListener(new ClickListener() {
  public void onClick(Widget sender) {
	 MyServiceAsync myService = (MyServiceAsync) GWT.create(MyService.class);
	 ServiceDefTarget target = (ServiceDefTarget) myService;
	 String relativeUrl = GWT.getModuleBaseURL() + "myservice";
	 target.setServiceEntryPoint(relativeUrl);
	 String input = textBox.getText();
	 myService.echo(input, new AsyncCallback() {
		  public void onSuccess(Object result) {
			 label.setText((String)result);
		  }
		  public void onFailure(Throwable caught) {
			 label.setText(caught.getMessage());
		  }
	 });
  }
});
RootPanel.get("slot1").add(textBox);
RootPanel.get("slot2").add(button);
RootPanel.get("slot3").add(label);
}

Test the application
right click on “mygwtapp.launch” -> Run as -> mygwtapp

Enter some text in the TExtBox and click the button. You should an echo text from the server.

Run mygwtapp-compile.cmd
Be patient. It may take a while.

Create the folders under \[TOMCA_HOME]\webapps
\webapps\mygwtapp
\webapps\mygwtapp\WEB-INF
\webapps\mygwtapp\WEB-INF\classes
\webapps\mygwtapp\WEB-INF\lib

Add the web.xml file under \webapps\mygwtapp\WEB-INF

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
    <servlet>
        <servlet-name>MyService</servlet-name>
        <servlet-class>com.examples.gwt.server.MyServiceImpl</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>MyService</servlet-name>
        <url-pattern>/myservice</url-pattern>
    </servlet-mapping>
</web-app>

Copy the following file(s) to \webapps\mygwtapp\WEB-INF\lib
gwt-servlet.jar

Copy the static web files from [ECLIPSE_WORKSPACE]\MyGwtProject\www\com.examples.gwt.mygwtapp to \webapps\mygwtapp. These files look like as below
435172329FD437F8DF736D7E7588CC0F.cache.html
com.examples.gwt.mygwtapp.nocache.js
mygwtapp.html

Copy Java compiled code from [ECLIPSE_WORKSPACE]\MyGwtProject\bin to
[TOMCA_HOME]\webapps\mygwtapp\WEB-INF\classes


Run Tomcat using command [TOMCA_HOME]\bin\startup.bat

Test application using a web browser


Downloads

mygwtapp-deploy1.zip
mygwtproject-eclipse.zip



You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

AddThis Social Bookmark Button

Similar Posts

Comments are closed.