EXPLORING JSF 2.

0 AND PRIMEFACES
Cagatay Civici
PRIME
TECHNOLOGY

Cagatay Civici
JSF EG (Expert Group) Member PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer Consultant and Trainer for Prime Technology

Topics
JSF Overview Whats New in JSF 2.0? Go beyond with PrimeFaces

JSF Overview
Standard for Java EE Component Oriented Event Driven RenderKits (web, mobile ...)

History
Roots go back to 2001 JSR-127 JSF 1.0, 2004 JSR-127 JSF 1.1, 2004 JSR- 252 JSF 1.2, 2006 JSR-314 JSF 2.0, 2009 JSF 1.0 JSF 2.0

JSF Ecosytem
Apache Software Foundation (MyFaces, Trinidad, Tobago, Tomahawk, ExtVal...) Oracle (ADF Faces - Mojarra Implementation) IBM (IBM JSF Component) Prime Technology (PrimeFaces) VMware/SpringSource (Spring WebFlow) RedHat/JBoss (Seam, RichFaces) JAVA EE 6 (CDI, Bean Validation) Other *Faces libs

JSF 2.0 Highlights

Powered by Community Feedback Facelets/VDL AJAX Custom Components Behaviors Partial State Navigations Resource Loading Bookmarking New Event API Exception Handling JSR-303 Bean Validation and general pain relief

JSP with JSF

Mismatch JSP tags create JSF components Content vs Component Two dierent lifecycles

Facelets / VDL
XHTML based Optimized for JSF Templating New View Declaration Language API NOW STANDARD!

AJAX and JSF 1.x

Good match (Partial Output) Wheel reinvented by; IceFaces RichFaces PrimeFaces OpenFaces Trinidad ADF Faces Tomahawk *Faces

Compatibility issues

AJAX and JSF 2.0

Now Standard! New APIs; Server: PartialViewContext Client: jsf.ajax.AjaxRequest New tag; <f:ajax />

AJAX and JSF 2.0

PartialViewContext API Partial Processing (execute) Partial Rendering (render) Standard request parameters

f:ajax
Ajax Behavior
<h:inputText value=#{bean.value}> <f:ajax render=display/> </h:inputText> <h:outputText id=display /> <h:inputText value=#{bean.value}> <f:ajax render=display execute=@this/> </h:inputText> <h:outputText id=display /> <h:inputText value=#{bean.value}> <f:ajax render=display execute=@this event=blur/> </h:inputText> <h:outputText id=display />

No XML
faces-cong.xml is not optional Get rid of; <managed-bean /> <navigaton-case /> <component />, <renderer /> <converter />, <validator /> ...

Managed Beans with JSF 1.x

<managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class>com.prime.view.itemView</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>

package com.prime.view; public class ItemView { }

Managed Beans with JSF 2.0

NO XML
@ManagedBean public class ItemView { }

Dependencies with JSF 1.x

<managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class>com.prime.view.itemView</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>itemService</property-name> <value>#{itemService}</value> </managed-property> </managed-bean> <managed-bean> <managed-bean-name>itemService</managed-bean-name> <managed-bean-class>com.prime.service.ItemServiceImpl</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean> package com.prime.view; public class ItemView { private ItemService itemService; //getter&setter }

Dependencies with JSF 2.0

NO XML
@ManagedBean(name=itemService) @ApplicationScoped public class ItemServiceImpl implements ItemService { } @ManagedBean public class ItemView { @ManagedProperty(value=itemService) private ItemService itemService; //getter&setter }

Scopes
@RequestScoped @ViewScoped @SessionScoped @CustomScoped Flash scope

View Scope
Between request and session Lives for postbacks #{viewScope} UIViewRoot.getViewMap()

Flash Scope
ROR concept Lives in subsequent request Survives redirect Post-Redirect-Get #{ash} ExternalContext.getFlash()

System Events
Phaselisteners are not enough Subscribe to various events in lifecycle Application Events Component Events

Application Events
Application wide events ExceptionQueuedEvent PostConstructApplicationEvent PreDestroyApplicationEvent more...

Component Events
View based events PostAddToViewEvent PreValidateEvent PreRenderViewEvent more...
<h:inputText value=#{bean.value}> <f:event type=preValidate listener=#{bean.preValidate} /> </h:inputText>

Event Listeners
New API SystemEventListener isListenerForSource(Object source) processEvent(SystemEvent event) Congure via xml or @ListenerFor Application.subscribeToEvent(event, listener); UIComponent.subscribeToEvent(event, listener);

Navigations
Implicit Navigation Congurable NavigationHandler

Navigations with JSF 1.x

<navigation-rule> <from-view-id>/source.xhtml</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>target.xhtml</to-view-id> </navigation-case> </navigation-rule> public String buttonClick() { return success; }

source.xhtml

target.xhtml

Navigations with JSF 2.0

NO XML
public String buttonClick() { return target; }

source.xhtml

target.xhtml

GET Support
Navigate by GET View Metadata and View Parameters Bookmarkable URLs Post-Redirect-Get

GET Support with JSF 1.x

Assigned when bean is used for rst time No validation/conversion support No post assignment listener (init view)
http://www.site.com/itemView.jsf?itemId=10
<managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class>com.prime.view.itemView</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>itemId</property-name> <value>#{param[itemId]}</value> </managed-property> </managed-bean>

GET Support with JSF 2.0

Introducing ViewParameters Validation/conversion support Post assignment listener (init view)
http://www.site.com/itemView.jsf?itemId=10 <f:view> <f:metadata> <f:viewParam name=itemId value=#{itemView.itemId} /> </f:metadata> </f:view>

GET Support with JSF 2.0

Validation/conversion support
<f:view> <f:metadata> <f:viewParam name=itemId value=#{itemView.itemId}> <f:validator validatorId=itemValidator /> </f:viewParam> </f:metadata> </f:view>

GET Support with JSF 2.0

Post mapping listener
<f:view> <f:metadata> <f:viewParam name=itemId value=#{itemView.itemId}> <f:validator validatorId=itemValidator /> </f:viewParam> <f:event type=preRenderView listener=#{itemView.loadItem}/> </f:metadata> </f:view>

public void loadItem() { //load item with itemId from datatabase }

GET Support with JSF 1.2

GET component h:outputLink
<h:outputLink value=#{request.contextPath}/itemView.jsf?itemId=10> View Item </h:outputLink>

Manual URL generation No support for; context-path navigation-rules

GET Support with JSF 2.0

<h:button /> and <h:link />
<h:link outcome=main /> <h:button outcome=main includeViewParams=true/> <h:button outcome=main includeViewParams=true> <f:param name=itemId value=#{itemView.itemId} /> </h:button>

Auto generated Bookmarkable URLs Integrated with Navigation Rules

Project Stage
Runtime hint Mostly for use of implementation and extensions Development, Production, SystemTest, UnitTest
<context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param>

Application.getProjectStage()

Behaviors
Attaching behaviors
<h:commandButton value=Submit onclick=return confirm(Sure?)/>

<h:commandButton value=Submit> <custom:confirmation message=Sure? /> </h:commandButton>

One built-in client behavior, f:ajax

State Saving in JSF 1.x

Full Component Tree saved/restored Attributes saved/restored Performance/Memory issues Burden for component developer

State Saving in JSF 2.0

Partial State Saving Initial state is marked Deltas are saved and helper StateHelper API for developers Much less in size

Resource Loading with JSF 1.x

Loading bundles resources from jar Custom Servlet or Filter required

Resource Loading with JSF 2.0

New Resource APIs for; Registering Relocating Loading locale, version support New components <h:outputStylesheet /> and <h:outputScript />

Registering
Resources located at; /webroot/resources/mylib /jar/META-INF/resources/mylib
@ResourceDependency(name=cool.js, library=mycoollib) public class MyCoolComponent extends UIComponent { }

@ResourceDependencies { @ResourceDependency(name=cool.js, library=mycoollib) @ResourceDependency(name=cool.css, library=mycoollib) } public class MyCoolComponent extends UIComponent { }

Relocating
Resources placed at head or body <h:head />, <h:body />
@ResourceDependency(name=cool.js, library=mycoollib, target=head) public class MyCoolComponent extends UIComponent { }

UIViewRoot.addComponentResource API

Resource Components
Load from webroot or jar
<h:outputStylesheet name=cool.css library=mycoollib />

<h:outputScript name=cool.js library=mycoollib target=head/>

<h:graphicImage name=cool.png library=mycoollib/>

<h:graphicImage value=#{resource[mycoollib:cool.png}/>

Resources in CSS
#{resource} variable
.header { background:url(#{resource[mylib:header.png]}); }

Generates;
.header { background:url(/myapp/javax.faces.resource/header.png?ln=mylib); }

Bean Validation
JSR-303 Integration Reuse constraints
@NotNull @Size(min=5, max=10) private String title;

<h:inputText value=#{bean.item.title} />

instead of
<h:inputText value=#{bean.item.title} required=true> <f:validateLength min=5 max=10 /> </h:inputText/>

UI Components
Standard JSF Components (button, radio, checkbox) Third Party Suites (e.g. PrimeFaces)

But how to build your own?

Custom Components with JSF 1.x

5 dierent artifacts required
faces-cong.xml cong <component /> <renderer/ > jsp tld cong

JSP Tag Class

Component Class

Renderer Class

Custom Components with JSF 2.0

One .xhtml le is enough

component.xhtml

DatePicker Demo
<prime:datePicker /> /webroot/resources/prime/datepicker.xhtml /webroot/resources/jquery/...

PRIMEFACES
Next Generation Component Suite Most Popular JSF 2.0 Library 100+ components (Everything you need) Lightweight: one jar, no dependencies, zero-cong Skinning support with 25+ themes and theme creator Extensive documentation Huge and active community jQuery based Mobile UI Kit: TouchFaces Ajax Push support Open Source (Apache License)

Setup
No setup required, drop the jar and add the namespace; xmlns:p=http://primefaces.prime.com.tr/ui

<p:editor />

PrimeFaces UI

PrimeFaces Ajax
Based on standard JSF 2.0 Ajax APIs Extensions; p:ajax callbacks p:ajaxStatus jquery based client side api implementation

Callbacks
p:ajax onstart oncomplete onsuccess onerror f:ajax onevent onerror

AjaxStatus
Declarative
<p:ajaxStatus> <f:facet name=start> <p:graphicImage value=loading.gif /> </f:facet> <f:facet name=complete> <p:graphicImage value=loading.gif /> </f:facet> </p:ajaxStatus>

Programmatic
<p:ajaxStatus onstart=alert(Starting) oncomplete=alert(Completed)>

Global/Non-Global
<p:commandButton value=Submit global=true|false

Callback Params
Pass data from server to client as JSON Built-in callback param : validationFailed
public void save() { Request context = RequestContext.getCurrentInstance(); context.addCallbackParam(saved, true); }

<p:commandButton value=Submit oncomplete=handleComplete(xhr, status, args) actionListener=#{bean.save}/>

function handleComplete(xhr, status, args) { var saved = args.saved; }

Unobstrusive
JSF Page: Renders:
<p:schedule value=#{bean.mode} editable=true/> <div id=_gen></div> <script type=text/javascript> new PrimeFaces.widget.Schedule(_gen, {editable:true}); </script>

You get:

Progressive Enhancement
JSF Page: Renders:
<p:button value=Submit /> <button id=gen>Submit</button> <script type=text/javascript> new PrimeFaces.widget.Button(_gen); </script>

You get:

Themes
Integrated with ThemeRoller 25+ Built-in Themes Online ThemeCreator to create your own easily

Theme Gallery

How to Create Your Own

No need to know CSS Disable default skin
<context-param> <param-name>primefaces.skin</param-name> <param-value>none</param-value> </context-param>

See: http://vimeo.com/14235640

PrimeFaces Demo

Ajax Push
Powered by Atmosphere Framework Currently Proof-of-Concept (http-streaming) Future; WebSockets, Long-Polling, Http-Streaming

TouchFaces
Mobile UI components Optimized for webkit (eg IPhone, Android) Native looking webapps jqtouch based

TouchFaces Demo

Translate

Chat - Ajax Push

PathFinder - GPS

TwitFaces

Weather

Notes

News

Integration
Spring Core Spring WebFlow Seam CDI Portlets

Cloud Support
PrimeFaces and JSF 2.0 runs Google AppEngine Sample: http://code.google.com/p/primefaces/source/ browse/examples/trunk/appengine/ Demos; http://primefaces-gae-kickstart.appspot.com http://primefaces-rocks.appspot.com

IDE Support

Documentation
PrimeFaces Book (Commercial with 2.2) 400+ pages (for now) Component reference, examples, tips

Community Support
Huge community, 500 posts every week

Enterprise Support
Fast response times Priority forum access Custom component development http://www.primefaces.org/support.html

2.2 Trailer

PrimeFaces RoadMap
Maintenance of current codebase Rewritten Ajax Push via Atmosphere Client Side Validation New Components (e.g. TimeLine) Enhanced Components (e.g. Tree, TreeTable, PickList) Portlet samples (e.g. Liferay)

Trainings
Prime Technology Courses (onsite and online); JSF2 and PrimeFaces JSF2 - Spring - JPA (popular) JSF - Seam - JPA JSF2 - CDI- JPA (Java EE 6) and more www.prime.com.tr/training.html

Finale
http://www.primefaces.org cagatay.civici@prime.com.tr optimus.prime in PrimeFaces Forum