In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces

1. EXPLORING JSF 2.0
AND
PRIMEFACES
Cagatay Civici
PRIME
TECHNOLOGY

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

3. Topics
JSF Overview
What’s New in JSF 2.0?
Go beyond with PrimeFaces

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

5. History
JSR 127 - JSF 1
JSR 252 - JSF 1.2
JSR-314 - JSF 2.0 <- Coolest one

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

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

8. JSP with JSF
Mismatch
JSP tags create JSF components
Content vs Component
Two different lifecycles

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

10. AJAX and JSF 1.x
Good match (Partial Output)
Wheel reinvented by;
IceFaces PrimeFaces Trinidad Tomahawk
RichFaces OpenFaces ADF Faces *Faces
Compatibility issues

11. AJAX and JSF 2.0
Now Standard!
New APIs;
Server: PartialViewContext
Client: jsf.ajax.AjaxRequest
New tag;
<f:ajax />

12. AJAX and JSF 2.0
PartialViewContext API
Partial Processing (execute)
Partial Rendering (render)
Standard request parameters

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

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

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

16. Managed Beans with JSF 2.0
NO XML
@ManagedBean
public class ItemView {
}

17. 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
}

18. 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
}

19. Scopes
@RequestScoped
@ViewScoped
@SessionScoped
@CustomScoped
Flash scope

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

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

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

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

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

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

26. Navigations
Implicit Navigation
Configurable NavigationHandler

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

28. Navigations with JSF 2.0
NO XML
public String buttonClick() {
return “target”;
}
source.xhtml target.xhtml

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

30. GET Support with JSF 1.x
Assigned when bean is used for first 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>

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

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

33. 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
}

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

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

36. 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()

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

38. State Saving in JSF 1.x
Full Component Tree saved/restored
Attributes saved/restored
Performance/Memory issues
Burden for component developer

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

40. Resource Loading with JSF 1.x
Loading bundles resources from jar
Custom Servlet or Filter required

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

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

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

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

45. Resources in CSS
#{resource} variable
.header {
background:url(“#{resource[‘mylib:header.png’]}”);
}
Generates;
.header {
background:url(“/myapp/javax.faces.resource/header.png?ln=mylib”);
}

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

47. UI Components
Standard JSF Components (button, radio, checkbox)
Third Party Suites (e.g. PrimeFaces)
But how to build
your own?

48. Custom Components
with JSF 1.x
5 different artifacts required
faces-config.xml config
jsp tld config
<component /> <renderer/ >
JSP Tag Class Component Class
Renderer Class

49. Custom Components
with JSF 2.0
One .xhtml file is enough
component.xhtml

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

51. PRIMEFACES
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)

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

53. PrimeFaces UI

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

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

56. 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;
}

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

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

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

60. Theme Gallery

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

62. PrimeFaces Demo

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

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

65. TouchFaces Demo
Translate Chat - Ajax Push PathFinder - GPS TwitFaces
Weather Notes News

66. Integration
Spring Core
Spring WebFlow
Seam
CDI
Portlets

67. IDE Support

68. Documentation
400+ pages (for now)
Component reference, examples, tips

69. Community Support
Huge community, 500 posts every week

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

71. 2.2 Trailer

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

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