Google Web Toolkit-an introduction
Posted On April 26, 2012 by GB Shah filed under Enterprise
What GWT comprises of: The Google Web Toolkit provides a number of technologies for building Ajax applications:
1) The GWT compiler 2) a UI layer, 3) an RPC system, 4) several additional utilities that make the web tier easier to manage, and 5) the GWT shell. We’ll look briefly at each of them now.
User Interface layer
Built on top of GWT’s intelligent compilation system is a cross-browser UI layer. The feature comes from implementing the UI elements in Java and then using a browser-specific implementation of the core DOM to build out the native browser elements, as they’re needed by the higher-level Java layer. The GWT UI layer provides a wide variety of layout-related panels, data representation constructs, a set of user input elements, and more. Some new advanced elements, like a rich text editor and a suggest box were added in the 1.4 release of GWT. This release also started to include some great new optimized UI elements, such as the ImageBundle. The ImageBundle takes static images in your application and merges them into a single graphic file. The client browser can make a single request to get all the images in your application, rather than making multiple HTTP request-response cycles. This improves the startup time of the application.
Remote Procedure Calls
GWT project structure
GWT comes with a command line tool webAppCreator which creates a default project structure and when you use Eclipse or NetBeans the IDE will take care. But to understand things better, a look at the structure of the individual GWT projects will be helpful. First Set GWT_HOME as an environment variable and add the folder in which GWT is installed (GWT_HOME) to the path environment variable. Create a folder for your project. In command prompt change to that directory.
Type %GWT_HOME\webAppCreator gwtProjects.Caculator
gwtProjects –the folder I created for the project.
Calculator –the name of the Java class to be created by the tool.
Number of folders and files are generated by the tool but the most important are: a module configuration file, an entry point class, and an HTML host page.
The module configuration file is Calculator.gwt.xml(under src/gwtProjects).
The entry point class is Calculator.java(under src/gwtProjects/client).
The HTML host page is Calculator.html (available under gwtProject/war).
GWT applications are defined as modules. The GWT system of modules allows application to pack various components - client-side application code, server-side service implementations, and assets such as graphics and CSS files- into an easily redistributable package. Modules, with their facilitation of inheritance, are also an important part of the GWT bootstrap and deployment process. A module is defined by an XML file packaged with the Java source implementing the module. This XML file declares several primary elements: inherited modules, servlet deployments, compiler plug-ins, and entry points. The following shows the extract from Calculator.gwt.xml generated above.
<inherits name='com.google.gwt.user.User'/> //----------1)
<entry-point class='gwtProjects.client.Calculator'/> //-------------------------------2)
1 1) Inherit core GWT classes
2 Define EntryPoint
This module file is pretty basic.
The <inherits> tag tells GWT to inherit the core User module. This includes the GWT UI elements as well as the custom compiler elements that generate the appropriate versions for Firefox, Safari, Internet Explorer, and Opera. Inheriting a module brings in all the elements of the module, not just source code. This is one of the main reasons for having the module system. Of course, the compiler can find additional Java sources referenced by our project, but the module system allows build-time and server-side behavior to be inherited as well. Next is the declaration of an <entry-point>. As mentioned previously, an entry point is the starting point for the code in a GWT project—we’ll cover this in more detail in the next part of the article.