: Google Web Toolkit




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

June 19th, 2008 admin Posted in Google Web Toolkit Comments Off

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


AddThis Social Bookmark Button

Similar Posts