Installing Google Web Toolkit

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.

In short, a developer using the toolkit will be using the Java programming language before compiling, and then test the web application in the development mode using tools offered by the Google web toolkit.

Once the development is done, the Java code is then compiled into pure JavaScript code, which can then be deployed on web servers and is compatible with most common browsers.

One advantage of using the Google web toolkit is that it makes writing AJAX and JavaScript applications as simple as possible.

This tutorial will focus on the use of the Google web toolkit in Ubuntu (Linux) and is primarily targeted at beginners.

Getting Started with Google Web Toolkit

You need to download the toolkit, which is available here: http://code.google.com/webtoolkit/download.html. Click the “Download SDK” button.

It will then be downloaded to the Ubuntu download folder. Right click on the zip file, and then click “Extract here.” Copy the folder (e.g gwt-2.0.4) to your Ubuntu desktop.

The best way to get started with the Google web toolkit is to create a web application using it. For the sake of simplicity, let’s use the test web application illustrated here: http://code.google.com/webtoolkit/gettingstarted.html 

Note that the procedure is not quite specific, and you need to know all the steps in detail, including troubleshooting and terminal commands. So let’s illustrate that in this tutorial completely.

Since your Google web toolkit is now located in your Ubuntu Desktop, open the terminal (Applications ==> Accessories ==> Terminal). Let’s create a web application and name it MyWebApp

The commands are as follows:

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$ chmod u+x webAppCreator
codex-m@codex-m-desktop:~/Desktop/gwt-2.0.4$ ./webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

This app goes to the Ubuntu Desktop, and then changes the directory to gwt-2.0.4. The CHMOD u+x actually makes the webAppCreator executable; this is necessary to create the application.

If there is no problem, several files and directories will be created by the Google web toolkit.

Installation of Apache Ant as a Build Tool to Compile Java Code

The “getting started” guide for the Google web toolkit uses Ant (http://ant.apache.org/) as the build tool. However, before you can use Ant, you need to install it in Ubuntu. Follow the steps below:

  1. Go to the Synaptic Manager, and in the quick search, type ant.
  2. Click Ant, and then click “Mark for Installation.”
  3. Click “Mark” and then click “Apply” on the Synaptic Manager menu.
  4. When you see “Apply the following changes,” click “Apply.”

Now that it is completely installed, let’s run the Google web toolkit development mode using Ant. Open the terminal, and then type the commands below (assuming you do not change your Google web toolkit directory and it is still found on the Desktop):

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

However, when you execute the ant devmode command, you might encounter an error such as the one below:

Unable to locate tools.jar. Expected to find it in /usr/lib/jvm/java-6-openjdk/lib/tools.jar
Buildfile: build.xml
 
libs:
 
javac:
    [mkdir] Created dir: /home/codex-m/Desktop/gwt-2.0.4/MyWebApp/war/WEB-INF/classes
    [javac] Compiling 5 source files to /home/codex-m/Desktop/gwt-2.0.4/MyWebApp/war/WEB-INF/classes
 
BUILD FAILED
/home/codex-m/Desktop/gwt-2.0.4/MyWebApp/build.xml:28: Unable to find a javac compiler;
com.sun.tools.javac.Main is not on the classpath.
Perhaps JAVA_HOME does not point to the JDK.
It is currently set to "/usr/lib/jvm/java-6-openjdk/jre"
 
Total time: 0 seconds

This is because the Openjdk-6-jdk (Open Java Development Kit) is still not installed and configured to work with the Google web toolkit.

Open the Java Development Kit for Google Web Tool Kit

To install the required Java development toolkit:

1. Go to the Synaptic manager, and in the quick search, type java-6-openjdk.

2. You need to click: openjdk-6-jdk

Screen shot:

3. Continue with the installation until it is successfully completed.

4. Go to Applications ==> Accessories ==> Search for files…

5. Under “Name contains:” type tools.jar. You need to know the updated JDK path of this file in your Ubuntu file system.

You should see results like this: usr/lib/jvm/java-6-openjdk/lib

This is the folder in your Ubuntu file system that contains the tools.jar file using the Open Java Development Kit. This means you have successfully installed openjdk.

When you look at the error in the previous section, it required pointing the JAVA_HOME to openjdk for the build to succeed.

You need to edit the bash.bashrc file in the Ubuntu etc directory. To do this, open up the terminal, and then type the following commands:

codex-m@codex-m-desktop:~$ sudo -s -H
root@codex-m-desktop:/home/codex-m# cd /
root@codex-m-desktop:/# cd etc
root@codex-m-desktop:/etc# pico bash.bashrc

Scroll down to the bottom of the file, and then add the following code:

JAVA_HOME=/usr/lib/jvm/java-6-openjdk
export JAVA_HOME
PATH=$PATH:$JAVA_HOME/bin
export PATH

If the path that contains tools.jar (in the file search result previously) is: usr/lib/jvm/java-6-openjdk/lib

You should set JAVA_HOME to /usr/lib/jvm/java-6-openjdk

To confirm your new JAVA_HOME, enter this in terminal:

root@codex-m-desktop:/etc# echo $JAVA_HOME

It will check the new location of Java Home, so the result should be:
/usr/lib/jvm/java-6-openjdk
To confirm the path:

root@codex-m-desktop:/etc# echo $PATH
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/
X11R6/bin:/usr/lib/jvm/java-6-openjdk/bin

{mospagebreak title=Run the Web Application in Development Mode}

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:

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 build

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.

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye