Home Page > Training > Tutorials > Web 2.0 > GWT concepts
This tutorial sets out everything you need to know before you start to use GWT. It is VERY highly recommended to be read before plunging into GWT, due to the VERY large numbers of "Gotchas" that float around the GWT development for those who have not yet worked out how to use the system. It is suggested that the 15 minutes or so it will take to read this section will save at least one full day's work searching for answers to the questions that are answered below. (Guess how long I feel I wasted on this!!!!!)
The next section sets out what you need to know about the Java programs to achieve the website functionality and content you desire.
What is GWT
Google Web Toolkit is a comprehensive suite of programs developed by Google, which it provides free to the open source community (under the Apache 2.0 license) to implement Ajax.
Program code is written by the programmer. The programming language is Java. Whereas this may appear to be an obstacle to non-Java programmers, a large number of example programs are available and most experienced programmers should find their way fairly easily around the code to modify what they need, without too much difficulty.
The key advantage to using the GWT is the sheer weight of functionality that Google has opened up to programmers, such as response to mouse movement, uploading and downloading files, a whole series of "Widgets" such as rtf edit boxes, check boxes, selectable input boxes etc, Ajax speed and very much more to give the user the experience that the program is a local program, despite being run through/over the internet. Despite its vast scope, there are still many circumstances that GWT is not an appropriate solution. So check below for an outline of some of the many web functions that continue to require conventional web techniques.
Where can GWT be downloaded from
GWT can be downloaded free from:
Is there anything else recommended for download
In order to create Java code, programmers can use any simple text editor, such as Kate (Linux) or Notepad (Windows). The problem is that Java code is fairly strict and easy to muddle, particularly for relative novices to Java. So the recommendation is to download the free Java editor "Eclipse", which highlights syntax errors as soon as you type them.
The colossal Java SDK and Eclipse (over 100MB for the two) can be downloaded for free as follows:
Java runtime environment (if needed) : download.eclipse.org/eclipse/downloads/drops/R-3.2.1-200609210945//java-runtimes.html
Eclipse SDK 3.2.1 www.eclipse.org/downloads/
TIP : For Edge Eft Ubuntu (6.10) linux users, a number of users have expressed difficulty in getting Eclipse to work. Having run the update manager to ensure I had all the latest programs, I went into Synaptics Package Manage to install both the "Sun Java" package and also the "Eclipse" package, following which everything loaded and ran without hitch. Prior to installing the "Sun Java" package, I had all sorts of unexplained problems getting Eclipse to run.
Firebug can be downloaded for free from:
The GWT directory structure
Strange as it may seem, the standard GWT directory structure is a little complex. The purpose of this section is to help you find the files you need. It is not intended to be sufficiently complete to enable the structure to be set up by hand.
It is likely you will waste time trying to work within a different structure - partly because the GWT "compiler" assumes default locations.
When you set up a new project, you need to create a directory structure. You can do it by hand (unwise), or you can use the GWT "launcher" program "applicationCreator" (wise), which will create all the directories you need. (See below for more detailed instructions)
There are two base locations, the GWT code itself and your application code.
For the purposes of discussion, I will assume the GWT code has been extracted to a directory called ~/download/GWT. I will assume that the Java code you create for a client application is in a directory called ~/clients/gbpAjax (where the "clients" directory is where we keep our client files and "gbpAjax" is the client for whom we are writing the application).
Directory : ~/download/GWT
In ~/download/GWT are:
Directory : samples
File : gwt-user.jar
The "gwt-user.jar" is the file that contains many of the source java programs that comprise GWT. They include many base classes that you use in your own code (such as the Button.class for buttons or FilesUpload.class for uploading files from a web browser's local computer to a GWT application.) For those who like to poke around, the most useful section giving clues about how to code your Java is in the section "com.google.gwt.user.client.ui" within the "gwt-user.jar" file.
The samples directory contains several sample programs. Each program is independent of the other and has its own directory structure that follows the GWT "client" directory structure described below.
Directory : ~/clients/gbpAjax
When a program has been "compiled", the main directory will contain:
Directory : bin
Directory : src
Directory : www
Directory : ~/clients/gbpAjax/www/com.sduk.gbpAjax
TIP : When you upload the output files to your website, remember to upload every one of the randomly named files. Remember also that each time you "compile" the website, all the files are regenerated, with newly generated random names. So you may want to delete the previous random names before uploading the new ones.
The "src" directory is where you keep your source Java and HTML files as follows.
Directory : ~/clients/gbpAjax/src/com/sduk/client
Java files. If you are setting up a program called "gbpAjax", there will be at least three files as follows:
These three files give you an empty html page with no links and no text, but primed ready to take extra pages. Note that each additional web page you generate needs both a link to the page in the main "gbpAjax.java" file an additional "java" program that defines the content of the additional page.
Directory : ~/clients/gbpAjax/src/com/sduk/public
other files/directories (optional)
TIP : You are probably better off always editing files in this "src/../public" directory and then "recompiling" instead of updating files directly in the "www/com.sduk.gbpAjax". Otherwise, the next time you recompile, the old "public" files will overwrite the updated "www" files.
What is the GWT command to set up the directory structure
If you are not using the editor Eclipse, follow these instructions. Otherwise, see the "Eclipse Tips" below.
The GWT command to set up the directory structure is "applicationCreator", found in the GWT directory. In our example, move to the directory above which you want to create the new directory (eg. cd ~/clients), then run the command in a Terminal:
In our example, we have used the command:
Eclipse is a massive editor that handles Java code. It identifies Java syntax errors (for which non-Java programmers should be truly grateful). Its use is relatively instinctive. The following tips may make life much easier in connection with the GWT.
When creating the directory structure (see above), precede the creation of directories with creation of a project.
Move to the directory above which you want to create the new directory (eg. cd ~/clients), then run the command in a Terminal:
~/download/GWT/projectCreator -eclipse [ProjectName]
In our example, we used the command:
~/download/GWT/projectCreator -eclipse gbpAjax
Then set up the directories, using the option "-eclipse [ProjectName]" in the command described in the previous section as follows:
~/download/GWT/applicationCreator -eclipse gbpAjax com.sduk.client.gbpAjax
When launching eclipse, you are asked for the "home" directory. You should select the main clients directory (eg. ~/clients). Then, to open the newly created project file:
In eclispe, select File, Import, (if the "General" line is collapsed, open it up), Existing Projects Into Workspace.
You should then see the newly created project. When you click it, you will see all the newly created files and the full directory structure. You will also see the component GWT files in the "jar" file, which you can look at by double clicking.
You never need to compile a project within Eclipse.
How do I "compile" the Java code into a web site?
When you use "applicationCreator" as described above, GWT creates two additional executable files. One is "gbpAjax-compile", the other is "gbpAjax-shell". Both files are found in the ~/clients/gbpAjax directory
To "compile" the programs, run:
Once compiled, open the main html file in the output directory (eg. ~/clients/gbpAjax/www/com.sduk.clients/gbpAjax.html) with your browser to see the end product.
However, there is a far sleeker command which, in one command, allows you both to "compile" the programs and then immediately open the main html file in a virtual browser, designed by Google, called "Tomcat". This dual function is effected with the command:
Does GWT handle every browser
When is GWT suitable for an application
GWT is truly wonderful. Google deserves every bit of the enormous praise and respect it has generated by making this code available to the open source community.
It is invaluable for many "single function" applications, such as a Word Processor or Spreadsheet.
But there are a number of constraints that make GWT unsuitable in a number of instances.
Firstly, I have not been able to integrate GWT with an existing website. You use either GWT or conventional techniques. This is partly because GWT works through a single webpage. If each Java program was capable of defining its own html template for that page alone, rather than having to depend on the single, central html file set out in the "public" directory, it would hugely enhance the applications for which GWT was suited.
Fourthly, GWT is still being developed. The documentation available is wonderful if you know what you are doing, but woeful if not. If you come across problems, do not expect to find much in the way of solutions for the time being. So simple applications are likely to work well. Complex ones may have you tearing your hair out.