Web 2.

0 Frameworks and Toolkits

Sang Shin Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com
1

Types of Web 2.0 Toolkit and Framework Solutions of Today

Clients-side JavaScript Libraries (ex: Dojo toolkit and more) RMI-like remoting via proxy (ex: DWR) Integrator (ex: jMaki) Java to JavaScript/HTML translator (ex: GWT) AJAX-enabled JSF components (ex: NetBeans VWP) Dynamic Faces (DynaFaces) Portlets and Ajax (ex: JSR 168 portlets) Web Application Frameworks with AJAX extension (ex: Echo2 or Wicket)
2

Client Side JavaScript Libraries (Examples: Dojo Toolkit, Ext JS)

Client Side JavaScript Libraries

HTMP, JSP Pages, JavaScript Event Handlers
UI Widgets & Components

Remoting Abstraction Layer JavaScript,

DOM Utilities

XMLHttpRequest

iFrame 4

Characteristics of Client Side JavaScript Libraries

Server side technology agnostic
> The server side technology can be Java EE, .Net, PHP, Ruby

on Rails, etc.

You can use them in combination in a single app

> You might want to use widgets and JavaScript utilities from

multiple sources

Technical Reasons for using Clientside JavaScript Libraries

Handles remote asynch. communication (remoting)
> Hides low-level XMLHttpRequest operation

Handles browser incompatibilities

> No need to clutter your code with if/else's

Handles graceful degradation

> Uses IFrame if the browser does not support

XMLHttpRequest

Provides page navigation hooks over Ajax

> Back and forward buttons > Bookmarking

Technical Reasons for using Clientside JavaScript Libraries

Provides ready-to-use widgets
> Tree, Calendar, Textfield, Button, Split panes, Fisheye, etc.

Provides easy-to-use DOM utility

> Easier to use than original DOM APIs

Provides useful JavaScript utilities

> Example: Table management, Timer, etc

Provides error handling hook

> Easier to add error handler

Provides more flexible event handling

> DOM node based, Function call based, AOP style

Technical Reasons for using Clientside JavaScript Libraries

Provides advanced UI features
> Animation > Drag and drop > Fade out and Fade in

Generally encourages OO programming style

> Helps you write better JavaScript code

Business Reasons for using Clientside JavaScript Libraries

Proven in the market
> Generally higher quality than your own

Established developer/user communities

> Community keeps improving/adding features > Easy to get help from community forums

Easy to use
> It is just a matter of having them in the root directory of your

Web application or providing URL location

Tool support
> IDE's will support them in time

Client-side JavaScript Libraries

DOJO Toolkit
> > > >

Most prominent and comprehensive Gaining a leadership in this space Major industry support (Sun, IBM) http://dojotoolkit.com/

Prototype
> Used by other toolkit libaries > http://prototype.conio.net/

Ext JS
> Gaining popularity > http://extjs.com/

10

Client-side JavaScript Libraries

Script.aculo.us
> Built on Prototype > Nice set of visual effects and controls > http://script.aculo.us/

Rico
> Built on Prototype > Rich AJAX components and effects > http://openrico.org/

DHTML Goodies
> Various DHTML and AJAX scripts > http://www.dhtmlgoodies.com/

11

Demo: Running Various Client Side JavaScript Toolkit Demos

http://www.javapassion.com/han dsonlabs/ajaxframeworks/
12

Dojo Toolkit

Dojo toolkit is made of a set of layered libraries

14

dojo.io.bind()
var sampleFormNode = document.getElementById("formToSubmit"); dojo.io.bind({ url: "http://foo.bar.com/sampleData.js", load: function(type, evaldObj){ // hide the form when we hear back that it submitted successfully sampleFormNode.style.display = "none"; }, backButton: function(){ // ...and then when the user hits "back", re-show the form sampleFormNode.style.display = ""; }, formNode: sampleFormNode });
source: dojotoolkit.org

15

dojo.event.connect()
window.onload = function () { var link = document.getElementById("mylink"); // myHandler event handler is registered for the // "onclick" event of mylink node. dojo.event.connect(link, "onclick", myHandler);

// Define an event handler named as myHandler function myHandler(evt) { alert("myHandler: invoked - this is my named event handler"); } </script> <a href="#" id="mylink">Click Me</a>

16

Demo: Building and Running Dojo Toolkit Applications

http://www.javapassion.com/han dsonlabs/4260_ajaxdojointro.zip

17

Dojo Demo Scenario

Build and run input validation Ajax application using Dojo toolkit's dojo.io.bind()
> Forward, backward capabilities

Build and run Fisheye application using dojo.event.connect()

> Event model

18

RMI-like Remoting via Proxy (Example: DWR)

RMI-like Remoting via Proxy

JavaScript RMI like call Java Method

Proxy

Skeleton

Remote Abstraction Layer

HTTP Get/Post
XMLHttpRequest

Framework runtime

iFrame

20

Why DWR?
What happens if you have several methods in a class on the server that you want to invoke from the browser?
> Each of these methods need to be addressable via URI

whether you are using XMLHttpRequest directory or clientside only toolkit such as Dojo or Prototype > You would have to map parameters and return values to HTML input form parameters and responses yourself

DWR provides a client/server framework that addresses these problems DWR comes with some JavaScript utility functions
21

How DWR Works

22

DWR Consists of Two Main Parts

A DWR-runtime-provided Java Servlet running on the server that processes incoming DWR requests and sends responses back to the browser
> uk.ltd.getahead.dwr.DWRServlet > This servlet delegates the call to the backend class you

specify in the dwr.xml configuration file

JavaScript running in the browser that sends requests and can dynamically update the webpage
> DWR framework handles XMLHttpRequest handling

source: http://getahead.ltd.uk/dwr

23

How Does DWR Work?

DWR generates a matching client-side Javascript class from a backend Java class
> Allows you then to write JavaScript code that looks like

conventional RPC/RMI like code, which is much more intuitive than writing raw JavaScript code

The generated JavaScript class handles remoting details between the browser and the backend server
> Handles asynchronous communication via XMLHttpRequest -

Invokes the callback function in the JavaScript > You provide the callback function as additional parameter > DWR converts all the parameters and return values between client side Javascript and backend Java

24

Demo: Building and running DWR Application

http://www.javapassion.com/han dsonlabs/4265_ajaxdwrintro.zip
25

DWR Demo Scenario

Build and run Chat application
> Test with 2 browser clients

Show test feature of DWR

> http://localhost:8084/dwr.examples.chat/dwr

Show Java class and its methods that are exposed

> Chat has two methods getMessages() and addMessage()

Show dwr.xml configuration file

> Specifies Chat class for remoting

Show client-side JavaScript code

> RMI-like syntax (application-level) > Asynchronous callback

26

Integration Technology: jMaki

Motivations for jMaki

You want to leverage widgets from existing and future AJAX toolkits and frameworks in reusable fashion
> Dojo, Scriptaculus, Google Widgets, Yahoo UI Widgets,

DHTML Goodies, Many more

However, these widgets use different syntax and different data model
> There is a need for a common programming model and

common data model for using widgets from multiple AJAX toolkits and frameworks

28

Origins of jMaki?
j is for JavaScript technology Maki == to wrap in Japanese Started as a way of wrapping JavaScript technology functionality
> Take widgets from many popular AJAX toolkits and

frameworks, and wrap them into a JSP or JSF tag

Project jMaki has evolved to provide more

29

jMaki Features
Widgets from popular toolkits
> Dojo, Yahoo, Script.aculo.us, Spry, Google

> Self-contained standards-based Component Library

Make JavaScript technology accessible to Java technology, Phobos, PHP and Ruby Publish and subscribe event model XmlHttpProxy
> Allows access to services not in the web app domain

Integrated Tools support

> NetBeans and Eclipse plug-in's

Future Protection
> Unified data model for widgets from different toolkits

30

Benefits of using jMaki

31

Demo: Building and running jMaki Application

http://www.javapassion.com/handson labs/4270_ajaxjmakiintro.zip http://www.javapassion.com/handson labs/4271_ajaxjmakimashup.zip
32

jMaki Demo Scenario

Build a simple jMaki application using widgets from various sources
> Using simpler syntax and consistent data model

Build a Mashup application using jMaki widgets

> Leveraging publish/subscribe event model

Build a RSS feed application using jMaki widgets

> Leveraging XmlHttpProxy

33

Java Code To JavaScript/HTML Translator: GWT

What is GWT?
Java software development framework that makes writing AJAX applications easy Let you develop and debug AJAX applications in the Java language using the Java development tools of your choice
> NetBeans or Eclipse

Provides Java-to-JavaScript compiler and a special web browser that helps you debug your GWT applications
> When you deploy your application to production, the compiler

translates your Java application to browser-compliant JavaScript and HTML

35

Two Modes of Running GWT App

Hosted mode
> Your application is run as Java bytecode within the Java

Virtual Machine (JVM) > You will typically spend most of your development time in hosted mode because running in the JVM means you can take advantage of Java's debugging facilities

Web mode
> Your application is run as pure JavaScript and HTML,

compiled from your original Java source code with the GWT Java-to-JavaScript compiler > When you deploy your GWT applications to production, you deploy this JavaScript and HTML to your web servers, so end users will only see the web mode version of your application 36

Why Use Java Programming Language for AJAX Development?

Static type checking in the Java language boosts productivity while reducing errors. Common JavaScript errors (typos, type mismatches) are easily caught at compile time rather than by users at runtime. Code prompting/completion (through IDE) is useful and widely available Automated Java refactoring is pretty snazzy these days. Java-based OO designs are easier to communicate and understand, thus making your AJAX code base more comprehensible with less documentation.
37

Why GWT?
No need to learn/use JavaScript language
> Leverage Java programming knowledge you already have

No need to handle browser incompatibilities and quirks

> GWT handles them for you > Forward/backward buttons > Browser history

No need to learn/use DOM APIs

> Use Java APIs

No need to build commonly used Widgets

> Widgets come with GWT

38

Why GWT?
Leverage various tools of Java programming language for writing/debugging/testing
> For example, NetBeans or Eclipse

JUnit integration
> GWT's direct integration with JUnit lets you unit test both in a

debugger and in a browser and you can even unit test asynchronous RPCs

Internationalization
> GWT internationalization support provides a variety of

techniques to internationalize strings, typed values, and classes

39

Demo: Building and running GWT Applications

http://www.javapassion.com/han dsonlabs/4275_ajaxgwtintro.zip
40

Demo: GWTHello
Build and run GWTHello sample application from GWT hands-on lab in
> Hosted mode (Debug project) > Web mode

Make a break point in Hosted mode

41

GWT Demo Scenario

Build and run a simple HelloWorld GWT application
> Write the code in Java programming language > Run it in both hosted and web mode

Open KitchenSink NetBeans GWT project and run

> Play around various widgets provided by the GWT > Backward and forward button behavior

Show how to invoke JavaScript code from Java code and vice versa Show how to associate a CSS style items to a GWT widget
42

AJAX-Enabled JSF Components

AJAX-enabled JSF Components

AJAX-enabled JSF components hides all the complexity of AJAX programming
> Page author does not need to know JavaScript > The burden is shifted to component developers

Leverages drag-and-drop Web application development model of JSF through an IDE

> You can drag and drop AJAX-enabled JSF components within

NetBeans Visual Web Pack (and other JSF-aware IDE's) to build AJAX applications

JSF components are reusable

> More AJAX-enabled JSF components are being built by the

community

44

Open-Source Implementations
Woodstock AJAX-enabled JSF components (opensource)
> https://woodstock.dev.java.net/index.html

ICEfaces
> http://www.icefaces.org/main/home/index.jsp

ajax4jsf
> Can add AJAX capability to existing applications > https://ajax4jsf.dev.java.net/

45

Dynamic Faces (DynaFaces)

DynaFaces Usage Patterns

Page Author > Use AJAX enabled components > Use AjaxZone tag to AJAXify regions of the page > Use provided JavaScript library to AJAXify page elements and components Component Author > Use provided JavaScript library in custom components > Write your own JavaScript that talks directly to the HTTP protocol and the XML application defined by DynaFaces
Increasing Complexity Increasing Complexity

Views and Partial Views

Views and Partial Views

DynaFaces Usage Patterns: AjaxZones

The easiest way to AJAXify an existing application Demarcate one or more AJAX zones within a page Zones will refresh via AJAX, without full page refresh.
causes reaction in another zone Action in one zone

2. See update here

1. Click something in here

Demo: Building and running DynaFaces Application

http://www.javapassion.com/han dsonlabs/4144_jsfdynafaces.zip
51

Building Portlets with Ajax Behavior

Issues with Current Portlet Architecture

No easy way to make asynchronous call
> same as regular Web application

The response contains markup for the whole page not just for the target portlet Will be addressed in JSR 286

53

Demo: Building and running Porlet Application with Ajax behavior

http://www.javapassion.com/han dsonlabs/4294_ajaxportlet.zip
54

Portlets with Ajax Demo Scenario

Build Portlet that has Ajax behavior Show two different windows of the same portlet perform Ajax operations independently from each other

55

Web Application Frameworks with AJAX Extension

Web Application Framework with Ajax Extension

Existing Web Application Frameworks add AJAX functionality
> Minimum or no requirement of JavaScript coding

Uses JavaScript client library internally

57

Web App Frameworks with AJAX Extension Implementations

Shale
> http://struts.apache.org/struts-shale/

Echo2
> http://www.nextapp.com/platform/echo2/echo/

Wicket
> http://wicket.sourceforge.net/

Ruby on Rails
> http://www.rubyonrails.org/

58

Demo: Building and running Ajax enabled Echo2 Application

http://www.javapassion.com/han dsonlabs/4282_ajaxecho2.zip
59

So... What Should I Use?

So What Should I Use? Assuming You are using Java Tech.

On the UI side
> Use AJAX-enabled JSF components whenever possible using

an JSF-enabled IDE such as Visual Web Pack of NetBeans > If you are not ready to commit yourself to JSF component solutions yet, use jMaki > If you want to have total control on the client side JavaScript coding, use Dojo toolkit > If you already have Swing apps that you want to expose as AJAX-fied Web apps or if you do not want to deal with JavaScript coding, use GWT

61

So What Should I Use? Assuming You are using Java Tech.

On the business logic side
> If you already have Java EE business logic that you want to be

exposed as RMI calls on the client with AJAX behavior, use DWR > If you are already using a particular Web application framework for building majority of your web application and the framework has AJAX extension, use it

62

So What Should I Use? If you want use Scripting Language as a Main enabler
Use Ruby on Rails or Phobos or Grails
> > > >

Leverage agile development of scripting Leverage the power of Java platform MVC based Multiple scripting languages

63

Ajax Frameworks and Toolkits

Sang Shin Java Technology Evangelist Sun Microsystems, Inc.
64