Google Web Toolkit
Presentation by Assoc.Prof. Dr.Thanachart Numnonda & Asst.Prof. Thanisa Kruawaisayawan, Mini Master of Java Technology KMITL, July 2012
4. Rich Internet Applications
Web applications that have the features and functionality of
traditional desktop applications
Typically transfer the processing necessary for the user
interface to the web client but keep the bulk of the data back o
n the application server.
Make asynchronous/synchronous calls to thebackend based
on user actions/events
Thick Client Application.
5. Technologies for Building RIAs
Key Technologies
–
Adobe Flex
–
Microsoft Silverlight
–
Java
Applets/WebStart
–
AJAX
Other Technologies and
Frameworks
–
Java FX
–
Open Laszlo
6. What is AJAX?
Asynchronous JavaScript And XML.
DHTML plus Asynchronous communication capability through
XMLHttpRequest.
Pros
Most viable RIA technology so far
Tremendous industry momentum
Several toolkits and frameworks are emerging
No need to download code & no plug-in required
Cons
Still browser incompatibility
JavaScript is hard to maintain and debug.
7. Why AJAX?
Intuitive and natural user interaction.
No clicking required
Mouse movement is a sufficient event trigger
Partial screen update replaces the "click, wait, and refresh"
user interaction model
Asynchronous communication replaces "synchronous request/
response model."
10. Building RIAs using Java EE and AJAX
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.
11. Building RIAs using Java EE and AJAX
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
12. Challenges with typical AJAX development
JavaScript
Not a strongly typed language
Static Type checking?
Code completion?
Runtime-only bugs
Browser compatibilities = “if/else soup”
Juggling multiple languages (JavaScript, JSP tags, Java, XML,
HTML etc.)
Poor debugging
Window.alert(), Firebug
15. What is GWT?
GWT is an open source Java development framework.
Provides set of tools for building AJAX apps in the
Java language.
GWT converts your Java source into equivalent
JavaScript
16. History of Web Frameworks
Source : COMPARING KICK-ASS WEB FRAMEWORKS, Matt Raible
17. Advantages of GWT
No need to learn/use JavaScript language
No need to handle browser incompatibilities and quirks
No need to learn/use DOM APIs
No need to handle forward/backward buttons browser-history
No need to build commonly used Widgets
Can send complex Java types to/from the server
Leverage various tools of Java programming language for
writing/debugging/testing
18. Disadvantages of GWT
Only for Java developers.
Big learning curve
Cumbersome deployment
Nonstandard approach to integrate JavaScript
Unusual approach
20. GWT Features
A Basic API for creating Graphical User Interfaces (GUI)
Similar to Swing.
API for Manipulating the Web browser's Document Object
Model (DOM).
Java to JavaScript Compiler.
Only required to know Java, XML and CSS. No JavaScript. No
HTML. No PHP/ASP/CGI.
An environment for running and debugging GWT applications
called the GWT shell (Hosted Mode).
21. GWT Application Layout
Module descriptor : module is the name GWT uses for an
individual application configuration.
Public resources : these are all files that will be served publicly
(e.g. HTML page, CSS and images)
Client-side code : this is the Java code that the GWT compiler
translates into JavaScript, which will eventually run inside the
browser.
Server-side code (optional)—this is the server part of your
GWT application
22. Module Descriptor
Inherited modules : these entries are comparable to import
statements in normal Java classes, but for GWT applications.
Entry point class : details which classes serve as the entry
points (class implements the EntryPoint interface)
Source path entries : the module descriptor allows you to
customize the location of the client-side code.
Public path entries : these allow you to handle public path
items such as source path entries.
Deferred binding rules : more advanced setting
24. The Entry Point Class
Before we start building our user interface, we need to
understand the Entry Point Class.
Think of this class as the main class of your application with
the java main() method that the JVM invokes first.
The Entry Point class contains onModuleLoad() method which
is the method that the GWT compiler calls first.
The class implements com.google.gwt.core.client.EntryPoint
interface.
25. UI Components & Event : Sample
public class ButtonExample implements EntryPoint {{
public class ButtonExample implements EntryPoint
public void onModuleLoad() {{
public void onModuleLoad()
final ToggleButton messageToggleButton == new ToggleButton("UP",
final ToggleButton messageToggleButton new ToggleButton("UP",
"DOWN");
"DOWN");
RootPanel.get().add(messageToggleButton);
RootPanel.get().add(messageToggleButton);
Hyperlink alertLink == new Hyperlink("Alert", "alert");
Hyperlink alertLink new Hyperlink("Alert", "alert");
alertLink.addClickListener(new ClickListener() {{
alertLink.addClickListener(new ClickListener()
public void onClick(Widget widget) {{
public void onClick(Widget widget)
if (messageToggleButton.isDown()) {{
if (messageToggleButton.isDown())
Window.alert("HELLLLP!!!!");
Window.alert("HELLLLP!!!!");
}} else {{
else
Window.alert("Take it easy and relax");
Window.alert("Take it easy and relax");
}}
}}
});
});
RootPanel.get().add(alertLink);
RootPanel.get().add(alertLink);
}}
}}
34. 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.
Events in GWT use the "listener interface" model similar to
other user interface frameworks (like Swing)
35. Entry Point Class : Sample
public class MainEntryPoint implements EntryPoint {
public class MainEntryPoint implements EntryPoint {
public void onModuleLoad() {{
public void onModuleLoad()
final Label label == new Label("Hello, GWT!!!");
final Label label new Label("Hello, GWT!!!");
final Button button == new Button("Click me!");
final Button button new Button("Click me!");
button.addClickHandler(new ClickHandler() {{
button.addClickHandler(new ClickHandler()
public void onClick(ClickEvent event) {{
public void onClick(ClickEvent event)
label.setVisible(!label.isVisible());
label.setVisible(!label.isVisible());
}}
});
});
RootPanel.get().add(button);
RootPanel.get().add(button);
RootPanel.get().add(label);
RootPanel.get().add(label);
}}
}}
36. Simple Layout Panels
Panels are used to organize the layout of the various widgets
we have covered so far.
GWT has several layout widgets that provide this functionality
The simple Layout Panels include:
FlowPanel
VerticalPanel
HorizontalPanel
37. FlowPanel
It functions like the HTML layout
Child widgets of the FlowPanel are displayed horizontally and
then wrapped to the next row down when there is not enough
horizontal room left:
FlowPanel flowPanel == new FlowPanel();
FlowPanel flowPanel new FlowPanel();
for( int ii == 1; ii <= 20; i++ )) {{
for( int 1; <= 20; i++
flowPanel.add(new Button("Button "" ++ String.valueOf(i)));
flowPanel.add(new Button("Button String.valueOf(i)));
}}
RootPanel.get().add(flowPanel);
RootPanel.get().add(flowPanel);
38. HorizontalPanel and VerticalPanel
HorizontalPanel is similar to FlowPanel but uses
scrollbar to display its widgets if there is no enough
room instead of displacing to the next row
VerticalPanel organizes its child widgets in a vertical
orientation
43. Communication with the Server
GWT support communication between the client-side browser
and the server via GWT-RPC and Basic Ajax.
GWT use asynchronous communication to provide the rich UI
experience expected from RIAs.
The details of communicating a message between client and
server and vice versa can be abstracted away by frameworks
GWT RPC allows you to program your communication by
calling a method on a Java interface.
44. GWT-RPC
GWT extends a browser’s capability to asynchronously
communicate with the server by providing a remote procedure
call (RPC) library.
Calls to the server are simplified by providing you with an
interface of methods that can be called similarly to regular
method calls.
GWT marshal the calls (convert to a stream of data) and send
to the remote server.
At the server side, the data, is un-marshalled the method on
the server is invoked
45. GWT-RPC
GWT uses a pure Java implementation.
In GWT, the RPC library is divided into two packages:
com.google.gwt.user.client.rpc package used for client-side RPC
support .
com.google.gwt.user.server.rpc package used for server-side RPC
support . The client side provides interfaces that you can use to tag.
When the client code is compiled to Javascript using the
GWT compiler, the code required to do the RPC marshaling will
be generated .
47. Implementing GWT-RPC Services
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.
48. A client-side Java interface
Create a client-side Java interface that extends the
RemoteService tag interface.
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteService;
public interface MyService extends RemoteService {{
public interface MyService extends RemoteService
public String myMethod(String s);
public String myMethod(String s);
}}
49. Implement the remote method
Implement the service on the server-side by a class that
extend RemoteServiceServlet.
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.example.client.MyService;
import com.example.client.MyService;
public class MyServiceImpl extends RemoteServiceServlet implements
public class MyServiceImpl extends RemoteServiceServlet implements
MyService {{
MyService
public String myMethod(String s) {{
public String myMethod(String s)
// Do something interesting with 's' here on the server.
// Do something interesting with 's' here on the server.
return s;
return s;
}}
50. Asynchronous Interfaces
This interface defines the callback method that will be called
when the server generates a response.
interface MyServiceAsync {{
interface MyServiceAsync
public void myMethod(String s, AsyncCallback<String> callback);
public void myMethod(String s, AsyncCallback<String> callback);
}}
}}
51. Making an RPC from the client
Instantiate the service interface using GWT.create().
Create an asynchronous callback object to be notified when
the RPC has completed.
Make the call .
52. Making a Call: Sample
public class MainEntryPoint implements EntryPoint {{
public class MainEntryPoint implements EntryPoint
public MainEntryPoint() {{
public MainEntryPoint()
}}
public void onModuleLoad() {{
public void onModuleLoad()
getService().myMethod("Hello World", callback);
getService().myMethod("Hello World", callback);
}}
final AsyncCallback callback == new AsyncCallback() {{
final AsyncCallback callback new AsyncCallback()
public void onSuccess(Object result) {{
public void onSuccess(Object result)
Window.alert((String)result);
Window.alert((String)result);
}}
public void onFailure(Throwable caught) {{
public void onFailure(Throwable caught)
Window.alert("Communication failed");
Window.alert("Communication failed");
}}
};
};
53. Making a Call: Sample (Cont.)
public static MyServiceAsync getService(){
public static MyServiceAsync getService(){
MyServiceAsync service == (MyServiceAsync)
MyServiceAsync service (MyServiceAsync)
GWT.create(MyService.class);
GWT.create(MyService.class);
ServiceDefTarget endpoint == (ServiceDefTarget) service;
ServiceDefTarget endpoint (ServiceDefTarget) service;
String moduleRelativeURL == GWT.getModuleBaseURL() ++ "myservice";
String moduleRelativeURL GWT.getModuleBaseURL() "myservice";
endpoint.setServiceEntryPoint(moduleRelativeURL);
endpoint.setServiceEntryPoint(moduleRelativeURL);
return service;
return service;
}}
}}
54. Resources
Building Rich Internet Applications Using Google Web Toolkit
(GWT), Karthik Shyamsunder, Oct 2008.
Introduction to Google Web Toolkit, Muhammad Ghazali.
Official Google Web Tool Kit Tutorial,
http://code.google.com/webtoolkit/doc/latest/tutorial/
Beginning Google Web Toolkit from Novice to Professional,
Apress, 2009
55. Thank you
thananum@gmail.com
twitter.com/thanachart
www.facebook.com/thanachart
www.thaijavadev.com