Google Web Toolkit

Google Web Toolkit

What is GWT? • GWT is a development toolkit for building and optimizing complex Ajax applications • Goal is to enable productive development of high-performance web applications without the developer having to be an expert in • browser quirks • XMLHttpRequest • JavaScript

GWT versions • GWT 1.0 May 17, 2006 • Google announced GWT at the JavaOne conference, 2006 • GWT 1.1 August 11, 2006 • GWT 1.2 November 16, 2006 • … • GWT 1.6 April 07, 2009 • GWT 1.7 July 13, 2009 • GWT 2.0 December 08, 2009 • Current version: GWT 2.5.1(March 8, 2013)

GWT Overview • GWT allows to develop and debug Ajax applications in Java and then compile the source to highly optimized JavaScript that runs across all browsers • During development - iterate quickly in the same "edit - refresh - view" cycle you're accustomed to with JavaScript • During deployment - the GWT compiler compiles Java source code into optimized, standalone JavaScript files

Why Use Java for Ajax Development? • Static type checking in the Java language allows to increase productivity and reduce errors • Common JavaScript errors (typos, type mismatches) are caught at compile time rather than by users at runtime • Java-based OO designs are easier to communicate and understand, thus making Ajax code base more comprehensible • IDE support • Code prompting/completion • Automated refactoring • And other good stuff

Interesting things about GWT • The GWT SDK provides a core set of Java APIs and libraries • In the end, it's just JavaScript • Don't worry about XMLHttpRequest • GWT can handle all of the client-server communications for you • Optimized JavaScript script downloads based on user profile • E.g. Firefox browser displaying an application in French doesn't need to download extra code for other browsers or languages

Interesting things about GWT • No need to build commonly used Widgets • Most of them come with GWT • Reuse UI components across projects • Create reusable Widgets, package it up in a JAR file for others to use • Use other JavaScript libraries and native JavaScript code • You can write individual JavaScript methods directly in your Java source files

Interesting things about GWT • Easily support the browser's back button and history • Internationalization • Testing with JUnit • GWT is directly integrated with JUnit. You can even unit test asynchronous RPCs. • Free and open source

Two Modes of Running GWT App • Development Mode • GWT application run and can be debugged within JVM in a regular browser with the support of the Google Web Toolkit Developer Plugin • Uses a special engine to run your app as a mix of both Java bytecode and native JavaScript • Production Mode • GWT application is run as pure JavaScript and HTML, compiled from original Java

Plugin for Eclipse • The plugin currently supports Google Web Toolkit and Google App Engine development • New Web Application Wizard • Web Application Launch Configurations • Development Mode View • Recognition of inline JavaScript (JSNI) • Wizards to create entry points, modules and HTML pages • Support for GWT JUnit tests http://code.google.com/eclipse/index.html

Samples • Several samples are included in the GWT SDK • We will take a look to GWT Showcase sample • A showcase of GWT features with accompanying source code and CSS styles • GWT features used: • UI widgets • Internationalization

Getting SDK and Showcase sample • Download GWT SDK from (100 Mb) http://www.gwtproject.org/download.html • Unzip somewhere on disk • \gwt-2.5.1\doc - Javadocs • \gwt-2.5.1\samples – Sample projects • Go to \gwt-2.5.1\samples\Showcase • Read README.txt and follow instructions

Creating a new GWT app in Eclipse • Detailed instructions on GWT web page: http://www.gwtproject.org/usingeclipse.html • StockWatcher application: http://www.gwtproject.org/doc/latest/tutorial/create.html

Notable generated artifacts • Package /src/com/google/gwt/sample/stockwatcher • GWT module definition and initial application files • Directory /war • Static resources that can be served publicly (images, style sheets, HTML host pages) • StockWatcher.gwt.xml • GWT module definition • StockWatcher.html • host page

Notable generated artifacts • StockWatcher.css • application style sheet • StockWatcher.java • GWT entry point class • GreetingService.java, GreetingServiceAsync.java, GreetingServiceImpl.java • GWT sample RPC classes • gwt-servlet.jar • GWT server runtime library

The GWT modules • Individual units of GWT configuration are called modules • Modules are defined in XML, which contains the collection of resources that comprise a GWT application • inherited modules • an entry point application class name • source path entries • public path entries • deferred binding rules

StockWatcher.gwt.xml <?xml version="1.0" encoding="UTF-8"?> <module rename-to='stockwatcher'>  <inherits name='com.google.gwt.user.User'/>  <inherits name='com.google.gwt.user.theme.standard.Standard'/>  <entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/>  <source path='client'/> </module>

Which GWT modules to inherit ? • The standard GWT modules contain big pieces of functionality designed to work independently of each other • Standard Modules:

Which GWT modules to inherit ? • Themes • To inherit a module, edit your project's module XML file and specify the logical name of the module you want to inherit <inherits name="com.google.gwt.junit.JUnit"/>

Entry-Point Classes • Are optional, although any module referred to in HTML must have at least one entry-point class specified • A module entry-point is any class that is assignable to EntryPoint and that can be constructed without parameters • When a module is loaded, every entry point class is instantiated and its EntryPoint.onModuleLoad() method gets called

Source Path • Specify which subpackages contain translatable source • Only files found on the source path are candidates to be translated into JavaScript • The default source path is the client subpackage underneath where the Module XML File is stored <source path='client'/>

Public Path • The public path is the place in your project where static resources referenced by your GWT module, such as CSS or images, are stored • When referencing public resources in client code, you should construct the URL like this: GWT.getModuleBaseURL() + "resourceName.png“ • The default public path is the public subdirectory underneath where the Module XML File is stored

The HTML Host Page • In order to run the module, it must be loaded from a web page of some sort • Any HTML page can include a GWT application via a SCRIPT tag • A typical HTML host page might not include any visible HTML body content at all • It is also possible to allow the GWT module to selectively insert widgets into specific places in an HTML page

Sample Host Page <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="StockWatcher.css"> <title>Web Application Starter Project</title>  <script language="javascript” src="stockwatcher/stockwatcher.nocache.js"> </script> </head> <body>  <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> <div id="application"></div> </body> </html>

Preserving Browser History • GWT provides a mechanism supporting user's ability to use the browser's back button in such situations as a multi-page wizard or a shopping cart/checkout scenario • The host page contains the <iframe> tag necessary for incorporating history support in your GWT application

Standard Directory and Package Layout • GWT projects are overlaid onto Java packages such that most of the configuration can be inferred from the classpath and the module definitions

More about Compile & Debug • In development mode you are interacting with GWT application without it having been translated into JavaScript • The JVM is actually executing the application code as compiled Java bytecode, using GWT plumbing to connect to a browser window • This allows to remain in traditional "code-test-debug" cycle

Development mode session http://www.gwtproject.org/doc/latest/DevGuideCompilingAndDebugging.html

More about Compile & Debug • You do not need to restart development mode after modifying source code • On refresh, your code is recompiled with the changes and the new version is loaded into the browser • If you have made configuration or code changes to server side code, use the Restart Server button in the Jetty tab • All server side classes will be reloaded from scratch with fresh code

Understanding the GWT Compiler • The heart of GWT is a compiler that converts Java source into JavaScript • supports the vast majority of the Java language • The GWT runtime library emulates a relevant subset of the Java runtime library • supports most of the core Java language syntax and semantics • supports only a small subset of the classes available in the Java Standard and EE libraries • java.lang, java.lang.annotation, java.util, java.io, java.sql

Coding Basics - Client-side code • When you write client-side code that is intended to run in the web browser, remember that it ultimately becomes JavaScript • To begin writing a GWT module, subclass the EntryPoint class public class Foo implements EntryPoint {// This is the entry point method. Initialize you GWT module here. public void onModuleLoad() {// Writes Hello World to the module log window. GWT.log("Hello World!", null); }}

Writing the entry point method • The entry point method is onModuleLoad() • Typical things to do in the onModuleLoad() method are: • create new user interface components • set up handlers for events • modify the browser DOM in some way

Another example of EntryPoint public class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Hello, AJAX"); } }); RootPanel.get().add(b); }}

Building User Interfaces • GWT UI classes are similar to those in existing UI frameworks such as Swing, except that the widgets are rendered using dynamically-created HTML rather than pixel-oriented graphics • While it is possible to manipulate the browser's DOM directly using the DOM interface, it is far easier to use Java classes from the Widget hierarchy • make it easier to quickly build interfaces that will work correctly on all browsers

Panels • Panels contain widgets and other panels • Panels are used to define the layout of the user interface in the browser • Basic Panels • RootPanel, FlowPanel, HTMLPanel, FormPanel, ScrollPanel, PopupPanel... • Layout Panels • RootLayoutPanel, DockLayoutPanel, SplitLayoutPanel, StackLayoutPanel, TabLayoutPanel...

Example: StackLayoutPanel StackLayoutPanel p = new StackLayoutPanel(Unit.EM);p.add(new HTML("this content"), new HTML("this"), 4);p.add(new HTML("that content"), new HTML("that"), 4);p.add(new HTML("the other content"), new HTML("the other"), 4);

Example: TabLayoutPanel TabLayoutPanel p = new TabLayoutPanel(1.5, Unit.EM);p.add(new HTML("this content"), "this");p.add(new HTML("that content"), "that");p.add(new HTML("the other content"), "the other");

Widgets • You construct user interfaces in GWT applications using widgets that are contained within panels • You are not limited to the set of widgets provided by GWT. There are a number of ways to create custom widgets: • You can bundle together existing widgets and create a Composite widget • You can write GWT bindings to an existing JavaScript widget • You can create your own widget from scratch using either Java or JavaScript

Building Composites • A composite is a specialized widget that can contain another component, but behaves as if it were its contained widget • Rather than create complex widgets by subclassing Panel or another Widget type, it's better to create a new composite http://www.gwtproject.org/doc/latest/DevGuideUiCustomWidgets.html

Accessing the Browser's DOM • Sometimes you need to access the DOM, for example to: • provide a feature in your user interface that GWT does not support • write a new Widget class • access an HTML element defined directly in the host page • handle browser Events at a low level • perform some filtering or other processing on an HTML document loaded into the browser

Accessing the Browser's DOM • GWT provides the classes in the com.google.gwt.dom.client package for interacting with the DOM directly • Set a style attribute to change a widget's background color: private HTML htmlWidget; // Other code to instantiate the widget... // Change the description background color. htmlWidget.getElement().getStyle().setBackgroundColor("#ffee80"); The getElement() method returns a DOM Element Object representing a node in the DOM tree structure

Event Handlers • A handler interface defines methods that the widget calls to announce an event • A class wishing to receive events of a particular type • implements the associated handler interface • passes a reference to itself to the widget to subscribe to a set of events • The Button class, for example, publishes click events • The associated handler interface is ClickHandler

Example of Event Listener public class HandlerExample extends Composite implements ClickHandler { private FlowPanel fp = new FlowPanel(); private Button b1 = new Button("Button 1"); private Button b2 = new Button("Button 2"); public HandlerExample() { initWidget(fp); fp.add(b1); fp.add(b2); b1.addClickHandler(this); b2.addClickHandler(this); } public void onClick(ClickEvent event) { // note that in general, events can have sources that are not Widgets. Widget sender = (Widget) event.getSource(); if (sender == b1) { // handle b1 being clicked } else if (sender == b2) { // handle b2 being clicked } } }

Communicate with a Server • GWT provides a couple of different ways to communicate with a server via HTTP • use the GWT RPC (remote procedure call) framework that transparently makes calls to Java servlets • use the GWT's HTTP client classes to build and send custom HTTP requests

Remote Procedure Calls • Mechanism for interacting with the server by invoking a method • For example: for fetching data from the server • Makes it easy for the client and server to pass Java objects back and forth over HTTP • Marshaling/unmarshaling of Java objects are handled by the GWT • When used properly, RPCs give you the opportunity to move all of your UI logic to the client (leaving business logic on the server) • Could result in greatly improved performance, reduced bandwidth, reduced web server load, and a pleasantly fluid user experience

RPC Plumbing Diagram

Creating RPC Services • In order to define your RPC interface, you need to: • Define an interface for your service that extends RemoteService and lists all your RPC methods • Define a class to implement the server-side code that extends RemoteServiceServlet and implements the interface you created above • Define an asynchronous interface to your service to be called from the client-side code

Synchronous Interface & Implementation • Synchronous interface • Implementation @RemoteServiceRelativePath("greet") public interface GreetingService extends RemoteService { public String greetServer(String name); } public class GreetingServiceImpl extends RemoteServiceServlet implements GreetingService { public String greetServer(String name) { return "Hello, " + input + "!<br>; } } Every service implementation is ultimately a servlet

Asynchronous interface • It is not possible to call this version of the RPC directly from the client • You must create an asynchronous interface to all your services • Has to be named as <Sync-interface>Async • Has to pass AsyncCallback object as the last parameter that can be notified when a call completes • The return type is always void public interface GreetingServiceAsync { public void greetServer (String input, AsyncCallback<String> callback); }

Service configuration • To automatically load service implementation, configure servlet in web.xml <servlet> <servlet-name>greetServlet</servlet-name> <servlet-class> com.google....server.GreetingServiceImpl </servlet-class> </servlet> <servlet-mapping> <servlet-name>greetServlet</servlet-name> <url-pattern>/stockwatcher/greet</url-pattern> </servlet-mapping>

Google Web Toolkit