Building Rich Internet Applications Using Google Web Toolkit

Building Rich Internet Applications
Using Google Web Toolkit (GWT)

Karthik Shyamsunder

October 2008

Karthik Shyamsunder

Who am I?

+ Karthik Shyamsunder
▪ Principal Engineer, VeriSign Inc.
▪ Application Architect for the VeriSign Naming Division
▪ Adjunct Faculty at Johns Hopkins University
▪ Speak at conferences on Architecture, Security, Performance, Distributed
Computing, Language/Design

2
VeriSign Proprietary and Confidential Information

Overall Goal of this Session

1. Introduce you to the GWT framework and
application development
2. Discuss key features in GWT that will
allow you to build no compromise AJAX
applications

3

Agenda

+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A

4

Agenda

+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A

5

What are Rich Internet Applications?
+ Web applications that have the features and
Backend
functionality of traditional desktop applications
Processes

+ Typically do the following: Server Logic
▪ run in a web browser, or do not require software
installation
▪ run locally in a secure environment called a Server
sandbox

+ Typically transfer the processing necessary for the
user interface to the web client but keep the bulk of
the data back on the application server
(Sandbox
+ Make asynchronous/synchronous calls to the Client Engine)

backend based on user actions/events

+ “Thick Client” Application


Technologies for Building RIAs

+ Several technologies available for building
Rich Internet Applications Backend
Processes

+ Key Technologies for building RIAs Server Logic
▪ Adobe Flex
▪ Microsoft Silverlight Server
▪ Java Applets/WebStart
▪ AJAX

+ Other Technologies and Frameworks for
(Sandbox
building RIAs Client Engine)
▪ Java FX
▪ Open Laszlo


Building RIAs using Java EE and AJAX

We can classify building applications in AJAX into 2 :
1. Client Side AJAX Development
– Presentation using HTML/JSP pages using client side frameworks such as
Scriptaculous, JQuery, Dojo client side components
– Presentation logic using JavaScript
– Server Side development using traditional Java EE Servlets/Services
exposing backend services as REST, XML RPC Web Services
– Call backend business logic in the background using the JavaScript
language and XMLHttpRequest object built into the browser

2. Server Side AJAX Development
– Presentation using component frameworks JSTL tag libraries such as JBoss
RichFaces, Icesoft Icefaces built on on top of JSF
– Presentation logic done as event handlers in JSF component model
– Call to backend business logic using JSF event Model


Challenges with typical AJAX development
+ JavaScript
▪ Not a strongly typed language
▪ Static Type checking?
▪ Code completion?
▪ Runtime-only bugs
+ Browser compatibilities = “if/else soup”
▪ OK, we have frameworks
▪ Too many frameworks!
+ Juggling multiple languages (JavaScript, JSP tags,
Java, XML, HTML etc.)
▪ Less modularization
▪ Maintenance nightmare
+ Poor debugging
▪ Window.alert(), Firebug
▪ But what about end to end
+ Back button
+ Limited IDE support

9

Introducing Google Web Toolkit

10

Introducing GWT
+ What is GWT?
▪ GWT is an open source Java development framework
▪ Provides set of tools for building AJAX apps in the Java language

+ What makes GWT interesting?
▪ Write, run, test, and debug everything in JAVA!

+ GWT ≠ applets
▪ GWT converts your Java source into equivalent JavaScript

+ Is GWT a compiler?
▪ GWT has a compiler, but it has lot more to offer…

11

Why Use Java Language for AJAX Development?

+ Static type checking in the Java language boosts productivity while
reducing errors

+ Common JavaScript errors (typos, type mismatches) are easily
caught at compile time rather than by users at runtime

+ Code prompting/completion is widely available

+ Automated Java refactoring is pretty snazzy these days

+ Java-based OO designs are easier to communicate and understand,
thus making your AJAX code base more comprehensible with less
documentation.
12

Advantages of GWT

+ No need to learn/use JavaScript language
▪ Leverage Java programming knowledge you already have

+ No need to handle browser incompatibilities and quirks
▪ GWT handles them for you

+ No need to learn/use DOM APIs
▪ Use Java APIs

+ No need to handle forward/backward buttons browser-history
▪ GWT handles it for you

+ No need to build commonly used Widgets
▪ Most of them come with GWT

+ Can send complex Java types to/from the server
▪ Data gets serialized across network

13

Advantages of GWT

+ Leverage various tools of Java programming language for
writing/debugging/testing
▪ For example, NetBeans or Eclipse

+ Internationalization
▪ GWT includes a flexible set of tools to help you internationalize your
applications and libraries
▪ GWT internationalization support provides a variety of techniques

+ JUnit integration
▪ GWT's direct integration with JUnit lets you unit test both in a debugger
and in a browser and you can even unit test asynchronous RPCs

+ Support by major company
▪ From the company that popularized Ajax in the first place
▪ Company won't go away like perhaps with AjaxTags

14

Disadvantages of GWT

+ Only for Java developers
▪ Most Ajax environments do JavaScript on the client and have a choice
for the server. GWT is based entirely around Java.
+ Big learning curve
▪ Java developers can deploy with AjaxTags in just a few minutes,
whereas it takes much longer to get anything running with GWT.
+ Cumbersome deployment
▪ Clumsy and poorly documented process to deploy on a regular Java-
based Web server.
+ Nonstandard approach to integrate JavaScript
▪ You never put direct JavaScript in your HTML. Instead, you use JSNI to
wrap JavaScript in Java.
– Very powerful in the long run, but hard to get used to at first.
+ Unusual approach
▪ Fundamentally different strategy than all other Ajax environments
makes evaluation and management buyoff harder

15

Agenda

+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A

16

Downloading and Installing GWT
+ Official Site for GWT is http://code.google.com/webtoolkit/
+ Downloading GWT
▪ You can download the latest version of software from
http://code.google.com/webtoolkit/download.html
▪ Licensed under Apache 2.0 open source license scheme
▪ Latest version of the software is GWT 1.5

+ Installing GWT
▪ Extract the ZIP file into wherever you want to install the toolkit
▪ That’s it!

+ Setting up the development environment
▪ Add {INSTALL-DIR}gwt-windows-1.5.2 to your PATH
▪ This is so that the many of the toolkit commands are available

+ Since GWT is java based tool ensure that you have JDK 1.5 or
above and JAVA_HOME is set

17

Application Development Steps
+ Create an Eclipse application
▪ Use projectCreator and applicationCreator scripts
▪ You can make non-Eclipse projects also, but the tutorial examples
assume Eclipse. I use MyEclipse, but it is similar in both versions.

+ Edit auto-generated HTML file
▪ Called AppName.html
– Under src/package.../public folder in Eclipse
▪ Give ids to regions where controls will be placed

+ Edit auto-generated Java application class
▪ Class: package...client.AppName
– Under src folder in Eclipse
▪ Method: onModuleLoad
▪ Create controls and give them event handlers
▪ Insert controls into HTML page
– RootPanel.get(quot;htmlIDquot;).add(control);

18

1. Make sure PATH includes GWT install directory
▪ Or specify full path for scripts

2. Make a temporary directory for your project
▪ Directory name is arbitrary

3. Make a blank Eclipse project
Names must match
▪ DOS> projectCreator –eclipse GwtTestProject

4. Make a starting-point application
▪ DOS> applicationCreator –eclipse GwtTestProject
myPackage.client.GwtTestApplication Name of driver class
that will be created.
5. Start Eclipse and import project Rightmost package
name must be quot;clientquot;.
▪ File > Import > Existing Projects into Workspace
– Browse to directory from (2) above and click quot;Finishquot;
– If you specify quot;copy filesquot; (usual approach), then delete the
temporary directory from (2) above

19


Starting-point HTML file. You will edit this extensively.

When you make server-side code, register servlet in here.

Client-side code must be in quot;clientquot; package. Server-
side code can also import and call classes in this
package (other than main app). All code in this
package will eventually get translated into JavaScript.

Starting point client-side code. You will edit this extensively.

After you have finished testing and debugging, you can
double-click this to generate www directory containing HTML
and JavaScript that can run in a regular browser. But an
easier way to build these files is to run in hosted mode and
then click Compile/Browse (see later slides).

Not needed if you run within an IDE.

20

Agenda

+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A

21

GWT Architecture

22

Google Web Toolkit - Architecture

Server Side Client Side
.java .java
Web/Application
Server

D
E
Java GWT P
L HTTP/
Compiler Compiler O REST/
Y Web Services
XML/
JSON/
(AJAX Runtime
RPC
Engine)
.class .html .html
.html . js


Running GWT Applications
Hosted Mode
▪ Application is run as Java byte
code within the JVM
▪ Developers spend most of their
time in hosted mode to take
advantage of Java's debugging
facilities and other features

+ Web mode
▪ Application is run as pure
JavaScript and HTML, compiled
from your original Java source
code with the GWT Java-to-
JavaScript compiler
▪ You deploy this JavaScript and
HTML to production, so end users
sees web version of your app

24

Agenda

+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A

25

What browsers does GWT Support?
+ Officially as of mid 2008, GWT supports the following browsers:

▪ Firefox 1.0, 1.5, 2.0 and 3.0

▪ Internet Explorer 6 and 7

▪ Safari 2 and 3

▪ Opera 9.0

26

GWT Widgets and Layout

27

UI components & Event Programming Model
+ Programming model similar UI frameworks such as Swing
+ Primary difference between Swing and GWT is here widgets are
dynamically transformed to HTML rather than pixel-oriented graphics
+ Using widgets makes it much easier to quickly build interfaces that will
work correctly on all browsers
Button btnOk = new Button(“OK”);
CheckBox married= new CheckBox(“Married”);

+ Events in GWT use the quot;listener interfacequot; model similar to other user
interface frameworks (like Swing)
btnOk.addClickListener(new MyClickListener());

+ Possible to manipulate the browser's DOM directly using the DOM
interface, but better to use Java classes from Widget library

28

Style with CSS
+ Each widget class has an associated style name that binds it to a
CSS rule
▪ For example GWT Button has a style called “gwt-Button”

+ A widget’s style name can be set using
▪ setStyleName(String)

+ Also possible to assign an id to a particular component to create a
CSS rule that applies to just one component
▪ <div id=“my-button-id”/>

+ To set the id for a GWT widget, retrieve its DOM Element and then set
the id attribute as follows
▪ Button b = new Button();
▪ DOM.setElementAttribute(b.getElement(), quot;idquot;, quot;my-button-idquot;)

+ Allows you to reference a specific widget in a stylesheet as follows
#my-button-id { font-size: 100%; }

29

Style with CSS (Contd.)
+ Including Stylesheets in the HTML Host Page
▪ Stylesheets are placed in the module's public path
▪ Refer to them them by simply using a <link> tag in the page:
<link rel=quot;stylesheetquot; href=quot;mystyles.cssquot; type=quot;text/cssquot;/>

+ GWT comes with 3 default visual themes that you can choose from
▪ Standard, Chrome, and Dark

+ By default new applications use standard theme
+ Other themes can be selected by adding inherits tag in the
Main.gwt.xml file
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<inherits name=quot;com.google.gwt.user.theme.chrome.Chromequot;/>
<inherits name=quot;com.google.gwt.user.theme.dark.Darkquot;/>

30

Third Party Visual Builder - Instantiations
+ Instantiations, a software company in Portland Oregon, USA
+ Has a product called GWT Designer which is a powerful
bi0directional WYSIWYG tool that may be worth looking into

31

RPC
+ RPCs give you the opportunity to move all UI logic to the client, thus
▪ Geatly improving performance
▪ Reducing bandwidth
▪ Reducing web server load, and a pleasantly fluid user experience

+ Creating a Service
1. Define an service interface that extends RemoteService with methods
2. Implement the service by extending RemoteServiceServlet and
implementing the business methods in the service
3. Define an asynchronous interface for the service to be called by the
client-side

+ GWT RPC makes it easy for the client and server to pass Java
objects back and forth over HTTP

32

RPC (Contd.)
package com.example.foo.client;
import com.google.gwt.user.client.rpc.RemoteService;
public interface MyService extends RemoteService {
public String myMethod(String s);
}

package com.example.foo.server;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.example.client.MyService;
public class MyServiceImpl extends RemoteServiceServlet implements MyService{
public String myMethod(String s) {
// Do something interesting with 's' here on the server.
return s;
}
}

package com.example.foo.client;
interface MyServiceAsync {
public void myMethod(String s, AsyncCallback<String> callback);
33 }

RPC (Contd.)
+ GWT RPC Plumbing

34

RPC (Contd.)
+ Asynchronously making the call involves the following steps
//(1) Instantiate the service
MyEmailServiceAsync myService = (MyService) GWT.create(MyService.class);

//(2) Create an asynchronous callback to handle the result.
AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
// do some UI stuff to show success
}
public void onFailure(Throwable caught) {
// do some UI stuff to show failure
}
};

// (3) Make the call.
myService.mymethod(“abc”);

35

Image Bundle
+ Images in AJAX and Web applications
▪ Typically applications use a lot of images
▪ Each image is a separate file
▪ Browser fetches each separately

+ Studies have shown the following
▪ Large overhead:
– Web applications have icons which are typically smaller than size of the
request
– Hence most of the traffic is overhead and very little of it actual content
▪ Useless freshness checks :
– Even when the images have been cached by the client, a 304 (quot;Not Modifiedquot;)
request is still sent to check and see if the image has change
– Since images change infrequently, these freshness checks are also wasteful
▪ Blocking HTTP connections :
– HTTP 1.1 requires browsers to limit the number of outgoing HTTP
connections to two per domain/port
– A multitude of image requests will tie up the browser's available connections,
thus preventing real RPC requests that do the real work
36

Image Bundle (Contd.)
+ GWT solves performance problems by introducing a construct called
Image Bundle

+ GWT Image Bundle bundles a bunch of image files into a single large
file and manages as a single Java Object

+ Since filename is based on the hash of the file's contents, the
filename will change only if the composite image is changed
▪ Hence, it is safe for clients to cache the composite image permanently,
which avoids the unnecessary freshness checks for unchanged images
▪ To make this work, the server configuration needs to specify that
composite images never expire.

37

+ To define an image bundle, the developer needs to extend the
ImageBundle interface
▪ The ImageBundle interface is a marker interface
▪ The derived interface can have zero or more methods, where each
method must have the following characteristics
– The method takes no parameters
– The method has a a return type of AbstractImagePrototype
– The method may have an optional gwt.resource metadata tag which
specifies the name of the image file in the module's classpath

+ If the gwt.resource metadata tag is not specified, then the following
assumptions are made
▪ The image filename is assumed to match the method name
▪ The extension is assumed to be either .png, .gif, or .jpg
▪ The file is assumed to be in the same package as the derived interface

38

public interface WordProcessorImageBundle extends ImageBundle {
/**
* Would match file 'new_file_icon.png', 'new_file_icon.gif', or
* 'new_file_icon.png' located in the same package as this type.
*/
public AbstractImagePrototype new_file_icon();

/**
* Would match the file 'open_file_icon.gif' located in the same
* package as this type.
* @gwt.resource open_file_icon.gif
*/
public AbstractImagePrototype openFileIcon();

/**
* Would match the file 'savefile.gif' located in the package
* 'com.mycompany.mygwtapp.icons', provided that this package is
* part of the module's classpath.
* @gwt.resource com/mycompany/mygwtapp/icons/savefile.gif
*/
public AbstractImagePrototype saveFileIcon();
39 }

+ Using Image bundle in the application
public void useImageBundle() {
WordProcessorImageBundle wpImageBundle =
(WordProcessorImageBundle)
GWT.create(WordProcessorImageBundle.class);
HorizontalPanel tbPanel = new HorizontalPanel();
tbPanel.add(wpImageBundle.new_file_icon().createImage());
tbPanel.add(wpImageBundle.openFileIcon().createImage());
tbPanel.add(wpImageBundle.saveFileIcon().createImage());
}

+ Image bundles are immutable, so you can keep a reference to a singleton
instance of an image bundle instead of creating a new instance every time
the image bundle is needed

40

History
+ Ajax apps sometimes fail to meet user's expectations because they
do not interact with the browser in the same way as static web pages
▪ Back button, forward button, bookmarking

+ The basic premise is to keep track of the application's quot;internal statequot;
in the url fragment identifier
+ For each page that is to be navigable in the history, the application
should generate a unique history token
+ For example, a history token named quot;page1quot; would be encoded in a
URL as follows
▪ http://www.example.com/com.example.gwt.HistoryExample/
HistoryExample.html#page1

41

History (Contd.)
+ When the application wants to push a placeholder onto the browser's
history stack, it simply invokes History.newItem(token)
+ When the user uses the back button, a callback will be passed to any
object that was added as a listener to History.addHistoryListener()
▪ It is up to the app to restore the state according to the value of the token
+ To use GWT History support, you must first embed an iframe into your
host HTML page
<iframe src=quot;javascript:''quot; id=quot;__gwt_historyFramequot;
style=quot;width:0;height:0;border:0quot;></iframe>

+ When the onHistoryChanged() method is invoked, your application must
handle two cases:
▪ The application was just started and was passed a history token.
▪ The application is already running and was passed a history token.

42

Internationalization and Configuration
+ GWT provides several techniques that can aid in Internationalization
and configuration of your AJAX application
+ GWT provides 2 mechanisms
▪ Static String inclusion at compile time
– Accomplished by GWT Constants interface which has pure messages
– Accomplished by GWT Messages interface which allows parameterization
▪ Dynamic String inclusion at run time
– Accomplished by GWT Dictionary class

+ Static Inclusion
public interface MySettings extends Constants {
String welcomeMessage();
String logoImage();
}
public interface MySettings extends Messages {
String welcomeMessage(String fname, String lname);
String logoImage();
}
43

Internationalization and Configuration (Contd.)
+ In the static approach, you define a default properties file of the format
Filename.properties where Filename is the static property interface
name such as MySettings.properties
+ For locale specific, you can also specific FileName_xx_YY.properties
file where xx would be ISO Language code and YY ISO country code
+ Referencing constants from a resource file
▪ MySettings mySettings =(MySettings)GWT.create(MySettings.class);
▪ Label newLabel = new Label(Constants.labelText());

+ Static initialization are advantageous because
▪ Properties are statically included in compiled JavaScript, hence the
performance is really good, same as hard coded string
▪ Compiler only includes properties that are refernces

+ Modules that use this interface should inherit com.google.gwt.i18n.I18N.
<inherits name=quot;com.google.gwt.i18n.I18Nquot;/>

44

Internationalization and Configuration (Contd.)
+ Dynamic String Inclusion for Internationalization
▪ Allows existing i18n apps to be quickly incorporated into GWT applications
▪ Helpful if existing apps used JavaScript associate array objects for i18n
var userInterfaceEN = { var userInterfaceSV {
hello: Hello, hello: Hejsan,
yes: Yes, yes: Ja,
no: No no: Nej
} }

+ Referencing constants from a resource file
Disctionary uiText = Dictionary.getDictionary(“userInterfaceSV”);
uiText.get(hello);

+ Advantage of Dynamic String initialization
▪ You can quickly incorporate existing i18n approach into the application

+ Disadvantage
▪ GWT provides no help whether constants you are referring to exist
▪ Compiler cannot perform any optimization
45

JavaScript Native Interface
+ GWT code is written in Java which gets translated into JavaScript, but
sometimes there is a need to make JavaScript calls
▪ May need to call browser’s API for which no GWT equivalent exists
▪ May want to use some super-cool JavaScript lib

+ JavaScript Native Interface lets you execute JavaScript from Java as
well as execute Java from JavaScript
+ Made possible because of the GWT compiler which can merge native
JavaScript code with the JavaScript code generated from Java
+ Calling JavaScript from java
public native int addTwoNumbers(int x, int y) {
/*-{
var result result = x+ y;return result;
}-*/;

46

JavaScript Native Interface (Contd.)
+ Calling JavaScript from java

public static native void alert(String msg) /*-{
$wnd.alert(msg);
}-*/

public static native int badExample() /*-{
throw(quot;Not A Number“);
}-*/;

public void onClick () {
try {
int myValue = badExample();
GWT.log(quot;Got value quot; + myValue, null);
} catch (Exception e) {
GWT.log(quot;JSNI method badExample() threw an exception:quot;, e);
}
}

47

JavaScript Native Interface (Contd.)
+ Accessing Java from JavaScript
▪ [instance-expr.]@class-name::[field-name|method-name{}]
▪ instance-expr could be this or blank for static
package mypackage;
public MyUtilityClass {
public static int calcLoanInterest(int amt, float intRate,
int term) { ... }
public static native void exportStaticMethod() /*-{
$wnd.computeLoanInterest =
@mypackage.MyUtilityClass::calcLoanInterest(IFI);
}-*/;
}

+ Writing JSNI methods is powerful idea, but should be used sparingly
▪ because writing bulletproof JavaScript code is tricky
▪ JSNI code is potentially less portable across browsers
▪ Less amenable to Java tools
Harder for the compiler to optimize
48

Packaging and Deploying a GWT Application
+ Output of the GWT compiler is purely static content
+ All one has to do is copy the GET generated content files from
www/<package>.<modulename> into WAR file folder

+ GWT generated files can be put anywhere in the war file as long as it
is URL accessible

+ But special steps have to be taken if the application uses GWT RPC
▪ Copy the gwt-servlet.jar from the GWT distribution to the WEB-
INF/lib folder
▪ Compile all server side classes which are classes under server and copy
them into WEB-INF/classes folder

49

JavaScript Obfuscation and Minimization
+ By default, GWT obfuscates the JavaScript it produces
+ Obfuscation done by the compiler partly
▪ To protect the intellectual property of the application you develop
▪ To reduce the size of the generated JavaScript files, thus making them faster to
download and parse

+ If you prefer not to have GWT obfuscate its output, then you can use
the quot;-stylequot; flag on the GWT Compile
▪ -style OBFUSCATED (small, efficient, and fast) – default style
▪ -style PRETTY (Human readable output)
▪ -style DETAILED (Similar to PRETTY with even more details – verbose
variable names etc.)
+ If you are curious about what GWT's generated JavaScript is doing,
then you can use quot;-style PRETTY“
+ On If you are debugging GWT's output, then quot;-style DETAILEDquot; might
be helpful

50

GWT and JUnit Integration
+ Best practice in software engineering is to write automated tests
+ JUnit is best of breed Java Test Framework
+ GWT has integrated with JUnit
+ In order to write a new Test case, yo write a class that inherits from
GWTTestCase which extends JUnit’s TestCase
+ You also need to implement one methods called
“getModuleName()” at a minimum and then any number of test
methods

51

Agenda

+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A

52

Summary
+ Paradigm shift in AJAX web development
+ Turn AJAX development into software engineering
+ Ph.D. in browser quirks is no longer a hiring pre requisite
+ Reusable UI components
+ Ease of development, debugging and maintenance
+ High performant
+ Developed, Backed by Google!

53

Agenda

+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A

54

Questions + Answers

55

Thank You

Karthik Shyamsunder

Building Rich Internet Applications Using Google Web Toolkit

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Building Rich Internet Applications Using Google Web Toolkit

Similar a Building Rich Internet Applications Using Google Web Toolkit (20)

Más de rajivmordani

Más de rajivmordani (20)

Último

Último (20)

Building Rich Internet Applications Using Google Web Toolkit