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
