Your SlideShare is downloading. ×
In The Brain of Cagatay Civici: Exploring JavaServer Faces 2.0 and PrimeFaces
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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


Published on

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

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

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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></managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> package; 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></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></managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean> package; 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) <managed-bean> <managed-bean-name>itemView</managed-bean-name> <managed-bean-class></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) <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=”” <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=”#{}”/> 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></param-name> <param-value>none</param-value> </context-param> See:
  • 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
  • 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
  • 73. Finale in PrimeFaces Forum