exploring jsf 2.0 and primefaces - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf ·...

76
EXPLORING JSF 2.0 AND PRIMEFACES Cagatay Civici PRIME TECHNOLOGY

Upload: vannga

Post on 24-Jul-2018

227 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

EXPLORING JSF 2.0AND

PRIMEFACES

Cagatay Civici

PRIMETECHNOLOGY

Page 2: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Cagatay Civici

JSF EG (Expert Group) Member

PrimeFaces Lead

Apache MyFaces PMC

Speaker, Author, Reviewer

Consultant and Trainer for Prime Technology

Page 3: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Topics

JSF Overview

What’s New in JSF 2.0?

Go beyond with PrimeFaces

Page 4: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

JSF Overview

Standard for Java EE

Component Oriented

Event Driven

RenderKits (web, mobile ...)

Page 5: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 6: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 7: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 8: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

JSP with JSF

Mismatch

JSP tags create JSF components

Content vs Component

Two different lifecycles

Page 9: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Facelets / VDL

XHTML based

Optimized for JSF

Templating

New View Declaration Language API

NOW STANDARD!

Page 10: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

AJAX and JSF 1.x

Good match (Partial Output)

Wheel reinvented by;

Compatibility issues

PrimeFaces

RichFaces

IceFaces

OpenFaces

Trinidad

ADF Faces *Faces

Tomahawk

Page 11: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

AJAX and JSF 2.0

Now Standard!

New APIs;

Server: PartialViewContext

Client: jsf.ajax.AjaxRequest

New tag;

<f:ajax />

Page 12: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

AJAX and JSF 2.0

PartialViewContext API

Partial Processing (execute)

Partial Rendering (render)

Standard request parameters

Page 13: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 14: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

No XML

faces-config.xml is not optional

Get rid of;

<managed-bean />

<navigaton-case />

<component />, <renderer />

<converter />, <validator />

...

Page 15: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 16: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Managed Beans with JSF 2.0

NO XML

@ManagedBean public class ItemView { }

Page 17: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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 }

Page 18: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

}

Page 19: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Scopes

@RequestScoped

@ViewScoped

@SessionScoped

@CustomScoped

Flash scope

Page 20: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

View Scope

Between request and session

Lives for postbacks

#{viewScope}

UIViewRoot.getViewMap()

Page 21: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Flash Scope

ROR concept

Lives in subsequent request

Survives redirect

Post-Redirect-Get

#{flash}

ExternalContext.getFlash()

Page 22: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

System Events

Phaselisteners are not enough

Subscribe to various events in lifecycle

Application Events

Component Events

Page 23: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Application Events

Application wide events

ExceptionQueuedEvent

PostConstructApplicationEvent

PreDestroyApplicationEvent

more...

Page 24: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Component Events

View based events

PostAddToViewEvent

PreValidateEvent

PreRenderViewEvent

more...<h:inputText value=”#{bean.value}”><f:event type=”preValidate” listener=”#{bean.preValidate}” />

</h:inputText>

Page 25: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Event Listeners

New API SystemEventListener

isListenerForSource(Object source)

processEvent(SystemEvent event)

Configure via xml or @ListenerFor

Application.subscribeToEvent(event, listener);

UIComponent.subscribeToEvent(event, listener);

Page 26: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Navigations

Implicit Navigation

Configurable NavigationHandler

Page 27: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 28: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Navigations with JSF 2.0

public String buttonClick() {return “target”;

}

source.xhtml target.xhtml

NO XML

Page 29: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

GET Support

Navigate by GET

View Metadata and View Parameters

Bookmarkable URLs

Post-Redirect-Get

Page 30: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 31: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 32: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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>

Page 33: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

}

Page 34: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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>

Page 35: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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>

Page 36: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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>

Page 37: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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>

Page 38: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

State Saving in JSF 1.x

Full Component Tree saved/restored

Attributes saved/restored

Performance/Memory issues

Burden for component developer

Page 39: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 40: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Resource Loading with JSF 1.xLoading bundles resources from jar

Custom Servlet or Filter required

Page 41: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Resource Loading with JSF 2.0

New Resource APIs for;

Registering

Relocating

Loading

locale, version support

New components

<h:outputStylesheet /> and <h:outputScript />

Page 42: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 43: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 44: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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’}”/>

Page 45: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Resources in CSS

#{resource} variable

Generates;

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

}

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

}

Page 46: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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}” />

Page 47: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

UI ComponentsStandard JSF Components (button, radio, checkbox)

Third Party Suites (e.g. PrimeFaces)

But how to build your own?

Page 48: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 49: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Custom Components with JSF 2.0

One .xhtml file is enough

component.xhtml

Page 50: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

DatePicker Demo

<prime:datePicker />

/webroot/resources/prime/datepicker.xhtml

/webroot/resources/jquery/...

Page 51: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 52: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Setup

No setup required, drop the jar and add the namespace;

xmlns:p=”http://primefaces.prime.com.tr/ui”

<p:editor />

Page 53: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

PrimeFaces UI

Page 54: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

PrimeFaces Ajax

Based on standard JSF 2.0 Ajax APIs

Extensions;

p:ajax

callbacks

p:ajaxStatus

jquery based client side api implementation

Page 55: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Callbacks

onstart

oncomplete

onsuccess

onerror

p:ajax f:ajaxonevent

onerror

Page 56: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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”

Page 57: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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;

}

Page 58: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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:

Page 59: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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:

Page 60: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Themes

Integrated with ThemeRoller

25+ Built-in Themes

Online ThemeCreator to create your own easily

Page 61: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Theme Gallery

Page 62: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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>

Page 63: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

PrimeFaces Demo

Page 64: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Ajax Push

Powered by Atmosphere Framework

Currently Proof-of-Concept (http-streaming)

Future;

WebSockets, Long-Polling, Http-Streaming

Page 65: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

TouchFaces

Mobile UI components

Optimized for webkit (eg IPhone, Android)

Native looking webapps

jqtouch based

Page 66: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

TouchFaces Demo

Translate Chat - Ajax Push PathFinder - GPS TwitFaces

Weather Notes News

Page 67: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Integration

Spring Core

Spring WebFlow

Seam

CDI

Portlets

Page 69: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

IDE Support

Page 70: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Documentation

PrimeFaces Book (Commercial with 2.2)

400+ pages (for now)

Component reference, examples, tips

Page 71: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Community Support

Huge community, 500 posts every week

Page 72: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Enterprise Support

Fast response times

Priority forum access

Custom component development

http://www.primefaces.org/support.html

Page 73: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

2.2 Trailer

Page 74: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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)

Page 75: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

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

Page 76: EXPLORING JSF 2.0 AND PRIMEFACES - grouassets00.grou.ps/.../exploringjsf2andprimefaces.pdf · PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer ... Custom Components with

Finale

http://www.primefaces.org

[email protected]

optimus.prime in PrimeFaces Forum