AJAX Development with JSF

Look Ma! No JavaScript!

Kito D. Mann
Principal Consultant
2
Learn how to take advantage of JSF
components and libraries to provide
AJAX behavior without writing
JavaScript.
AJAX Development with JSF
Look Ma! No JavaScript!
3
Kito D. Mann
Trainer, consultant, architect,
mentor
Internationally recognized speaker
JavaOne, JavaZone, TSS Symposium,
JavaPro Live!
Author, JavaServer Faces in Action
Founder, JSF Central
http://www.jsfcentral.com
4
Kito D. Mann
JCP Member
JSF 1.2, JSP 2.1, Design-Time API for
JavaBeans, Design-Time Metadata for
JavaServer Faces Components, WebBeans,
etc.
Experience with Java since its
release in 1995
Web development since 1993
5
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
6
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
7
Standard web user interface (UI) framework for
Java
JSF 1.0: Standardized through Java Community Process
(JCP) in 2004 (JSR 127)
JSF 1.2: Standardized through JCP in 2006 (JSR 252)
Part of Java EE 5.0
What is JavaServer Faces?
8
Specification consists of:
Server side UI component and event model
Set of basic UI components
Basic application infrastructure
Can automatically synchronize UI components with application
objects
Includes basic Dependency Injection container
What is JavaServer Faces?
9
Extensive tool support
Sun, Oracle, IBM, BEA, Exadel, Borland, JetBrains, Genuietc,
others
Enables RAD-style approach to Java web
development
Facilitates third-party UI component market
Built on top of Servlet API
Works with JSP, but does not require it
What is JavaServer Faces?
10
JSF and Struts
Transparent AJAX support
Automatic markup generation (i.e., HTML, WML)
Declarative integration of user interface with
business objects (both read and write )
Stateful user interface component model
(running on the server )
Server-side handling of user interface events
Type conversion
Navigation
Form handling and validation
Enhanced localization
Layer separation (Model 2)
Resource management
Extensible templating mechanism
Integration with Java, session management , lifecycle
management , basic error handling , security,
deployment and packaging , J2EE integration, etc.
HTTP request and response handling
Servlet API
Web server
JavaServer Pages
Struts 1.x
JavaServer Faces
Little
abstraction
Heavy
abstraction
11
JSF Application Architecture
What is Java Server Faces?
12
View
(JSP, Facelets, Clay)
e
v
e
n
t
Managed Beans
public String add()
{
Project project = getVisit().getCurrentProject();
getProjectCoordinator().add(project);
return success;
}
<h:commandButton value="Save"
action="#{createProjectBean.add}"/>
Navigation rules
(faces-config.xml)
<navigation-rule>
<from-view-id>create.jsp</from-view-id>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>create.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>show_all.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Backing bean
(POJO)
o
u
t
c
o
m
e
The JSF Programming Model
13
The IDE Effect
Designed to facilitate easy-to-use IDE
integration
Since JSF is a standard, vendors more likely to create tools
All major IDE vendors support JSF
Level and style varies
Caveat:
Generated artefacts
Does not require tools
14
Sun Java Studio Creator
15
BEA Workshop Studio
16
BEA Workshop Studio
17
Oracle JDeveloper
18
Oracle JDeveloper
19
Exadel Studio Pro
DEMO
21
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
22
Ajaxian Faces
JSFs architecture makes it easy to add Ajax
support
Components and renderers are separate
PhaseListeners can be invoked during request processing
Enables transparent AJAX support
Same programming model with or without AJAX
23
Ajaxian Faces
Three AJAX integration strategies:
Add AJAX support to existing components:
Ajax4jsf
AjaxAnywhere
DynaFaces
24
Ajaxian Faces
Three AJAX integration strategies:
Integrate AJAX support into JSF components
Simplica ECruiser AJAX Suite for JSF
Infragistics NetAdvantage for JSF
ICEsoft ICEfaces
Exadel RichFaces Visual Component Platform
TeamDev QuipuKit
Backbase Java Edition
Sun Project Woodstock
25
Ajaxian Faces
Three AJAX integration strategies:
Wrap existing AJAX widgets
jMaki
DojoFaces
Full listing of products at
http://www.jsfcentral.com/products/
26
Ajax4Jsf
Adds Ajax support to any JSF view
Open source
Originally developed by Exadel
Now maintained by JBoss
Features:
Can add Ajax support to any JSF component with JavaScript
events
Can define regions of the page (or entire page) that can be
updated via AJAX
Status component
Polling component
27
Ajax4Jsf
Features:
MediaOutput component
ActionListeners and ValueChangeListeners invoked via Ajax
Also features AjaxListeners
28
Ajax4Jsf
29
Ajax4Jsf
DEMO
31
ECruiser AJAX Suite for JSF
Suite of basic JSF components
DataTable, GridTable, Tree, Tab, Menu, etc.
Integrated AJAX support
Lazy loading of data sets
Full set of AJAX-aware basic input components
Ability to execute any backing bean method for JavaScript
events
DEMO
33
Infragistics NetAdvantage for JSF
Suite of bread-and-butter components:
Tree, Table, Menu, Tabs, MenuBar, Input controls
Full Ajax support
Dynamic loading of data sets
Updating part of the page with a selection
All components can send Ajax requests and update other
components dynamically
DEMO
35
ICEsoft ICEfaces
Innovative take on Ajax browser/server
integration
Direct-to-DOM: maintains copy of DOM on server which is
synchronized with DOM on the client
Requires a persistent connection between client and server
Supports Ajax Push
36
ICEsoft ICEfaces
Three elements:
Framework
Implemented as a JSF RenderKit
Ajax bridge
Component suite
Chart, Data Table, DynamicImage, Collapsable Panel, Modal
Popups, Tabs, TreeTable, Input controls
37
ICEsoft ICEfaces
DEMO
39
jMaki
Provides JSF and JSP wrappers for popular
AJAX widgets
Originally written by Greg Murray, Servlet 2.4
spec lead
Currently open-sourced on Java.net
Supports widgets from:
Dojo, Scriptaculous, Yahoo!, Google, and others
40
jMaki
Caveats
Requires JDK 1.5x or higher
Use without Glassfish not documented
JSF not supported for all widgets
Not as tightly integrated with JSF as other solutions
41
jMaki
Easy to create new widgets
DEMO
43
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
44
Cant we all get along?
ICEfaces may not work with other components
Includes standard JSF components and ICEfaces custom
components
Limited interoperability with other components
Backbase doesnt work with other components
Uses single-page model
45
Cant we all get along?
Ajax4jsf and DynaFaces duplicate functionality
Ajax4jsf is more mature
ICEsoft involved with DynaFaces
46
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
47
Which one?
Pick a component suite
Tight integration with JSF
No incompatibility problems within the same suite
Well documented and supported
Choose as few as possible (preferably just one)
How much AJAX do you need?
Other suites (such as WebGalileo Faces and Apache MyFaces
Tomahawk have some AJAX support as well)
48
Which one?
To add support to existing JSF components
Use Ajax4Jsf
Works well with Apache MyFaces Tomahawk
If you need AJAX push, choose ICEfaces
Well documented
Free version available
Enterprise addition provides support and enhanced scalability
Use jMaki for eye candy or Web 2.0 components
Dont forget tools support!
49
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
50
JSF 1.2 and Beyond
One problem with JSF 1.x Ajax support:
The request processing lifecycle
JSF 1.2 provides specific Ajax support
JSF 1.2 Reference Implementation available now
Requires either a Java EE 5 server (with JSP 2.1) or Facelets (open
source JSP replacement)
MyFaces working on JSF 1.2
51
JSF 1.2 and Beyond
JSF 2.0 will incorporate features from:
DynaFaces
Single, integrated API for Ajax component developers
Will include JavaScript bindings
Apache Shale
JBoss Seam
Facelets
52
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
53
Summary
JavaServer Faces is the standard Java EE
web framework
It is a component-based framework
Provides a simple, cohesive programming
model
JSFs architecture lends itself to Ajax
development
54
Summary
Ajax development with JSF doesnt require
JavaScript!
Same programming model with or without Ajax
Three different approaches to Ajax
development with JSF
Integrate Ajax support into the components
Wrap regular JSF components with Ajax support
Wrap pure Ajax widgets with Ajax support
55
Summary
Many different component suites and solutions
exist currently
JSF 1.2 makes Ajax integration easier for
component developers
JSF 2.0 will provide a single mechanism for
Ajax integration for component vendors
56
Agenda
JavaServer Faces from 1,000 feet
Ajaxian Faces
Cant we all get along?
Which one?
JSF 1.2 and beyond
Summary
Q&A
Q&A
58
Resources
Official JSF site
http://java.sun.com/javaee/javaserverfaces/
JSF Central product directory
http://www.jsfcentral.com/products
Ajax component suite comparison
http://www.theserverside.com/tt/articles/article.tss?l=JSFCompari
son
Ajax-JSF Comparison Matrix
http://www.ajaxjsf.net/