Introduction to Google Web Toolkit

IntroGWTRPC

Demo

GWTThe Google Web Toolkit

Jeppe R. [email protected]

Aalborg UniversityDepartment of Computer Science

October 6, 2009

Jeppe GWT - SW7 1/22

IntroGWTRPC

Demo

GWTMotivationApplication AreasResources

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”


IntroGWTRPC

Demo


What is GWT - The Google Web Toolkit

It is among other things:

An AJAX framework

A Widget library

A Java-to-Javascript compiler


IntroGWTRPC

Demo


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 userprofile

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 efficiently

Test your code with JUnit


IntroGWTRPC

Demo


Application

GWT is, unlike many other AJAX frameworks, aimed at bothwebpage- and webapplication- development.

The Javascript code is compiled to minimal size

The Javascript has any unreachable code purged at compiletime

Highly versatile and combinable UI widgets.

Java source language makes it realistic to do actualapplication development in Javascript


IntroGWTRPC

Demo


Pros and Cons

Where to use it.

Webpages which needs to react to user actions immediatelyAnywhere you would want some dynamic content on yourwebpage

Where Not to use it.

Purely Static (informational) pages which does not change orupdate often.Anywhere it would be assumed users have disabled Javascript


IntroGWTRPC

Demo


GWT Resources

Download GWThttp://code.google.com/webtoolkit/

Widgets Demohttp://gwt.google.com/samples/KitchenSink/KitchenSink.html

Official Librarieshttp://code.google.com/webtoolkit/googleapilibraries.html


IntroGWTRPC

Demo

Code-, Debug-, Run JavaDeploy JavascriptDemoWidgets & 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 gwtlibraries

java.lang

java.lang.annotation

java.util

java.io

java.sql


IntroGWTRPC

Demo


Reference - libraries 1/3

com.google.gwt.i18n.client.DateTimeFormatReplacement for the java.util.DateTime- Format class innormal Java. This replacement only supports a subset of thenormal Java version.

com.google.gwt.i18n.client.NumberFormatThe same kind of replacement, but then for thejava.util.NumberFormat, again providing only a subset of itsfeatures.

com.google.gwt.user.client.TimerA simplified, browser-safe timer class that can be used tomimic a threaded environment, and which allows you toschedule tasks and actions. Its a simplified version of thejava.util.Timer class.


IntroGWTRPC

Demo



java.langArithmeticException ArrayIndexOutOfBoundsException ArrayStoreException AssertionErrorBoolean Byte CharSequence Character Class ClassCastException Cloneable ComparableDeprecated Double Enum Error Exception Float IllegalArgumentException IllegalStateExceptionIndexOutOfBoundsException Integer Iterable Long Math NegativeArraySizeExceptionNullPointerException Number NumberFormatException Object Override RunnableRuntimeException Short StackTraceElement String StringBuffer StringBuilderStringIndexOutOfBoundsException SuppressWarnings System ThrowableUnsupportedOperationException Void

java.lang.annotationAnnotation AnnotationFormatError AnnotationTypeMismatchException Documented ElementTypeIncompleteAnnotationException Inherited Retention RetentionPolicy Target


IntroGWTRPC

Demo



java.utilAbstractCollection AbstractList AbstractMap AbstractQueue AbstractSequentialList AbstractSetArrayList Arrays Collection Collections Comparator ConcurrentModificationException DateEmptyStackException EnumMap EnumSet Enumeration EventListener EventObject HashMapHashSet IdentityHashMap Iterator LinkedHashMap LinkedHashSet LinkedList List ListIterator MapMap.Entry MissingResourceException NoSuchElementException PriorityQueue QueueRandomAccess Set SortedMap SortedSet Stack TooManyListenersException TreeMap TreeSetVector

java.ioFilterOutputStream OutputStream PrintStream Serializable

java.sqlDate Time Timestamp


IntroGWTRPC

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 [email protected]::instanceFoo(Ljava/lang/String;)(s);

// Call instance method instanceFoo() on [email protected]::instanceFoo(Ljava/lang/String;)(s);

// Read static field (no qualifier)@com.google.gwt.examples.JSNIExample::myStaticField = val + ” and stuff”;}-*/;

}


IntroGWTRPC

Demo


Debug the Java code

Use hosted mode while developing. Only compile to JavaScriptwhen done.

Debug Java code as you normally would

Code runs as bytecode and served using an internal Jettyinstance

Most times changes are immediately visible by just refreshingthe integrated browser instead of relaunching hosted mode

Use GWT.log() to log user behavior and exceptions.


IntroGWTRPC

Demo


Run the Java code

Compile to JavaScript when done developing the application

Java code compiled to 6(7) permutations of JavaSript toensure optimal performance in most versions of majorbrowsers

IEFirefoxSafariOpera

Size of JavaScript code minimal.


IntroGWTRPC

Demo


Deploy the Javascript

Specify one or more <div> elements in a .html file

JavaScript will use them to hook bits of GWT functionalityinto 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);

}


IntroGWTRPC

Demo


Demo

Ask if you want somethingspecific demonstrated.


IntroGWTRPC

Demo


Basic Widgets

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


IntroGWTRPC

Demo


Combining Widgets

All widgets can be combined and extended

support ease of use

allow reusing advanced and specialized widgets which stillcompile to efficient JavaScript

Many advance widget libraries already exist (e.g. SmartGWT)


IntroGWTRPC

Demo

MotivationPlumbingServer Communication

RPC

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

Super easy development. All the proxy classes that handleRPC are generated automatically. All you need to do is defineyour service’s interface and its server-side implementations.

GWT client serialization allows client JavaScript to interactwith Java classes on the server


IntroGWTRPC

Demo


Plumbing


IntroGWTRPC

Demo


Server Communication

Creating Services - Three steps

Define the service’s synchronous and asynchronousinterfaces

Implement the service

Call the service

Exception Handling


IntroGWTRPC

Demo

RPC example

Demo

RPC Demonstration


Technology

Introduction to Google Web Toolkit