Google Web Toolkit

2012-07-05T09:44:00.000-07:00

Google Web Toolkit (GWT) is an open source set of tools that allows web developers to create and maintain complex JavaScript front-end applications in Java. It is licensed under the Apache License version 2.0. The GWT’s mission statement focuses on radically improving the web experience for users, by enabling developers to use existing Java tools to build no-compromise AJAX for any modern browser.
Google is set to launch GWT 2.0 later this year. The progress of GWT has been slow but steady over the years. Let us explore the road traveled so far and what lies ahead.Google promises much more with the GWT 2.0
GWT 2.0 contains huge improvements, including dynamic script loading, a new catalog of compiler optimizations, and a new approach to hosted mode debugging that uses the native browser.Version 2.0 will bring GWT a huge step forward and boost performance for developers and clients. It is not official, but 2.0 maybe also brings a new XML based markup language to define the layout. My guess is that the syntax will be close to HTML.

Google Web Toolkit (GWT), an open source software development framework that allows the programmer to write Java code, which then gets translated into AJAX code. More specifically, the GWT compiler converts the Java classes into browser-compliant HTML and JavaScript code.
It’s a tool that enables you to develop client-side code, working with Java, and compiling your code into JavaScript, which is then executed
at the client’s browser. The final product is a web application with almost desktopapplication levels of interactivity, which executes client-side with minimal needs of server-side code or interaction. Compiling into JavaScript provides an extra touch of speed, and the final code is optimized and as good, or better, than human written code. And, most important, you won’t need to worry about browser differences and quirks because GWT generates appropriate code for each specific browser.

GWT Architecture

GWT features

A single code base for client and server.
Great development tools, via Eclipse: refactoring, code navigation, etc. This was one of the reasons the creators of GWT chose Java as the source language. Server-side JavaScript certainly would have been a possibility, and compiling JavaScript to JavaScript is not unheard of, either.
Very quick turn-around: after making changes, the server and client can be reloaded quickly to reflect the changes (only the first start of the client is a bit slow, subsequent reloads are fast).
Development tools easy to install: All you need is two Eclipse plugins and you are done.
IDE support: The Eclipse plugin helps with various coding tasks and errors (such as keeping Service and AsyncService consistent)
Web application easy to install: GWT produces a WAR file. Drop it into a servlet container such as Jetty or Tomcat. Done.
Supports multiple Browsers
Communicates over network with your hosted mode instance: Great if you’re working on Mac OS X but want to test in IE.
Dynamic and reusable UI components: programmers can use pre-designed classes to implement otherwise time-consuming dynamic behaviors, such as drag-and-drop or sophisticated visual tree structures.
Simple RPC mechanism
Browser history management
Support for full-featured Java debugging
GWT handles some cross-browser issues for the developer.
JUnit integration
Easy internationalization
The developers can mix handwritten JavaScript in the Java source code using the JavaScript Native Interface (JSNI).
Support for using Google APIs in GWT applications (initially, support for Google Gears)
Open-source
The developers can design and develop their application in a pure object-oriented fashion, since they're using Java (instead of JavaScript).
The JavaScript that the GWT compiler generates can be tailored to be either unobfuscated and easy to understand or obfuscated and smaller to download.
A number of libraries are available for GWT, by Google and third parties. These extend GWT's features.
Code splitting: with the developer providing "split points" in the source code, the GWT compiler will be able to split the JavaScript code into several small chunks instead of one big download. This will lead to reduced application startup time as the size of the initial download is decreased.
Declarative User Interface: using an XML format, the new feature known as UiBinder allows the creation of user interfaces through declaration rather than code. This allows clean separation of UI construction and behavior implementation.
Resource bundling: the ClientBundle interface will allow resources of any nature (images, CSS, text, binary) to be bundled together and transferred in one download, resulting in fewer round-trips to the server and hence lower application latency.

How is GWT different from other Frameworks

GWT provides a set of ready-to-use user interface widgets that you can immediately utilize to create new applications. It also provides a simple way to create innovative widgets by combining the existing ones. You can use the Eclipse IDE to create, debug, and unit-test your AJAX applications. You can build RPC services to provide certain functionalities that can be accessed asynchronously from your web applications easily using the GWT RPC framework. GWT enables you to integrate easily with servers written in other languages, so you can quickly enhance your applications to provide a much better user experience by utilizing the AJAX framework. GWT has the Java-to-JavaScript compiler to distill your application into a set of JavaScript and HTML files that you can serve with any web server. This gives us a great feature browser compatibility

GWT with AJAX

GWT Ajax Programming shows you how to create reliable user interfaces that enhance the user experience.
GWT is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.
GWT lets you avoid many of these headaches while offering your users the same dynamic, standards-compliant experience. You write your front end in the Java programming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML.
The client-server architecture has undergone a vast change over a short period of time. Earlier,each application had a different client software, with the software serving as the UI. This software had to be installed individually on every client, and needed to be updated every time we made changes to the application. We moved from that to the web era and deploying applications on the Internet, and then Internet enabled us to use the omnipresent web browser for accessing our applications from anywhere. This was a sea change, but we still had issues of performance and applications not having the same feel or responsiveness as desktop applications. Enter AJAX, and now we can build web pages that can rival a desktop application in responsiveness and nifty looks.AJAX underpins the current trend in developing applications for the Internet known as Web.The client-server architecture has undergone a vast change over a short period of time. Earlier,each application had a different client software, with the software serving as the UI. This software had to be installed individually on every client, and needed to be updated every time we made changes to the application. We moved from that to the web era and deploying applications on the Internet, and then Internet enabled us to use the omnipresent web browser for accessing our applications from anywhere. This was a sea change, but we still had issues of performance and applications not having the same feel or responsiveness as desktop applications. Enter AJAX, and now we can build web pages that can rival a desktop application in responsiveness and nifty looks.AJAX underpins the current trend in developing applications for the Internet known as Web
The Google Web Toolkit (GWT) provides a significant boost to Ajax development. Any new technology like this is a hard sell especially when there are many other choices. In reality, nothing gives you the benefits GWT gives you for Ajax applications. If you're not already bound to a framework it just doesn't make sense to not use it. By using GWT for your Ajax application you get big performance gains for free. By free I mean that you just don't need to think about it. You concentrate on writing your application logic and GWT is there to make things nice for you.
GWT is a Java environment, which is well known for its clear object concept and easy maintenance. While in development, you can run your Java code in a special “hosted mode” browser with all of the mature, sophisticated Java debugging tools you always have available.
GWT support many ways to process asynchronous communication between the browser and the server. One of them is the RPC mechanism, which defines interfaces and implementations for the server functions, and code will be generated to allow your client code to call them as if they were simple local methods. This replaces defining XML or JSON data formats for requests and responses. Meanwhile, GWT also support the JSON and XML over HTTP.
Almost all AJAX developers have suffered from writing JavaScript to support all browsers. GWT, like any other good AJAX framework, will handle this for you. The GWT has a built-in GUI library that would allow you built a web application like swing and swt. All of these would be able to transferred to standard HTML and be embedded into your site.
More importantly, GWT applications provide true interactivity with lots of code being executed on the client, reducing server-side interaction to a minimum. As a result, it provides very good usability and enhances the user experience.

GWT Demo applications

Select File > New > Web Application Project.
Enter the name "de.vogella.gwt.helloworld" for your project and the java package.
Only select "Use Google Web Toolkit"

Delete all java files under the package "client" and "server".

GWT entry point

Create a following Java class "HelloGwt" in the "de.vogella.gwt.helloworld.client" package.


package de.vogella.gwt.helloworld.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloGwt implements EntryPoint {
@Override 

public void onModuleLoad() {
 Label label = new Label("Hello GWT !!!");
 Button button = new Button("Say something");
 button.addClickHandler(new ClickHandler() {
 @Override
 public void onClick(ClickEvent event) {
 Window.alert("Hello, again");
 }
 });
 RootPanel.get().add(label);
 RootPanel.get().add(button);
 }
}

Create the file "De_vogella_gwt_helloworld.gwt.xml" in package "de.vogella.gwt.helloworld" to the following.


<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='de_vogella_gwt_helloworld'>
  <!-- Inherit the core Web Toolkit stuff. -->
  <inherits name='com.google.gwt.user.User'/>

  <inherits name='com.google.gwt.user.theme.standard.Standard'/>

  <!-- Specify the app entry point class. -->
  <entry-point class='de.vogella.gwt.helloworld.client.HelloGwt'/>
</module>

This file defines your entry point to your application. In GWT the entry point is similar to the main method in Java.

HTML page

In the folder war/WEB-INF you should find a folder with the file "De_vogella_gwt_helloworld.html". Change this file to the following.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> 

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" 

href="De_vogella_gwt_helloworld.css">
<title>My First GWT applicaton</title>
<script type="text/javascript" language="javascript" 
src="de_vogella_gwt_helloworld/de_vogella_gwt_helloworld.nocache.js">

</script>
</head>

<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' 
style="position:absolute;width:0;height:0;border:0"></iframe>
<h1>My First GWT applicaton</h1>
</body>
</html>

web.xml

The Google Plugin created also a web.xml and placed a reference to a servlet (which we deleted). Change the web.xml to the following.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app 

PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>De_vogella_gwt_helloworld.html</welcome-file>
</welcome-file-list>
</web-app>

Modify CSS

Change the CSS of our application. In folder war you find a file "De_vogella_gwt_helloworld.css". Change it to the following.


h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
}

.gwt-Label {
 color: #DF0101;
 font: normal 12px tahoma, arial, helvetica, sans-serif;
 border: 1px solid #99bbe8;
 padding: 14px;
}

.gwt-Button {
 height: 5.7em;
 margin-bottom: 5px;
 padding-bottom: 3px;
 font-size: 12px;
 font-family: arial, sans-serif;
}

You can assign a certain style to your GWT UI elements by using the "setStyleName"-Method as shown below.

package de.vogella.gwt.helloworld.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloGwt implements EntryPoint {

@Override

public void onModuleLoad() {

Label label = new Label("Hello GWT !!!");

label.setStyleName("my_label_for_css"); // Change css to use this

Button button = new Button("Say something");

button.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) {

Window.alert("Hello, again");

});
RootPanel.get().add(label);
RootPanel.get().add(button);
}

Run

To run your application right-click the project and select Run As -> "Web application".
This opens a new view "Development Mode. Copy the url from this view.

Paste this url in your browser and install the required plugin (is necessary).

The result should look like this:

Congratulations! You created your first GWT application.

For More Reporting Tools just like BIRT(Business Intelligence Reporting System)
For More Reporting Tools just like itext

Technologies information

Google Web Toolkit

LINUX TUTORIALS

VICIDIAL CALL CENTRE SUITE

CRM TUTORIALS

Reporting Tools-BIRT(Business Intelligence Reporting System)

For More Reporting Tools just like itext

ABOUT GWT