Introduction to Google Web Toolkit

Intro
GWT
RPC
Demo

GWT
The Google Web Toolkit

Jeppe R. Thomsen
jenslyn@cs.aau.dk

Aalborg University
Department of Computer Science

October 6, 2009

Jeppe GWT - SW7 1/22

Intro GWT
GWT Motivation
RPC Application Areas
Demo Resources

The Presentation
Not the usual slide style
More text - less code
Interrupt if you are bored, and ask me something instead
E.g. ”You are boring, show me how to code X”


Intro GWT
GWT Motivation
Demo Resources

What is GWT - The Google Web Toolkit

It is among other things:
An AJAX framework
A Widget library
A Java-to-Javascript compiler


Intro GWT
GWT Motivation
Demo Resources

Motivation for using it
Communicate with your server through really simple RPC
Using e.g. JSON and XML
Optimize the JavaScript script downloads based on user
proﬁle
Using Deferred binding
Reuse UI components across projects
Use other JavaScript libraries and native JavaScript code
Mix handwritten JavaScript in your Java code (JSNI)
Easily support the browser’s back button and history
adding state to the browser’s back button history
Localize applications eﬃciently
Test your code with JUnit


Intro GWT
GWT Motivation
Demo Resources

Application

GWT is, unlike many other AJAX frameworks, aimed at both
webpage- and webapplication- development.
The Javascript code is compiled to minimal size
The Javascript has any unreachable code purged at compile
time
Highly versatile and combinable UI widgets.
Java source language makes it realistic to do actual
application development in Javascript


Intro GWT
GWT Motivation
Demo Resources

Pros and Cons
Where to use it.
Webpages which needs to react to user actions immediately
Anywhere you would want some dynamic content on your
webpage
Where Not to use it.
Purely Static (informational) pages which does not change or
update often.
Anywhere it would be assumed users have disabled Javascript


Intro GWT
GWT Motivation
Demo Resources

GWT Resources

Download GWT
http://code.google.com/webtoolkit/
Widgets Demo
http://gwt.google.com/samples/KitchenSink/KitchenSink.html
Oﬃcial Libraries
http://code.google.com/webtoolkit/googleapilibraries.html


Intro Code-, Debug-, Run Java
GWT Deploy Javascript
RPC Demo
Demo Widgets & Panels

Develop in Java

Use your favorite IDE
Eclipse 3.5
NetBeans 6.7
IDEA 8.1
IntelliJ 7+
Some standard libraries are emulated, others replaced by gwt
libraries
java.lang
java.lang.annotation
java.util
java.io
java.sql

RPC Demo

Reference - libraries 1/3

com.google.gwt.i18n.client.DateTimeFormat
Replacement for the java.util.DateTime- Format class in
normal Java. This replacement only supports a subset of the
normal Java version.
com.google.gwt.i18n.client.NumberFormat
The same kind of replacement, but then for the
java.util.NumberFormat, again providing only a subset of its
features.
com.google.gwt.user.client.Timer
A simpliﬁed, browser-safe timer class that can be used to
mimic a threaded environment, and which allows you to
schedule tasks and actions. Its a simpliﬁed version of the
java.util.Timer class.


RPC Demo

java.lang
ArithmeticException ArrayIndexOutOfBoundsException ArrayStoreException AssertionError
Boolean Byte CharSequence Character Class ClassCastException Cloneable Comparable
Deprecated Double Enum Error Exception Float IllegalArgumentException IllegalStateException
IndexOutOfBoundsException Integer Iterable Long Math NegativeArraySizeException
NullPointerException Number NumberFormatException Object Override Runnable
RuntimeException Short StackTraceElement String StringBuﬀer StringBuilder
StringIndexOutOfBoundsException SuppressWarnings System Throwable
UnsupportedOperationException Void

java.lang.annotation
Annotation AnnotationFormatError AnnotationTypeMismatchException Documented ElementType
IncompleteAnnotationException Inherited Retention RetentionPolicy Target


RPC Demo

java.util
AbstractCollection AbstractList AbstractMap AbstractQueue AbstractSequentialList AbstractSet
ArrayList Arrays Collection Collections Comparator ConcurrentModiﬁcationException Date
EmptyStackException EnumMap EnumSet Enumeration EventListener EventObject HashMap
HashSet IdentityHashMap Iterator LinkedHashMap LinkedHashSet LinkedList List ListIterator Map
Map.Entry MissingResourceException NoSuchElementException PriorityQueue Queue
RandomAccess Set SortedMap SortedSet Stack TooManyListenersException TreeMap TreeSet
Vector

java.io
FilterOutputStream OutputStream PrintStream Serializable

java.sql
Date Time Timestamp


RPC Demo

Coding

Modify the DOM
JSNI - The JavaScript Native Interface
public class JSNIExample {
static int myStaticField;
void instanceFoo(String s) { }
public native void bar(JSNIExample x, String s) /*-{
// Call instance method instanceFoo() on this
this.@com.google.gwt.examples.JSNIExample::instanceFoo(Ljava/lang/String;)(s);
// Call instance method instanceFoo() on x
x.@com.google.gwt.examples.JSNIExample::instanceFoo(Ljava/lang/String;)(s);
// Read static field (no qualifier)
@com.google.gwt.examples.JSNIExample::myStaticField = val + ” and stuff”;
}-*/;
}


RPC Demo

Debug the Java code

Use hosted mode while developing. Only compile to JavaScript
when done.
Debug Java code as you normally would
Code runs as bytecode and served using an internal Jetty
instance
Most times changes are immediately visible by just refreshing
the integrated browser instead of relaunching hosted mode
Use GWT.log() to log user behavior and exceptions.


RPC Demo

Run the Java code

Compile to JavaScript when done developing the application
Java code compiled to 6(7) permutations of JavaSript to
ensure optimal performance in most versions of major
browsers
IE
Firefox
Safari
Opera
Size of JavaScript code minimal.


RPC Demo

Deploy the Javascript
Specify one or more <div> elements in a .html file
JavaScript will use them to hook bits of GWT functionality
into the existing page
Initial script will detect browser vendor and version
only download relevant permutation of JavaScript

public void onModuleLoad() {
final Button sendButton = new Button(”Send”);
final TextBox nameField = new TextBox();
nameField.setText(”GWT User”);
sendButton.addStyleName(”sendButton”);
RootPanel.get(”nameFieldContainer”).add(nameField);
RootPanel.get(”sendButtonContainer”).add(sendButton);
}


RPC Demo

Demo

Ask if you want something
speciﬁc demonstrated.


RPC Demo

Basic Widgets

http://code.google.com/webtoolkit/doc/1.6/RefWidgetGallery.html
http://gwt.google.com/samples/Showcase/Showcase.html


RPC Demo

Combining Widgets

All widgets can be combined and extended
support ease of use
allow reusing advanced and specialized widgets which still
compile to eﬃcient JavaScript
Many advance widget libraries already exist (e.g. SmartGWT)


Intro
Motivation
GWT
Plumbing
RPC
Server Communication
Demo

RPC

Allows a GWT client to make a call to server-side code

Super easy development. All the proxy classes that handle
RPC are generated automatically. All you need to do is deﬁne
your service’s interface and its server-side implementations.

GWT client serialization allows client JavaScript to interact
with Java classes on the server


Intro
Motivation
GWT
Plumbing
RPC
Demo

Plumbing


Intro
Motivation
GWT
Plumbing
RPC
Demo


Creating Services - Three steps

Deﬁne the service’s synchronous and asynchronous
interfaces
Implement the service
Call the service

Exception Handling


Intro
GWT
RPC example
RPC
Demo

Demo

RPC Demonstration


Introduction to Google Web Toolkit

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Ähnlich wie Introduction to Google Web Toolkit

Ähnlich wie Introduction to Google Web Toolkit (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to Google Web Toolkit