Your SlideShare is downloading. ×
0
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 Tr...
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 ...)
History
JSR 127 - JSF 1
JSR 252 - JSF 1.2
JSR-314 - JSF 2.0 <- Coolest one
JSF Ecosytem
Apache Software Foundation (MyFaces, Trinidad, Tobago, Tomahawk, ExtVal...)

Oracle (ADF Faces - Mojarra Impl...
JSF 2.0 Highlights
         Powered by Community Feedback

Facelets/VDL                   • Navigations

AJAX             ...
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;
 IceFaces       PrimeFaces     Trinidad   Tomahawk

 Ric...
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=”disp...
No XML
faces-config.xml is not optional
Get rid of;
  <managed-bean />
  <navigaton-case />
  <component />, <renderer />
 ...
Managed Beans with JSF 1.x
<managed-bean>
 <managed-bean-name>itemView</managed-bean-name>
 <managed-bean-class>com.prime....
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...
Dependencies with JSF 2.0
                            NO XML
@ManagedBean(name=”itemService”)
@ApplicationScoped
public cl...
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 Even...
Application Events
Application wide events
  ExceptionQueuedEvent
  PostConstructApplicationEvent
  PreDestroyApplicationE...
Component Events
  View based events
     PostAddToViewEvent
     PreValidateEvent
     PreRenderViewEvent
     more...
<h...
Event Listeners
New API SystemEventListener
  isListenerForSource(Object source)
  processEvent(SystemEvent event)
Configur...
Navigations
Implicit Navigation
Configurable NavigationHandler
Navigations with JSF 1.x
<navigation-rule>
 <from-view-id>/source.xhtml</from-view-id>
 <navigation-case>
    <from-outcom...
Navigations with JSF 2.0

                            NO XML

public String buttonClick() {
    return “target”;
}




   ...
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 assignmen...
GET Support with JSF 2.0
 Introducing ViewParameters
 Validation/conversion support
 Post assignment listener (init view)
...
GET Support with JSF 2.0
  Validation/conversion support

<f:view>
 <f:metadata>
    <f:viewParam name=”itemId” value=”#{i...
GET Support with JSF 2.0
  Post mapping listener
<f:view>
 <f:metadata>
    <f:viewParam name=”itemId” value=”#{itemView.i...
GET Support with JSF 1.2
 GET component h:outputLink
 <h:outputLink value=”#{request.contextPath}”/itemView.jsf?itemId=10>...
GET Support with JSF 2.0
<h:button /> and <h:link />
<h:link outcome=”main” />


<h:button outcome=”main” includeViewParam...
Project Stage
Runtime hint
Mostly for use of implementation and extensions
  Development, Production, SystemTest, UnitTest...
Behaviors
Attaching behaviors

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


<h:commandButton valu...
State Saving in JSF 1.x
Full Component Tree saved/restored
Attributes saved/restored
Performance/Memory issues
Burden for ...
State Saving in JSF 2.0
Partial State Saving
Initial state is marked
Deltas are saved and helper
StateHelper API for devel...
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 comp...
Registering
   Resources located at;
      /webroot/resources/mylib
      /jar/META-INF/resources/mylib
  @ResourceDepende...
Relocating
   Resources placed at head or body
      <h:head />, <h:body />
  @ResourceDependency(name=”cool.js”, library=...
Resource Components
Load from webroot or jar
<h:outputStylesheet name=”cool.css” library=”mycoollib” />



<h:outputScript...
Resources in CSS
#{resource} variable
.header {
  background:url(“#{resource[‘mylib:header.png’]}”);
}




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


<h:inputText v...
UI Components
Standard JSF Components (button, radio, checkbox)
Third Party Suites (e.g. PrimeFaces)



         But how t...
Custom Components
             with JSF 1.x
5 different artifacts required

    faces-config.xml config
                     ...
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/...
PRIMEFACES
Next Generation Component Suite
Most Popular JSF 2.0 Library
100+ components (Everything you need)
Lightweight:...
Setup
No setup required, drop the jar and add the namespace;

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




    <p:...
PrimeFaces UI
PrimeFaces Ajax
Based on standard JSF 2.0 Ajax APIs
Extensions;
  p:ajax
  callbacks
  p:ajaxStatus
  jquery based client ...
Callbacks
p:ajax                    f:ajax
onstart                  onevent

oncomplete               onerror

onsuccess
o...
Callback Params
Pass data from server to client as JSON
Built-in callback param : “validationFailed”
     public void save...
Unobstrusive
JSF Page:   <p:schedule value=”#{bean.mode}” editable=”true”/>


            <div id=”_gen”></div>
          ...
Progressive Enhancement
JSF Page:   <p:button value=”Submit” />


            <button id=”gen”>Submit</button>
           ...
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...
PrimeFaces Demo
Ajax Push
Powered by Atmosphere Framework
Currently Proof-of-Concept (http-streaming)
Future;
  WebSockets, Long-Polling, ...
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...
Integration
Spring Core
Spring WebFlow
Seam
CDI
Portlets
IDE Support
Documentation
400+ pages (for now)
Component reference, examples, tips
Community Support
Huge community, 500 posts every week
Enterprise Support
Fast reponse times
Priority forum access
Custom component development



      http://www.primefaces.or...
2.2 Trailer
Trainings
Prime Technology Courses (onsite and online);
  JSF2 and PrimeFaces
  JSF2 - Spring - JPA (popular)
  JSF - Seam...
Finale
http://www.primefaces.org
cagatay.civici@prime.com.tr
optimus.prime in PrimeFaces Forum
Upcoming SlideShare
Loading in...5
×

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

6,843

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,843
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
150
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. EXPLORING JSF 2.0 AND PRIMEFACES Cagatay Civici PRIME TECHNOLOGY
  2. 2. Cagatay Civici JSF EG (Expert Group) Member PrimeFaces Lead Apache MyFaces PMC Speaker, Author, Reviewer Consultant and Trainer for Prime Technology
  3. 3. Topics JSF Overview What’s New in JSF 2.0? Go beyond with PrimeFaces
  4. 4. JSF Overview Standard for Java EE Component Oriented Event Driven RenderKits (web, mobile ...)
  5. 5. History JSR 127 - JSF 1 JSR 252 - JSF 1.2 JSR-314 - JSF 2.0 <- Coolest one
  6. 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. 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. 8. JSP with JSF Mismatch JSP tags create JSF components Content vs Component Two different lifecycles
  9. 9. Facelets / VDL XHTML based Optimized for JSF Templating New View Declaration Language API NOW STANDARD!
  10. 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. 11. AJAX and JSF 2.0 Now Standard! New APIs; Server: PartialViewContext Client: jsf.ajax.AjaxRequest New tag; <f:ajax />
  12. 12. AJAX and JSF 2.0 PartialViewContext API Partial Processing (execute) Partial Rendering (render) Standard request parameters
  13. 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. 14. No XML faces-config.xml is not optional Get rid of; <managed-bean /> <navigaton-case /> <component />, <renderer /> <converter />, <validator /> ...
  15. 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. 16. Managed Beans with JSF 2.0 NO XML @ManagedBean public class ItemView { }
  17. 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. 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. 19. Scopes @RequestScoped @ViewScoped @SessionScoped @CustomScoped Flash scope
  20. 20. View Scope Between request and session Lives for postbacks #{viewScope} UIViewRoot.getViewMap()
  21. 21. Flash Scope ROR concept Lives in subsequent request Survives redirect Post-Redirect-Get #{flash} ExternalContext.getFlash()
  22. 22. System Events Phaselisteners are not enough Subscribe to various events in lifecycle Application Events Component Events
  23. 23. Application Events Application wide events ExceptionQueuedEvent PostConstructApplicationEvent PreDestroyApplicationEvent more...
  24. 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. 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. 26. Navigations Implicit Navigation Configurable NavigationHandler
  27. 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. 28. Navigations with JSF 2.0 NO XML public String buttonClick() { return “target”; } source.xhtml target.xhtml
  29. 29. GET Support Navigate by GET View Metadata and View Parameters Bookmarkable URLs Post-Redirect-Get
  30. 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. 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. 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. 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. 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. 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. 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. 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. 38. State Saving in JSF 1.x Full Component Tree saved/restored Attributes saved/restored Performance/Memory issues Burden for component developer
  39. 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. 40. Resource Loading with JSF 1.x Loading bundles resources from jar Custom Servlet or Filter required
  41. 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. 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. 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. 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. 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. 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. 47. UI Components Standard JSF Components (button, radio, checkbox) Third Party Suites (e.g. PrimeFaces) But how to build your own?
  48. 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. 49. Custom Components with JSF 2.0 One .xhtml file is enough component.xhtml
  50. 50. DatePicker Demo <prime:datePicker /> /webroot/resources/prime/datepicker.xhtml /webroot/resources/jquery/...
  51. 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. 52. Setup No setup required, drop the jar and add the namespace; xmlns:p=”http://primefaces.prime.com.tr/ui” <p:editor />
  53. 53. PrimeFaces UI
  54. 54. PrimeFaces Ajax Based on standard JSF 2.0 Ajax APIs Extensions; p:ajax callbacks p:ajaxStatus jquery based client side api implementation
  55. 55. Callbacks p:ajax f:ajax onstart onevent oncomplete onerror onsuccess onerror
  56. 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. 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. 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. 59. Themes Integrated with ThemeRoller 25+ Built-in Themes Online ThemeCreator to create your own easily
  60. 60. Theme Gallery
  61. 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. 62. PrimeFaces Demo
  63. 63. Ajax Push Powered by Atmosphere Framework Currently Proof-of-Concept (http-streaming) Future; WebSockets, Long-Polling, Http-Streaming
  64. 64. TouchFaces Mobile UI components Optimized for webkit (eg IPhone, Android) Native looking webapps jqtouch based
  65. 65. TouchFaces Demo Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News
  66. 66. Integration Spring Core Spring WebFlow Seam CDI Portlets
  67. 67. IDE Support
  68. 68. Documentation 400+ pages (for now) Component reference, examples, tips
  69. 69. Community Support Huge community, 500 posts every week
  70. 70. Enterprise Support Fast reponse times Priority forum access Custom component development http://www.primefaces.org/support.html
  71. 71. 2.2 Trailer
  72. 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. 73. Finale http://www.primefaces.org cagatay.civici@prime.com.tr optimus.prime in PrimeFaces Forum
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×