Run the Web Application in Development Mode - AJAX

The Google Web toolkit is a useful open source toolkit that can be used by web developers for developing complex JavaScript applications/AJAX in Java. This article will show you how to get started using it.

TABLE OF CONTENTS:

By: Codex-M

Poor Best

Rating:

/ 2

September 27, 2010

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Now that all of the errors from the previous sections are corrected, you can continue to run the web application created by the Google web toolkit in Development mode.

Open up the terminal again, and type the commands below:

codex-m@codex-m-desktop:~$ cd Desktop
codex-m@codex-m-desktop:~/Desktop$ cd gwt-2.0.4
codex-m@codex-m-desktop:~/Desktop/gwt-2.0.4$ cd MyWebApp
codex-m@codex-m-desktop:~/Desktop/gwt-2.0.4/MyWebApp$ ant devmode

This time, after executing ant devmode, you should not see any errors, but rather a successful build on build.xml file:

Buildfile: build.xml

libs:

javac:
[javac] Compiling 5 source files to /home/codex-m/Desktop/gwt-2.0.4/MyWebApp/war/WEB-INF/classes
[copy] Copying 1 file to /home/codex-m/Desktop/gwt-2.0.4/MyWebApp/war/WEB-INF/classes

This will launch the GWT (Google web toolkit) Development server, as shown in the screen shot below:

This is not the test web application yet. You still need to click “Launch Default Browser.” However, it requires that you install the GWT Developer Plugin. To install:

1. Click “Download the GWT Developer Plugin for Firefox” (if you are using Firefox).

2. Click “Allow,” and then the gwt-dev-plugin.xpi will be downloaded.

3. Restart your Firefox browser.

Once restarted, you should see the test web application. Try entering your name in the web form, and then click “Send.”

The results should look like the screen shot below:

So how are you going to customize this web application? The source code is a Java code (because it is not yet compiled if you are running the web application in development mode) named MyWebApp.java and can be found in: Desktop/gwt-2.0.4/MyWebApp/src/com/mycompany/mywebapp/client

Open the file. You can make some changes to it; refer to the “Make a few changes” section in the “getting started” tutorial by Google for GWT. In that example, it simply changes the text of the Send button from “Send” to “Send to Server.”

Compiling the Source Code for Deployment

To make the web application useful and ready to be deployed in web servers, it needs to be compiled. This will compile the Java code into pure JavaScript code, which can be executed by web browsers.

To compile, open up the terminal, and follow the commands below:

Once the ant build command is executed, you should see the following results:

Buildfile: build.xml

libs:

javac:

gwtc:
[java]Compiling module com.mycompany.mywebapp.MyWebApp
[java]Compiling 6 permutations
[java]Compiling permutation 0...
[java]Compiling permutation 1...
[java]Compiling permutation 2...
[java]Compiling permutation 3...
[java]Compiling permutation 4...
[java]Compiling permutation 5...
[java]Compile of permutations succeeded
[java]Linking into /home/codex-m/Desktop/gwt-2.0.4/MyWebApp/war/mywebapp.
[java]Link succeeded
[java]Compilation succeeded -- 52.310s

build:

BUILD SUCCESSFUL
Total time: 54 seconds

So where can you locate the compiled files that can be uploaded to a web server? You can find them under this path: Desktop/gwt-2.0.4/MyWebApp/war/

The files under the war folder are the ones that can be deployed to your production server. For example:

Of course, this is just an introductory article. You can do a lot of things using the Google web toolkit by using it along with an IDE, such as Eclipse, to develop more powerful applications.

In the next tutorial, you will learn how to correctly deploy/upload your Google web toolkit applications to a server so that they will work without any problems.