Inside the Google Web Toolkit (GWT)

What is the Google Web Toolkit (GWT)

• A tool for creating AJAX sites using Java
  * Take advantage of all of the great Java tools to create AJAX applications
  * Have the maintenance advantages of Java with the deployability of AJAX
  * Build great AJAX sites without having to fill your code with special-cases to handle the different browsers
• A debugging environment for AJAX sites
  Debug your AJAX site on your desk using the Eclipse debugging environment, no more messagebox- debugging!

What Does GWT Do

• Compile Java into HTML, CSS, and Javascript
• Marshal and unmarshal RPC calls
  * For this you do have to provide a server-side servlet to accept the call, but even there GWT provides some assistance.
• Abstract the details of asynchronous calls
• Handle browser quirks so your code stays clean
• Handle I18n using translated message files
• ImageBundle!
• Handle browser history support

The GWT Java To Javascript Compiler

• Parses the original Java code
  * Full parser, almost all Java constructs will be parsed correctly.
• Generates a full Abstract Syntax Tree (AST) (see AST Article)
  * GWT's compiler isn't a parlor trick, it's a real code parser and cross-language compiler
• Performs optimization, dead-code elimination, dynamic analysis, and other code fixups
  * The generated JS is fast and efficient, sometimes faster than what you might write yourself
• Does not (yet) handle generics and erasure

The GWT AST Model

• The AST represents each syntactic element of the Java code in a Java object
• Implemented in package com.google.gwt.dev.jjs.ast
• Each item is a JNode, the root is a JProgram
  * Much like DOM and Node/Document.
• The AST also supports JSON objects
  * JSON is a first-class entity in GWT, not an afterthought
• The AST makes extensive use of Visitor and
• Decorator patterns

GWT Javascript Code Generation

• Optimization
  * All code is optimized, including some unusual tricks (like turning some methods into wrapped statics)
• Dead-Code Elimination
  * Remove any code that cannot be reached, or always returns the same value(s)
• Javascript Generation
  * Generate Javascript, including all necessary browser-specific checks and workarounds
• Javascript obfuscation and size reduction
  * Javascript is (optionally) obfuscated to protect your trade-secrets, and to reduce it's size

How Does GWT Native Javascript (JSNI) Work

• The native methods are objects in the AST much as other methods are
• When the code generation occurs, the content of the method is just copied into the Javascript
• From there the process is no different from your Java methods
• Much of the JDK and UI code is implemented using JSNI

How Does GWT Translate JDK Classes

• Small subset of the Java library
  * This is growing, but not very quickly at the current time
• Combination of Java and native Javascript
  * Some methods are regular Java code, some are native methods that just contain the Javascript in a special comment
  * It's easy to follow and understand, and it's relatively easy to add new classes

What are GWT widgets

• A few commonly needed UI elements
  * Panels, Buttons, Dialogs, FileUpload, Tables, Forms, Listboxes, Popups, Scrollbars, etc...
  * There's also a History mechanism and a JSON client implementation
• Created using the JSNI mechanism, just like the JDK classes
  * Feel free to create your own You can even contribute them back to the community if you want to.

How Does the GWT RPC Mechanism Work

• You write a client class that implements RemoteService and AsyncCallback
  * RemoteService is a Marker interface (like Serializable) used as an instruction to the compiler
  * AsyncCallback enables the class to receive the response from the server
• Write a servlet that extends RemoteServiceServlet
  * This receives the RPC and sends back the response
  * RemoveServiceServlet handles the RPC part, you handle the processing part

Summary

• The Google Web Toolkit can make it much easier to create interactive web applications
• GWT works by actually compiling your Java code into Javascript, with optimization and obfuscation.
• There are facilities for History, RPC, UI widgets, and native Javascript methods
• The code is available under an Open Source (Apache 2.0) license, you're welcome to explore.
• The team would love to hear what you think of GWT on the GWT forum

Resources

• http://code.google.com/webtoolkit/ - Main site for all things GWT
• http://googlewebtoolkit.blogspot.com/ - GWT team blog
• http://code.google.com/p/google-web-toolkit/ - GWT source code and issue tracker site
• http://tinyurl.com/3y8kmx - Slides from Presentation at TSSJS (PDF)
• http://tinyurl.com/2rkq29 - Video from Google Developer Day

List of Applications using GWT

• a comprehensive thread on groups.google.com
• Lombari Blueprint
• Contact Office
• Google Base
• Google Health
• GwtApps (it’s an awesome book on GWT)
• Xscetch
• Compiere (ERP + CRM)
• Yesmail
• Alenty
• Awdio
• Riflethru
• Nileguide
• GreatGroceryList
• http://www.triniforce.com/pk.html
• http://GoneVertical.com
• http://code.google.com/p/gwt-examples/

Third party widgets & widget libraries

• Ext-GWT (GXT)
• GWT-EXT
• IT Mill
• gwt-scheduler
• gwtsimiletimeline
• gwt-dnd

Read More

Inside the Google Web Toolkit (GWT)

What is the Google Web Toolkit (GWT)

• A tool for creating AJAX sites using Java
  * Take advantage of all of the great Java tools to create AJAX applications
  * Have the maintenance advantages of Java with the deployability of AJAX
  * Build great AJAX sites without having to fill your code with special-cases to handle the different browsers
• A debugging environment for AJAX sites
  Debug your AJAX site on your desk using the Eclipse debugging environment, no more messagebox- debugging!

What Does GWT Do

• Compile Java into HTML, CSS, and Javascript
• Marshal and unmarshal RPC calls
  * For this you do have to provide a server-side servlet to accept the call, but even there GWT provides some assistance.
• Abstract the details of asynchronous calls
• Handle browser quirks so your code stays clean
• Handle I18n using translated message files
• ImageBundle!
• Handle browser history support

The GWT Java To Javascript Compiler

• Parses the original Java code
  * Full parser, almost all Java constructs will be parsed correctly.
• Generates a full Abstract Syntax Tree (AST) (see AST Article)
  * GWT's compiler isn't a parlor trick, it's a real code parser and cross-language compiler
• Performs optimization, dead-code elimination, dynamic analysis, and other code fixups
  * The generated JS is fast and efficient, sometimes faster than what you might write yourself
• Does not (yet) handle generics and erasure

The GWT AST Model

• The AST represents each syntactic element of the Java code in a Java object
• Implemented in package com.google.gwt.dev.jjs.ast
• Each item is a JNode, the root is a JProgram
  * Much like DOM and Node/Document.
• The AST also supports JSON objects
  * JSON is a first-class entity in GWT, not an afterthought
• The AST makes extensive use of Visitor and
• Decorator patterns

GWT Javascript Code Generation

• Optimization
  * All code is optimized, including some unusual tricks (like turning some methods into wrapped statics)
• Dead-Code Elimination
  * Remove any code that cannot be reached, or always returns the same value(s)
• Javascript Generation
  * Generate Javascript, including all necessary browser-specific checks and workarounds
• Javascript obfuscation and size reduction
  * Javascript is (optionally) obfuscated to protect your trade-secrets, and to reduce it's size

How Does GWT Native Javascript (JSNI) Work

• The native methods are objects in the AST much as other methods are
• When the code generation occurs, the content of the method is just copied into the Javascript
• From there the process is no different from your Java methods
• Much of the JDK and UI code is implemented using JSNI

How Does GWT Translate JDK Classes

• Small subset of the Java library
  * This is growing, but not very quickly at the current time
• Combination of Java and native Javascript
  * Some methods are regular Java code, some are native methods that just contain the Javascript in a special comment
  * It's easy to follow and understand, and it's relatively easy to add new classes

What are GWT widgets

• A few commonly needed UI elements
  * Panels, Buttons, Dialogs, FileUpload, Tables, Forms, Listboxes, Popups, Scrollbars, etc...
  * There's also a History mechanism and a JSON client implementation
• Created using the JSNI mechanism, just like the JDK classes
  * Feel free to create your own You can even contribute them back to the community if you want to.

How Does the GWT RPC Mechanism Work

• You write a client class that implements RemoteService and AsyncCallback
  * RemoteService is a Marker interface (like Serializable) used as an instruction to the compiler
  * AsyncCallback enables the class to receive the response from the server
• Write a servlet that extends RemoteServiceServlet
  * This receives the RPC and sends back the response
  * RemoveServiceServlet handles the RPC part, you handle the processing part

Summary

• The Google Web Toolkit can make it much easier to create interactive web applications
• GWT works by actually compiling your Java code into Javascript, with optimization and obfuscation.
• There are facilities for History, RPC, UI widgets, and native Javascript methods
• The code is available under an Open Source (Apache 2.0) license, you're welcome to explore.
• The team would love to hear what you think of GWT on the GWT forum

Resources

• http://code.google.com/webtoolkit/ - Main site for all things GWT
• http://googlewebtoolkit.blogspot.com/ - GWT team blog
• http://code.google.com/p/google-web-toolkit/ - GWT source code and issue tracker site
• http://tinyurl.com/3y8kmx - Slides from Presentation at TSSJS (PDF)
• http://tinyurl.com/2rkq29 - Video from Google Developer Day

List of Applications using GWT

• a comprehensive thread on groups.google.com
• Lombari Blueprint
• Contact Office
• Google Base
• Google Health
• GwtApps (it’s an awesome book on GWT)
• Xscetch
• Compiere (ERP + CRM)
• Yesmail
• Alenty
• Awdio
• Riflethru
• Nileguide
• GreatGroceryList
• http://www.triniforce.com/pk.html
• http://GoneVertical.com
• http://code.google.com/p/gwt-examples/

Third party widgets & widget libraries

• Ext-GWT (GXT)
• GWT-EXT
• IT Mill
• gwt-scheduler
• gwtsimiletimeline
• gwt-dnd

Read More

GWT Compiler - Compiling for one browser and also supporting hosted mode

When you want to compile your GWT module for only specific browser, you can change UserAgent.gwt.xml inside gwt-user.jar in package com.google.gwt.user.

Find this text and change it as you wish:
<define-property name="user.agent" values="ie6,gecko,gecko1_8,safari,opera">

gecko - Mozilla ,gecko1_8 - FireFox

I want to compile for only IE , then I change it into

<define-property name="user.agent" values="ie6">

I want to do this because we limit specification of browser for our application, and by doing this we can get more space up to 40%

GWT spends time to compute permutations : create javascript file per browser/locale. With this kind of application, GWT produces 50 permutations :

• 5 browsers : ie6, opera, gecko1_8, safari, gecko
• 10 locales : default, de_DE, en_UK, fr_FR, hr_HR, hu_HU, it_IT, nl_NL, pl_PL, pt_PT

OR

1) Force a single browser

You can add the following set-property in ModuleName.gwt.xml

<!-- User Agent -->

<set-property name="user.agent" value="xxxx" />
where value = "ie6/opera/gecko1_8/safari/gecko"

Note: Add only one User Agent set-property in your ModuleName.gwt.xml

For example in MODULE com\mymodule\Container.gwt.xml:

<module >
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name="com.google.gwt.user.User"/>
<!-- Inherit the GWT-EXT stuff. -->
<inherits name="com.gwtext.GwtExt" />
<!-- Inherit the GWT-EXT User Extension stuff. -->
<inherits name="com.gwtextux.GwtExtUx" />
<inherits name="com.gwtextux.GridSearchPlugin"/>
<!-- User Agent -->
<set-property name="user.agent" value="ie6" />
<!-- Include the core ExtJs files. -->
<stylesheet src="js/ext/resources/css/ext-all.css" />
<script src="js/ext/adapter/ext/ext-base.js" />
<script src="js/ext/ext-all.js" />
<script src="js/pagebus/pagebus.js"/>
</module>

2) Use only one locale

By default, GWT uses "default" locale. So no need to worry about the locale settings.

By doing this you can see the files difference in MODULENAME/html/*.* (If you are using Cypal Studio) MODULENAME/www/*.* (If you are using GWT Designer) before and after added the set-property in ModuleName.gwt.xml

With this two points, GWT really speeds up we can get more space up to 30% to 40% and compilation timewill be almost 40% less.

Compile GWT files more than one browser

If you add user.agent=ie6 the compiled code will work only in IE6.

If you add the following user.agent then your code will work both the browsers (IE6 & Firefox 2/3)

<!– User Agent –>

<set-property name=”user.agent” value=”ie6″/>

<set-property name=”user.agent” value=”gecko1_8″/ >

If you add

<set-property name=”user.agent” value=”ie6,gecko1_8″/>

you will get an error message like below

[ERROR] Invalid property value ‘ie6,gecko1_8′

[ERROR] Failure while parsing XML

ScreenShot

Before “user.agent”

After “user.agent” added

More info

• How to speed up the GWT compiler ? (Part III)
• How to speed up the GWT compiler ? (Part II)
• How to speed up the GWT compiler ? (Part I)

Javascript Debug Toolkit – Debug javascript in ie,firefox,chrome,safari,opera and all browsers support ajaxToo

Read More

GWT Compiler - Compiling for one browser and also supporting hosted mode

When you want to compile your GWT module for only specific browser, you can change UserAgent.gwt.xml inside gwt-user.jar in package com.google.gwt.user.

Find this text and change it as you wish:
<define-property name="user.agent" values="ie6,gecko,gecko1_8,safari,opera">

gecko - Mozilla ,gecko1_8 - FireFox

I want to compile for only IE , then I change it into

<define-property name="user.agent" values="ie6">

I want to do this because we limit specification of browser for our application, and by doing this we can get more space up to 40%

GWT spends time to compute permutations : create javascript file per browser/locale. With this kind of application, GWT produces 50 permutations :

• 5 browsers : ie6, opera, gecko1_8, safari, gecko
• 10 locales : default, de_DE, en_UK, fr_FR, hr_HR, hu_HU, it_IT, nl_NL, pl_PL, pt_PT

OR

1) Force a single browser

You can add the following set-property in ModuleName.gwt.xml

<!-- User Agent -->

<set-property name="user.agent" value="xxxx" />
where value = "ie6/opera/gecko1_8/safari/gecko"

Note: Add only one User Agent set-property in your ModuleName.gwt.xml

For example in MODULE com\mymodule\Container.gwt.xml:

<module >
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name="com.google.gwt.user.User"/>
<!-- Inherit the GWT-EXT stuff. -->
<inherits name="com.gwtext.GwtExt" />
<!-- Inherit the GWT-EXT User Extension stuff. -->
<inherits name="com.gwtextux.GwtExtUx" />
<inherits name="com.gwtextux.GridSearchPlugin"/>
<!-- User Agent -->
<set-property name="user.agent" value="ie6" />
<!-- Include the core ExtJs files. -->
<stylesheet src="js/ext/resources/css/ext-all.css" />
<script src="js/ext/adapter/ext/ext-base.js" />
<script src="js/ext/ext-all.js" />
<script src="js/pagebus/pagebus.js"/>
</module>

2) Use only one locale

By default, GWT uses "default" locale. So no need to worry about the locale settings.

By doing this you can see the files difference in MODULENAME/html/*.* (If you are using Cypal Studio) MODULENAME/www/*.* (If you are using GWT Designer) before and after added the set-property in ModuleName.gwt.xml

With this two points, GWT really speeds up we can get more space up to 30% to 40% and compilation timewill be almost 40% less.

Compile GWT files more than one browser

If you add user.agent=ie6 the compiled code will work only in IE6.

If you add the following user.agent then your code will work both the browsers (IE6 & Firefox 2/3)

<!– User Agent –>

<set-property name=”user.agent” value=”ie6″/>

<set-property name=”user.agent” value=”gecko1_8″/ >

If you add

<set-property name=”user.agent” value=”ie6,gecko1_8″/>

you will get an error message like below

[ERROR] Invalid property value ‘ie6,gecko1_8′

[ERROR] Failure while parsing XML

ScreenShot

Before “user.agent”

After “user.agent” added

More info

• How to speed up the GWT compiler ? (Part III)
• How to speed up the GWT compiler ? (Part II)
• How to speed up the GWT compiler ? (Part I)

Javascript Debug Toolkit – Debug javascript in ie,firefox,chrome,safari,opera and all browsers support ajaxToo

Read More