JSF 2.0 provides many new features and improvements over JSF 1.x including built-in Ajax support, easier component development through annotations and resource handling, additional scopes like ViewScope, and a Page Description Language (PDL) based on Facelets. It aims to address issues with JSF 1.x like performance, exception handling, and reduce unnecessary configuration through conventions over configuration.

1. JSF 2.0
PREVIEW
Cagatay Civici

2. About Me
Apache MyFaces PMC Member
Co-author of “The Definitive Guide to Apache MyFaces and Facelets”
Reference in “Core JSF 2nd Edition”
Recognized speaker in international and local conferences (JSFOne, JSFDays...)
Oracle RCF Member
Krank Framework committer
JSF Chart Creator Author
YUI4JSF Project Lead
FacesTrace Project Lead
FC Barcelona Fan
Working for SpringSource

3. Agenda
Overview of JSF 1.x
Overview JSF 2.0
What is new?
Future of JSF

4. JSF 1.x Overview
Component Oriented
JSF 1.0, 1.1 and 1.2
Standard (jsr 127 and 252)
Two implementations
Apache MyFaces
Mojarra (RI)

5. JSF 1.x - The Good
Component oriented
Extendible
Third party components (Trinidad, Tomahawk,
RichFaces, IceFaces ...)
Rapid application development
Vendor and Tool support

6. JSF 1.x - The Bad
JSP based
Performance
Not very rich
Exception handling
Too much xml
A bit more...

7. JSF 2.0 Overview
JSR 314
Part of JEE 6
New features, improvements and fixes
Influenced by community and trends
Other web frameworks, Ajax, JSF extensions,
Component libs, blogs etc...

8. Roadmap
JSR process started in July, 2007
Early Draft Review 1 finished on July 2008
Early Draft Review 2 finished on Oct 2008
Proposed Final Draft Date, December 2008
Timed with JEE 6

9. So What’s New?
AJAX
Easy Component Development
Resource Loading
PDL (Page Description Language)
More Scopes
Less configuration

10. More
Component interoperability
Scripting (Groovy)
Zero deployment time
System Events
Project Stage
Client side validation

11. More...
Bookmarks
Exception handling
Improved State Management
Extension Prioritization

12. Resource Handling
What is a resource?
css, javascript, images ...
A resource has;
library, version, locale, name
Two new classes
javax.faces.application.Resource
javax.faces.application.ResourceHandler
Load from;
/resources
/META-INF/resources

13. Resource Handling
Resource Format
[localePrefix/] [libraryName/] [libraryVersion/] resourceName [/resourceVersion]
Examples
Under /resources or /META-INF/resources
- tr/mycoolcomponentlib/1.0/logo.png
- mycoolcomponentlib/1.0/widget.js/1.0.js
- mycoolcomponentlib/styles.css
Ability to load from classpath

14. Resources and
Custom Components
@ResourceDependency(name=”ajaxsuggest.js”, library=”mycoolcomponentlib”)
public class InputSuggest extends UIInput {...}
OR
@ResourceDependencies({
@ResourceDependency(name=”ajaxsuggest.js”, library=”mycoolcomponentlib”)
@ResourceDependency(name=”ajaxsuggest.css”, library=”mycoolcomponentlib”))}
public class InputSuggest extends UIInput {...}
OR
Application app = FacesContext.getCurrentInstance().getApplication();
Resource resource= app.getResourceHandler().createResource(“suggest.js”,”lib”);
writer.write(“<script ...”); //encode using request.getRequestPath();

15. Resource Location
4 new tags;
h:head
h:body
h:outputScript
h:outputStyleSheet
Example
...
<h:head>
</h:head>
<h:body>
<h:outputScript name=”suggest.js” target=”head” />
</h:body>
...

16. Resource Handling Demo

17. Ajax
Standard JSF-Ajax integration
Javascript API for Ajax
namespace : javax.faces (Open Ajax Alliance)
script: ajax.js

18. Ajax Request
javax.faces.Ajax.ajaxRequest(element,event,options)
<h:commandButton id=”btn” value=”Submit”
action=”#{itemController.newItem}”
onclick=”javax.faces.Ajax.ajaxRequest(this,event,
{execute:this.id, render:’comp1’})”>
</h:commandButton>
Include ajax.js
<h:outputScript name=”ajax.js” library=”javax.faces”
target=”head” />
OR
<h:outputAjaxScript target=”head” />

19. Ajax and Custom
Components
Include ajax.js with annotation
@AjaxDependency(target=”head”)
public class MyAjaxComponent extends UIInput {
}
Or with ResourceHandler
ResourceHandler.createAjaxResource();

20. Ajax Demo

21. Configuration
Annotations instead of xml
<managed-bean>
<managed-bean-name>createBookController</managed-bean-name>
<managed-bean-class>
com.bla.bla.view.MyPojo
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
becomes
@ManagedBean(name=”myPojo”)
@RequestScoped
public class MyPojo {
...
}

22. Configuration
More annotations
@FacesComponent
@FacesConverter
@ManagedBean
@ManagedBeans
@ManagedProperty
@FacesRenderer
@FacesRenderKit
@FacesValidator
More soon...

23. Project Stage
Project environment setting
Similar to RAILS_ENV
Values;
Development
UnitTest
SystemTest
Production (Default)

24. Project Stage
web.xml
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
JNDI
java:comp/env/jsf/ProjectStage
How to get it?
Application.getProjectStage()

25. Project Stage Demo

26. System Events
Subscription based, no queueing
A bit similar to PhaseEvent idea
Ingridients
System Events
System Event Listeners
Subscribers (Application or UIComponent)

27. System Events
Application level system events
public abstract void subscribeToEvent(Class<? extends SystemEvent>
systemEventClass, SystemEventListener listener);
public abstract void subscribeToEvent(Class<? extends SystemEvent>
systemEventClass, Class sourceClass, SystemEventListener listener);
public abstract void publishEvent(Class<? extends SystemEvent>
systemEventClass, SystemEventListenerHolder source);
public void publishEvent(Class<? extends SystemEvent>
systemEventClass, Class<?> sourceBaseType, Object source);

28. System Events
UIComponent level system events
public void subscribeToEvent(Class<? extends SystemEvent>
eventClass, ComponentSystemEventListener componentListener);
public void unsubscribeFromEvent(Class<? extends SystemEvent>
eventClass, ComponentSystemEventListener componentListener);
AfterAddToParentEvent
BeforeRenderEvent ComponentSystemEvent
ViewMapCreatedEvent
ViewMapDestroyedEvent

29. System Events
Listen with annotations
@ListenerFor(systemEventClass=AfterAddToParentEvent.class)
public class MyComponent extends UIOutput {}
@ListenersFor({
@ListenerFor(systemEventClass=AfterAddToParentEvent.class,
@ListenerFor(systemEventClass=BeforeRenderEvent.class)})
public class MyComponent extends UIOutput {}

30. Scopes
ViewScope
For managed beans
Component scope
Composition
Conversation scope
Not in yet, through webbeans?

31. Scopes - ViewScope
A new managed bean scope
Lives until view is changed
@ManagedBean(name=”myBean”)
@ViewScoped
public class MyBeanInViewScope {
...
}

32. Scopes Demo

33. PDL
Page Declaration Language
Based on Facelets
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF2Demo</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Hello" />
</h:form>
</h:body>
</html>

34. EZComp
Greatly simplifies custom component development
Convention over configuration
Declarative composite components
Components without Java coding
Component scope in composition

35. EZComp
Page that uses a composition component
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:jwug="http://java.sun.com/jsf/composite/jwug">
<h:head>
<title>EZComp Demo</title>
</h:head>
<h:body>
<h:form>
<jwug:greeting value=”Mr. Soprano” />
</h:form>
</h:body>
</html>

36. EZComp
Under %webroot%/resources/jwug/greeting.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite">
<body>
<composite:interface>
<composite:attribute name="value" required="true" />
</composite:interface>
<composite:implementation>
<h:outputText value=”Hello #{compositeComponent.attrs.value}” />
</composite:implementation>
</body>
</html>

37. EZComp - Slider
Scriptaculous based slider
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:jwug="http://java.sun.com/jsf/composite/jwug">
<h:head>
<title>EZComp Demo</title>
</h:head>
<h:body>
<h:form>
<jwug:slider value=”#{demo.number}” min=”0” max=”100”/>
</h:form>
</h:body>
</html>

38. EZComp - Slider
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite">
<body>
<composite:interface>
<composite:attribute name="id" required="true" />
<composite:attribute name="value" required="true" />
<composite:attribute name="min" required="false" />
<composite:attribute name="max" required="false" />
</composite:interface>
<composite:implementation>
<h:outputScript name="prototype.js" library="script" target="head"/>
<h:outputScript name="scriptaculous.js" library="script" target="head"/>
<h:inputText id="sliderField" style="width:100px" value="#{compositeComponent.attrs.value}"></h:inputText>
<div id="#{compositeComponent.clientId}_track" style="width:105px;background-color:#aaa;height:5px;">
<div id="#{compositeComponent.clientId}_handle" style="width:5px;height:10px;background-color:#f00;cursor:move;"></div>
</div>
<script type="text/javascript">
var slider_#{compositeComponent.attrs.id} = new
Control.Slider('#{compositeComponent.clientId}_handle','#{compositeComponent.clientId}_track',{range:
$R(#{compositeComponent.attrs.min},#{compositeComponent.attrs.max})});
slider_#{compositeComponent.attrs.id}.options.onSlide = function(value){
$('#{compositeComponent.clientId}:sliderField').value = (value + '').split(".")[0];
};</script>
</composite:implementation>
</body>
</html>

39. EZComp Slider Demo

40. Scripting JSF
Groovy instead of Java
Zero deployment time
Reload faces-config
Scripted beans, renderers, validators and etc

41. From JSF 2.0 Issue Tracker
Optimized state management
Exception Handling
Bookmarks
SelectItems
Skinning
Partial validation
Security
more...

42. MyFaces 2.0
Being worked on...
JSF 2.0 branch created
Not to be late this time

43. Future of JSF
More component libraries
JSF in EE (WebBeans, Seam, Spring Faces ...)
More RIA integration (Flex, Ajax ...)
Tool support
More adaptation

44. Resources
JSF 2.0 EG blog : http://blogs.jsfcentral.com/jsf2group
Ed Burns’s blog: http://weblogs.java.net/blog/edburns/
Ryan Lubke’s blog: http://blogs.sun.com/rlubke/
Jim Driscoll’s blog: http://weblogs.java.net/blog/driscoll/
JSR Page: http://jcp.org/en/jsr/detail?id=314

45. The End - Cheers!
http://cagataycivici.wordpress.com
cagatay@apache.org
PS3 Network id: FacesContext