Google Web Toolkit

Transcript Google Web Toolkit

Google Web Toolkit
By
Sri Lakshmi Ramya Sreedharan
Agenda for today

GWT Features

GWT Client Application with Eclipse

RPC

Advantages
Why GWT?

Writing dynamic web applications is tedious

Subtle incompatibilities between web
browsers and platforms

JavaScript's lack of modularity
What is GWT?

Open source Java software development framework
that makes writing AJAX applications like Google
Maps and Gmail easy

Has a Java-to-JavaScript compiler and a special
web browser that helps you debug your GWT
applications.

Developers can design the UI and event model
using familiar Java techniques
Features

Communicate between the client and server using Java objects.

Unlike traditional HTML web applications, GWT applications do
not need to fetch new HTML pages as they execute, they do in
fact need to get data from the server. This mechanism is better
known as Remote Procedure Call (RPC) and enables interaction
with the server across a network.

GWT is a compiler that converts the Java code into JavaScript code
that is then inserted into the HTML page and used to run the client
side of your application.

Frees you from the details of supporting JavaScript code on multiple
browsers.
How to use GWT?

Write client-side code using the usual core
Java classes + GWT classes.

Additional bunch of Java classes for adding
widgets to the page, from simple buttons to
complex drop-down menus and trees.

All of these widgets offer events and write
Java code to respond to them.
How to use GWT? (contd.)

To test on a browser, compile classes in a
Java IDE and launch the GWT Shell, which
pops up a specialized browser window and
loads the application.

Allows application’s client-side logic to run
within the browser even though it is
implemented in Java, not JavaScript.
GWT Architecture
GWT Components




A set of standard UI widgets compatible with major
browsers.
An event mechanism for catching and responding to
events completely on the client side.
A framework for managing the asynchronous calls
between your Web application and the server.
A mechanism for creating stateful browser history.
Installing GWT

http://code.google.com/webtoolkit/gettingstart
ed.html#Install
Downloadables


Extract it, and then place the resulting
directory
Three .jar files:
gwt-user.jar
 gwt-dev-windows.jar or gwt-dev-linux.jar.
 gwt-servlet.jar
Three command-line utilities: applicationCreator,
junitCreator, and projectCreator.


A directory of sample code.
A Sample Project

Replica of the UI of an email application.
GWT with Eclipse

projectCreator -eclipse MyProject
This command creates a new src subdirectory and
new .project and .classpath files

applicationCreator -eclipse MyProject
com.mycompany.client.MyApplication
The -eclipse MyProject argument is the name of the
Eclipse project and must be the same as what you
used in projectCreator. The final argument is the fully
qualified class name of what will be your application's
main class.
GWT with Eclipse(contd.)
GWT with Eclipse(contd.)
MyApplication.gwt.xml

<module>


-->
MyApplication.html





























<html>
<head>
<title>Wrapper HTML for MyApplication</title>
<style>
body,td,a,div,.p{font-family:arial,sans-serif}
div,td{color:#000000}
a:link,.w,.w a:link{color:#0000cc}
a:visited{color:#551a8b}
a:active{color:#ff0000}
</style>
<meta name='gwt:module' content='com.mycompany.MyApplication'>
</head>
<body>
<script language="javascript" src="gwt.js"></script>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
<h1>MyApplication</h1>
<p>
This is an example of a host page for the MyApplication application.
You can attach a Web Toolkit module to any HTML page you like,
making it easy to add bits of AJAX functionality to existing pages
without starting from scratch.
</p>
<table align=center>
<tr>
<td id="slot1"></td><td id="slot2"></td>
</tr>
</table>
</body>
</html>
Java Startup class

package com.mycompany.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class MyApplication implements EntryPoint {










public void onModuleLoad() {
final Button button = new Button("Click me");
final Label label = new Label();
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
if (label.getText().equals(""))
label.setText("Hello World!");
else
label.setText("");
}
});
RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);










}


}
Run MyProject

Hosted mode



GWT application is implemented as a pure Java
application running within a single JVM.
Provides a simple web server like component (the
GWT Development shell) and special web
browser.
Web mode

full deployment mode; it's what you would use
after you compile your GWT program to
JavaScript code
Invoke Hosted Mode
Google Web Toolkit Development
Shell / Port 8888
Simulated Browser
Hosted Mode Simulated
Browser
Customizing your application



Widgets and panels are client-side Java
classes used to build user interfaces .
Widgets are rendered using dynamicallycreated HTML rather than pixel-oriented
graphics.
Create a variety of custom widgets http://code.google.com/webtoolkit/documenta
tion/com.google.gwt.doc.DeveloperGuide.Us
erInterface.CreatingCustomWidgets.html
Project Structure

it’s mandatory that you define a global package for your application. The
last part of the package name must be the name of the application (such
as global.package.yourApplicationName).

The XML file describing your application must be found at the root of this
global package.

In addition, you must create three sub-packages:



“client”, which contains the Java code of the client side
“server”, which contains the Java code of the server side
“public”, which contains the HTML pages, CSS, and images of your
application
Server Side Application



Data exchange between the client and the
server using RPC-The mechanism for
interacting with a server across a network .
The server-side code that gets invoked from
the client is often referred to as a service,
so the act of making a remote procedure call
is sometimes referred to as invoking a
service.
Data exchange between client
and server
com.google.gwt.user.client.rpc: Classes used in
client-side implementation of remote
procedure calls.
com.google.gwt.user.server.rpc: Classes used
in server-side implementation of remote
procedure calls.
Visit
http://code.google.com/webtoolkit/documenta
tion/gwt.html
RPC architecture
RPC Example(contd)
Suppose you want to call a method on a
service interface defined as follows:
public interface MyEmailService extends
RemoteService { void emptyMyInbox(String
username, String password); }
RPC Example(contd)
Its corresponding asynchronous interface will
look like this:
public interface MyEmailServiceAsync { void
emptyMyInbox(String username, String
password, AsyncCallback callback); }
The client-side call will look like this
















public void menuCommandEmptyInbox()
{
MyEmailServiceAsync emailService = (MyEmailServiceAsync)
GWT.create(MyEmailService.class);
ServiceDefTarget endpoint = (ServiceDefTarget) emailService;
String moduleRelativeURL = GWT.getModuleBaseURL() + "email";
endpoint.setServiceEntryPoint(moduleRelativeURL);
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
}
};
emailService.emptyMyInbox(fUsername, fPassword, callback);
}
Making a call




Instantiate the service interface using
GWT.create().
Specify a service entry point URL for the
service proxy using ServiceDefTarget.
Create an asynchronous callback object to be
notified when the RPC has completed.
Make the call.
Advantages

Dynamic, reusable UI components

Really simple RPC

Real debugging
Advantages (contd)

Browser compatible

Browser history management

Completely Open Source
Try it out !!!


Try to create a simple GWT web application
that involves client server interaction.
Get help from


http://blogs.sun.com/insidemyhead/entry/google_
web_toolkit_modules_as
http://www.oracle.com/technology/pub/articles/dub
ois-gwt.html
References



http://code.google.com/webtoolkit/
http://www.oracle.com/technology/pub/article
s/dubois-gwt.html
http://www128.ibm.com/developerworks/library/os-adgwt2/
Thank you !

Google Web Toolkit

Transcript Google Web Toolkit

Directory