|
Advertisement |
Google Web Toolkit-an introduction
Posted On April 26, 2012 by GB Shah filed under Enterprise
What is Google Web Toolkit (GWT)? It is a Java-based framework for developing Ajax-enabled web applications easily. But unlike other Java web frameworks like Struts or JSF, it is not meant for server side programming. It is meant for client-side Ajax programming and is more akin to JavaScript libraries Dojo, Script.aculo.us, Ext JS, and the Yahoo User Interface. GWT provides a platform for creating “Rich” Internet Applications (RIAs)—rich in the sense of allowing the client to maintain state and even perform computations locally, with a full data model, without requiring a trip to the server for every update. Ajax development usually is done with JavaScript and is hard for a number of reasons: JavaScript can require a lot of specialized knowledge and browsers have slightly different implementations and feature sets. The tooling support is still immature, and debugging is not that easy. All of these factors make building and managing large Ajax projects difficult .To deal with these problems, a number of toolkits and JavaScript libraries, mentioned above, like Dojo, Script.aculo.us, Ext JS, and the Yahoo User Interface have emerged. GWT is one such tool but it was engineered to start with the strongly typed Java language and emit different JavaScript versions for different browsers through a compiler. Starting from a single code base and generating all the required variations of JavaScript makes life a lot easier for the developer.
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.
GWT compiler
The GWT Java compiler takes Java code and compiles it into JavaScript. It has some advanced rules for doing this. You can specify the user agent or client browser you’re targeting and compiler will give you the required version of the code. Unlike most Ajax toolkits written in JavaScript, which have complex logic to adapt to different browser environments, from GWT, each browser gets a lean and specific version of your application and isn’t forced to download code for all the other browsers your application can support. It’s through this mechanism that GWT implements a cross-browser UI toolkit.
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
RPC allows for serialization and de-serialization of Java objects from server-side implementations of remote services, which can then be called asynchronously from the client. To enable this, the compiler generates code during the compilation step to handle the serialization at a low level. Serialized objects are versioned and mapped at compile time. This carries with it two major advantages. First, as new versions are deployed there is agreement between the client and server code. Second, the server implementation can compress the state of Java objects down to arrays of JavaScript primitives. This passing of simple arrays allows for even more concise data formatting than JavaScript Object Notation (JSON), which is known for its simplicity and efficiency.
Additional utilities
GWT also includes a number of utilities to make building applications for the web tier easier. These include support for additional ways to communicate with servers, internationalization (i18n) tools, a history management system, and formal testing support. GWT gives you a means to test your code by writing test cases either as Java or as JavaScript. All of the additional utilities GWT provides are aimed at making the development cycle a little easier and a little more predictable.
GWT shell
The GWT shell allows you to test your application in a browser while executing the native Java byte-code. This allow us to use all our favorite Java tools to inspect our application, including profilers, step-through debugging, and JTI-based monitors. This hosted mode browser, with an embedded Apache Tomcat server, is also what makes it possible to test our compiled JavaScript with JUnit.
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 projects are defined in terms of modules, composed of resources, configuration and source. The module configuration defines compile-time information about a project and specifies resources needed at runtime. Beyond configuration, modules also make possible a rich inheritance mechanism. One thing a module defines is the starting point for a project’s code, known as an entry point. Entry point classes are coded in Java and are referenced by a module definition and compiled to JavaScript. Modules themselves, and the entry points they define, are invoked through a <script> reference on the host page-welcome file in web.xml-more about this later.
Modules
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.
<module>
<module rename-to='calculator'>
<inherits name='com.google.gwt.user.User'/> //----------1)
<entry-point class='gwtProjects.client.Calculator'/> //-------------------------------2)
</module>
Listing 1.
B))11
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.
