Google Web Toolkit

destructivebewInternet και Εφαρμογές Web

19 Ιουλ 2012 (πριν από 5 χρόνια και 1 μέρα)

380 εμφανίσεις

GWT
Google Web Toolkit
John N Armstrong
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
About Me...

Objective Logic, L.L.P (est. 1999)

Independent Java Consultant

Large System Java Architecture, Implementation

Current Project is a high-volume, highly-scalable, back-end
credit card transaction processing system using GigaSpaces
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
About You...

Are you doing front-end web application development?

Web 2.0 development?

What tools are you using? AJAX, XML, JavaScript, what else?

Is it easy?

Are you happy
with the current state of development?
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
The Web Application Model:
Where Did We Come From?

Today, developers can choose from a broad variety of
competing web application frameworks (servlets & JSP’s,
Struts, Struts2, Spring, Ruby on Rails, Tapestry, Wicket, etc.)

Most have one thing in common: server-side code generates
plain ol’ HTML, which is rendered by the user’s browser

Each user interaction with the UI results in a round-trip to
the server, which processes the request, updates state, and
returns the next page view

Minor assist from JavaScript on the client side
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com

The resulting user interface is

(relatively) slow

not very sophisticated

doesn’t compare to the richness of desktop
applications
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
The Web Application Model:
Where Are We?

We’re outta gas

We’ve pushed the traditional web application model about as
far as it can go

Our users are demanding -- and web application developers
want to deliver -- a richer web experience, akin to that of a
desktop application
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com

Web 2.0: The web as an application development platform

Dynamic, responsive user interface

Rich client experience

Web applications that rival desktop applications in their
presentation, user interaction, responsiveness

A Few Examples (there are many)

Google Mail, Yahoo Mail, Flickr

Google Docs (word processing, spreadsheet, presentation)
Where do we go from here?
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
A New Paradigm: Building Rich
Client Web Apps using a coalition
of Technologies
AJAX:
XHTML
DOM
DHTML
CSS
XML
JavaScript
Java
Web Framework
Web Services
J2EE
Database
HTTP/S
XMLHttpRequest
JSON
Client
Server
Web Browser
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
But the Road is Hard

Multiple technologies require multiple skill sets and
collaboration (JavaScript, HTML, DHTML, DOM, etc.)

JavaScript, although the de facto standard for client-side
programming, is not a strong language

Not well-suited for building sophisticated UI’s

Not strongly typed

Tools for development and debugging in the browser are
getting better, but are still weak compared to server side

No compile time checking - errors are detected and
reported (poorly) at runtime
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
And Steep...

Error handling and reporting are poor, debugging can be a
nightmare

The sheer amount of JavaScript code required to implement a
rich UI can be daunting
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
Supporting Multiple Browsers
and Browser Versions $@%#&@!
Internet
Explorer
Firefox
Safari
Opera
Mozilla
6.x
8.0
7.x
2.x
3.x
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
Multiple browsers and versions

You spend 90% of your time tweaking JavaScript and HTML

You either don’t try, you try but fail, or you simply run out of
time

you wind up supporting only selected browsers
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com

Try a radically new approach

The
Google Web Toolkit
, or
GWT

(pronounced “gwit”) was
expressly designed to address
the challenges associated with
rich client-side development
What’s a Developer to do?

GWT is not a “silver bullet” -- It doesn’t make it “easy”, but it
does make it “possible”

GWT is one of several approaches to rich client-side application
development (e.g., DOJO, Scriptaculous, Prototype)
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
The GOAL is still the same
GWT changes HOW we get there
AJAX:
XHTML
DOM
DHTML
CSS
XML
JavaScript
Java
Web Framework
Web Services
J2EE
Database
HTTP/S
XMLHttpRequest
JSON
Client
Server
Web Browser
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
The Good News

Familiar, robust language
- You write your entire web
application in
Java
, not JavaScript

Need for specialized skills reduced
- GWT shields you from
the implementation details of JavaScript and AJAX, allowing
you to focus on the application itself

Familiar tools
- You can use all of your favorite Java
development tools, including IDE’s, debuggers, JUnit, etc.

Familiar development environment
- You test your code
outside of the browser in a standard JVM runtime environment

Rapid development cycle
- Changes made to your code or
HTML are immediately visible; there’s no need to restart the
server
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
More Good News

All the benefits of Java
- Static, strong typing, compile-time
checking, runtime exceptions, stack traces, etc.

Common JavaScript errors are caught during development
rather than exposed to users at runtime

Robust debugging
- You can set breakpoints in both your
server-side
and

client-side code
! You can step through your
code, display variables, etc.

Supports Browser history
- you don’t have to break the
Browser’s Back button

Internationalization built-in
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
REALLY Good News

GWT addresses and resolves
most
(not all) of the differences
in browsers and browser versions

With little or no additional effort, your code will render
and execute “correctly” on all supported browsers and
browser versions

Supports IE, Firefox, Mozilla, Safari, and Opera

No browser detection

No special server-side if-then-else code
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
Platform Support

Available for Windows, Linux, Mac OS X

Current release is 1.4.62

Does
not
support Java 1.5, 1.6

Special (unofficial) download for Mac OS X Leopard
includes workaround for Mac JVM bug

Release Candidate 1.5 RC1(now available)

Supports
Java 1.5
, including features such as generics

Does NOT work with Mac OS X 10.5 (Leopard) due to Mac
JVM bug
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
IDE Support

GWT
projectCreator
and
applicationCreator
scripts
generate Eclipse .project, .classpath, and .launch files

You can run and debug GWT applications with no setup

GWT Studio
fully supports a “GWT facet” allowing you to
create applications that conform to the GWT framework

You can run and debug your application within the IDE
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com

You write
ALL
of your code, both server-side
and

client-side
,
in plain ol’ Java

How can you write the client-side in Java?

The
heart of GWT
is a
cross-compiler
that compiles your
client-side Java code into pure JavaScript which is
ultimately downloaded to and executed in the browser

no applets, no plugins, no JVM
How does it work?
Some restrictions apply...
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
“Restrictions”?

Most of the Java language is fully supported. However, the
following Java features are NOT supported in deployment:

Java primitive numeric data types are implemented using the
JavaScript’s 64-bit floating point data type

assert
(removed)

Multithreading (
synchronized
is ignored, wait(), notify() are
not allowed)

Reflection

Finalization

Strict floating point (
strictfp
)
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
More Restrictions...

Java library support is emulated
(there’s no JVM and no
class library) and is therefore limited to a
subset
of the
Java Runtime Library

Significant support for

java.lang

java.util

Limited support for
java.io, java.sql, java.annotation

You should limit regular expression syntax to that
supported by JavaScript

No serialization

GWT provides special classes that offer a subset of
functionality provided by selected JRE classes
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com

The GWT development framework provides a test browser that
allows you to test and interact with your application. Your
native Java code is executed in this mode.

Because all your code is ordinary Java, you can use all your
favorite Java development tools (IDE, debuggers, etc.)
The Development Cycle:
Hosted Mode
Code
Debug,
Test
GWT
Hosted
Browser
IDE
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com

At any time, you can “push the easy button” and your
Java code is cross-compiled into JavaScript.

You then point a real browser of your choice at GWT’s built-in
web server. This is the normal deployment mode.

With few exceptions, your UI will render exactly as it did in
the GWT test browser.
The Development Cycle:
Web Mode
Server
Code
(Java)
Client
Code
(Java)
Application Server
Java
Script
Web App
Cross-Compile
Compile
HTTP/S
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
Major Components of a GWT UI
1.
Widgets

GWT provides a set of pre-built widgets you can use, along
with layout panels

I
N ADDITION
,
YOU CAN CREATE YOUR OWN CUSTOM WIDGETS
by
compositing the GWT widgets
2.
Client-side code
(java, cross-compiled into pure JavaScript)
3.
Server-side code
(Java)
4.
HTML
“host” page, containing widgets, CSS, JavaScript
5.
Remote Procedure Calls
allow the client to invoke methods
on the server
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
Sample Pre-Built Widgets
Buttons
Radio Buttons
Checkboxes
Text Boxes
Passwords
Menus
List Boxes
Trees
Dialogs
Dialog
Dialog
Tables
RichTextArea
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
GWT Layout Panels
Horizontal
Vertical
Flow
Vertical Split
Horizontal Split
Dock
Tabbed
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
HTML Host Page
<html>
<head>

<!-- Properties can be specified to influence deferred binding -->
<meta name='gwt:property' content='locale=en_UK'>

<!-- Stylesheets are optional, but very useful -->
<link rel="stylesheet" href="Calendar.css">

<!-- Titles are optional, but useful -->
<title>Calendar App</title>

</head>
<body>

<!-- The fully-qualified module name, followed by 'nocache.js' -->
<script language="javascript" src="com.example.cal.Calendar.nocache.js"></script>

<!-- Include a history iframe to enable full GWT history support -->
<!-- (the id must be exactly as shown) -->
<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

</body>
</html>
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
RPC Plumbing
Note:

1.
“YourService” is a custom Java application service implemented by you
2.
The service is invoked asynchronously and the result is delivered via the Async interface
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com

DynaTable
is one of several GWT demo applications

demonstrates paging through a list of entries, consisting of
student and faculty schedules

GWT Components used:

client, server

Widgets - Composited from gwt widgets

Layouts are used to arrange the widgets

RPC - Client calls server to get next page of schedule data
Putting It All Together
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
DynaTable Objects
Person
Student
Professor
Schedule
Timeslot
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
DynaTable User Interface
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
Application Components
DynaTable
DynaTable.html
DynaTable
Widget
DayFilter
Widget
SchoolCalendar
ServiceImpl
SchoolCalendar
Service
Client
Server
Web Page
RPC
interface/proxy
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
DEMO
GWT - Google Web Toolkit
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
John N Armstrong:
john@objectivelogic.com
References

Google Web Toolkit

http://code.google.com/webtoolkit/

Fast, Easy, Beautiful: Pick Three - Building User Interfaces
with the Google Web Toolkit
Bruce Johnson & Joel Webber
Google Developer Day, May, 2007

Video:
http://www.youtube.com/watch?v=NvRa-CxkpZI

Slides:
http://google-web-toolkit.googlecode.com/files/Fast-
Easy-Beautiful-Pick-Three-GDD-2007.pdf
GWT - Google Web Toolkit
John N Armstrong:
john@objectivelogic.com
© 2008 Objective Logic, L.L.P.
--
www.objectivelogic.com
THE END