EXPLORING JSF 2.0AND

PRIMEFACES

Cagatay Civici

PRIMETECHNOLOGY

Cagatay Civici

JSF EG (Expert Group) Member

PrimeFaces Lead

Apache MyFaces PMC

Speaker, Author, Reviewer

Consultant and Trainer for Prime Technology

Topics

JSF Overview

What’s New in JSF 2.0?

Go beyond with PrimeFaces

JSF Overview

Standard for Java EE

Component Oriented

Event Driven

RenderKits (web, mobile ...)

HistoryRoots 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

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

Powered by Community Feedback

JSP with JSF

Mismatch

JSP tags create JSF components

Content vs Component

Two different 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;

Compatibility issues

PrimeFaces

RichFaces

IceFaces

OpenFaces

Trinidad

ADF Faces *Faces

Tomahawk

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:ajaxAjax 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-config.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

@ManagedBean(name=”itemService”) @ApplicationScoped public class ItemServiceImpl implements ItemService {

}

NO XML

@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

#{flash}

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)

Configure via xml or @ListenerFor

Application.subscribeToEvent(event, listener);

UIComponent.subscribeToEvent(event, listener);

Navigations

Implicit Navigation

Configurable 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

public String buttonClick() {return “target”;

}

source.xhtml target.xhtml

NO XML

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 first time

No validation/conversion support

No post assignment listener (init view)

<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>

http://www.site.com/itemView.jsf?itemId=10

GET Support with JSF 2.0

Introducing ViewParameters

Validation/conversion support

Post assignment listener (init view)

<f:view><f:metadata>

<f:viewParam name=”itemId” value=”#{itemView.itemId}” /></f:metadata>

</f:view>

http://www.site.com/itemView.jsf?itemId=10

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

Manual URL generation

No support for;

context-path

navigation-rules

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

</h:outputLink>

GET Support with JSF 2.0

<h:button /> and <h:link />

Auto generated Bookmarkable URLs

Integrated with Navigation Rules

<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>

Project Stage

Runtime hint

Mostly for use of implementation and extensions

Development, Production, SystemTest, UnitTest

Application.getProjectStage()

<context-param><param-name>javax.faces.PROJECT_STAGE</param-name><param-value>Development</param-value>

</context-param>

Behaviors

Attaching behaviors

One built-in client behavior, f:ajax

<h:commandButton value=”Submit” onclick=”return confirm(‘Sure?’)”/>

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

</h:commandButton>

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.xLoading 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 />

UIViewRoot.addComponentResource API

@ResourceDependency(name=”cool.js”, library=”mycoollib”, target=”head”)public class MyCoolComponent extends UIComponent {}

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

Generates;

.header {background:url(“#{resource[‘mylib:header.png’]}”);

}

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

}

Bean ValidationJSR-303 Integration

Reuse constraints@NotNull

@Size(min=5, max=10) private String title;

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

</h:inputText/>

instead of

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

UI ComponentsStandard JSF Components (button, radio, checkbox)

Third Party Suites (e.g. PrimeFaces)

But how to build your own?

Custom Components with JSF 1.x

5 different artifacts required

faces-config.xml config<component /> <renderer/ > jsp tld config

JSP Tag Class Component Class

Renderer Class

Custom Components with JSF 2.0

One .xhtml file is enough

component.xhtml

DatePicker Demo

<prime:datePicker />

/webroot/resources/prime/datepicker.xhtml

/webroot/resources/jquery/...

Next Generation Component Suite

Most Popular JSF 2.0 Library

100+ components (Everything you need)

Lightweight: one jar, no dependencies, zero-config

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)

PRIMEFACES

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

onstart

oncomplete

onsuccess

onerror

p:ajax f:ajaxonevent

onerror

AjaxStatusDeclarative

Programmatic

Global/Non-Global

<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>

<p:ajaxStatus onstart=”alert(‘Starting’)” oncomplete=”alert(‘Completed’)”>

<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<p:schedule value=”#{bean.mode}” editable=”true”/>

<div id=”_gen”></div>

<script type=”text/javascript”>new PrimeFaces.widget.Schedule(‘_gen’, {editable:true});

</script>

JSF Page:

Renders:

You get:

Progressive Enhancement<p:button value=”Submit” />

<button id=”gen”>Submit</button> <script type=”text/javascript”>

new PrimeFaces.widget.Button(‘_gen’); </script>

JSF Page:

Renders:

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

See: http://vimeo.com/14235640

<context-param><param-name>primefaces.skin</param-name><param-value>none</param-value>

</context-param>

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 SupportPrimeFaces 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 RoadMapMaintenance 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