Primefaces Nextgen Lju

2,453 views
2,416 views

Published on

Talk on PrimeFaces: Next Generation JSF Component Suite, by Apache MyFaces committer and PMC member, Cagatay Civici.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • find webcast of this excellent Primefaces talk here:
    http://skillsmatter.com/podcast/java-jee/primefaces-next-generation-jsf-component-suite/wd-745
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,453
On SlideShare
0
From Embeds
0
Number of Embeds
268
Actions
Shares
0
Downloads
62
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Primefaces Nextgen Lju

  1. 1. PrimeFaces Next Generation Component Suite Cagatay Civici
  2. 2. Cagatay Civici • JSF Expert Group Member (JSR-314) • PrimeFaces Founder and Lead • Apache MyFaces PMC Member • Atmosphere Ajax Push/Comet Committer • Regular Speaker, Author, Technical Reviewer • Co-founder of Prime Technology
  3. 3. Prime Technology • Agile and Java EE Consulting • JSF, Spring, Seam, JPA • Trainings (e.g. PrimeFaces, JSF 2.0) • Outsource Development • Istanbul/Turkey based
  4. 4. What is this about? • PrimeFaces Component Suite • RIA • Ajax Push • TouchFaces • iPhone/Android/Palm • GPS Navigation • Mock OS X with JSF • Interested?
  5. 5. PrimeFaces • Next Generation Component Suite • Designed with JSF 2.0 in mind
  6. 6. History • 1+ year old • November 2008 - Start • January 2009 - First Release 0.8.0 • 10 releases so far • February 2010 - 1.0.0 and 2.0.0
  7. 7. 1.0.0 and 2.0.0
  8. 8. Design Principles • A good UI component should hide complexity but must keep flexibility • Page author must be in full control • Do not overuse JSF extensions • Avoid extensions that can cause race conditions • Avoid bringing overhead, keep it clean!
  9. 9. UI Components • 70+ Rich set of components • Ajax powered or Client side • YUI, jQuery and PrimeFaces widgets • Unobstrusive Javascript • Customizable and Easy to Use • Compatible with “others” • Skinning
  10. 10. Extreme UI with PrimeFaces
  11. 11. Simple Setup JSF 1.2 JSF 2.0 • ResourceServlet • ResourceServlet (Opt) • p:resources • Taglib • Taglib • Ready! • Ready!
  12. 12. ResourceServlet • Streaming and Caching (js, css, images) • Auto-Registered in Servlet 3.0 Environment <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org.primefaces.resource.ResourceServlet</servlet> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping>
  13. 13. p:resources for JSF 1.2 • Renders <link />, <script /> • No hacks to head • Not required in JSF 2.0 -> <h:head /> <head> <p:resources /> </head>
  14. 14. Ready! <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> ! </h:head> <h:body> ! <p:editor /> <h:body> </html>
  15. 15. Unobstrusive UI JSF Markup <p:schedule id=”calendar ” value=”#{bean.value}” editable=”true”/> HTML Markup <div id=”calendar”></div> <script type=”text/javascript”> new PrimeFaces.widget.Schedule(‘calendar’, {editable:true}); </script>
  16. 16. Output
  17. 17. Easy Ajax • Ajax without complexity • Partial Page Rendering • Flexible with Callbacks (e.g. onstart, oncomplete) • Ajax components (e.g. autoComplete) • Lightweight, No overhead
  18. 18. PPR - Hello World public class GreetingBean { private String name; //... } <h:form> <h:inputText value=”#{greetingBean.name}” /> <h:outputText id=”name” value=”Hi: #{greetingBean.name}” /> <p:commandButton value=”Ajax Submit” update=”name”/> </h:form>
  19. 19. p:ajax • f:ajax extension <h:inputText value=”#{greetingBean.name}”> <p:ajax event=”blur” update=”name” /> </h:inputText> <h:outputText id=”name” value=”Hi: #{greetingBean.name}” />
  20. 20. Defining Ids • Server id update=”text” • Client id update=”form:text” • Comma separated update=”text,panel” • White space separated update=”text panel” • Mix update=”form:text grid” • Keywords update=”@form”
  21. 21. Keywords • @this update=”@parent” • @parent • @form • @all • @none
  22. 22. Partial Processing • Decide what to process • process attribute • Ajax requests • Non-ajax requests process=”@this”
  23. 23. Partial Processing - Case 1 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:selectOneMenu id=”cities”> <p:ajax update=”cities” process=”@this” /> </h:selectOneMenu> <h:selectOneMenu id=”suburbs” /> </h:form>
  24. 24. Partial Processing - Case 2 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:outputText id=”selected” /> <p:dataTable id=”table”> <p:column> <p:commandLink update=”selected” process=”table” /> </p:column> </p:dataTable> </h:form>
  25. 25. Partial Processing - Case 3 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:commandButton action=”navigate” immediate=”true” /> </h:form> • Making immediate obsolete <h:form> <h:inputText id=”iamrequired” required=”true” /> <p:commandButton action=”navigate” process=”@this” /> </h:form>
  26. 26. Process vs Update Restore View Apply Request Process Validations Update Model Invoke App Update Render
  27. 27. Notifying Users • Declarative <p:ajaxStatus> ! ! <f:facet name="start"> ! ! ! <p:graphicImage value="fancyanimation.gif" /> ! ! </f:facet>! ! ! ! <f:facet name="complete"> ! ! ! <h:outputText value="Request Completed" /> ! ! </f:facet> </p:ajaxStatus> • Programmatic <p:ajaxStatus onstart=”alert(‘Started’)” oncomplete=”alert(‘done’)” />
  28. 28. Global vs Non-Global • To trigger p:ajaxStatus or not <p:ajaxStatus> ! ! <f:facet name="start"> ! ! ! <p:graphicImage value="fancyanimation.gif" /> ! ! </f:facet>! ! ! ! <f:facet name="complete"> ! ! ! <h:outputText value="Request Completed" /> ! ! </f:facet> </p:ajaxStatus> • Global (Default) <p:commandButton value=”Submit” / • Silent <p:commandButton value=”Submit” global=”false” /
  29. 29. Component specific callbacks • onstart • onsuccess • oncomplete • onerror <p:commandButton onstart=”return confirm(‘Sure’)” oncomplete=”alert(‘Done’);” />
  30. 30. Callback Arguments <p:commandButton value=”Submit” action=”#{bean.save}” oncomplete=”handleComplete(xhr, status, args)” /> public void save() { RequestContext context = RequestContext.getCurrentInstance(); context.addCallbackParam(“item”, item); } • From backing bean to ajax callbacks with JSON <script type=”text/javascript”> function handleComplete(xhr, status, args) { alert(args.item.name); } </script>
  31. 31. Ajax Remoting public class GreetingBean { private String name; //... public void toUpperCase() { name = name.toUpperCase(); } } • p:remoteCommand <p:remoteCommand name=”upperCase” actionListener=#{greetingBean.toUppterCase} /> <script type=”text/javascript”> upperCase(); </script>
  32. 32. PPR Summary No Need For • Simple Ajax Servlet Filter • Easy to Use Html Parser • Flexible • Responsive Ajax ViewHandler • Lightweight Ajax StateManager • Keep it clean Ajax Regions Ajax*
  33. 33. Component Suite Demo
  34. 34. TouchFaces • Mobile UI Kit • WebKit Browsers • IPhone, Android, Palm • Native IPhone UI • Integrated Ajax • Regular JSF • Powered by jqTouch
  35. 35. TouchFaces UI • <i:application /> • <i:view /> • <i:tableView /> • <i:rowGroup /> • <i:rowItem /> • <i:switch />
  36. 36. TouchFaces in Action Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News
  37. 37. TouchFaces Demo
  38. 38. Ajax Push/Comet • Built on top of Atmosphere • <p:push /> • CometContext.publish(...)
  39. 39. Atmosphere Framework • Portable Comet Framework • Write Once, Deploy Anywhere • Rest support • Servlet 3.0 support • JSF Integration: PrimeFaces
  40. 40. Ajax Push/Comet
  41. 41. Chat App in a Minute public class ChatController { private String message; public void send(ActionEvent event) { CometContext.publish(“chat”, message); } //getters setters } <h:form> <h:inputText value=”#{chatController.message}” /> <p:commandButton value=”Send” actionListener=”#{chatController.send}” /> </h:form> <p:outputPanel id=”display” /> <p:push channel=”chat” onpublish=”handlePublish” /> <script type=”text/javascript”> function handlePublish(pushed) { ! $('#display').append(pushed.data); } </script>
  42. 42. Pushing as JSON Player player = new Player(); player.setName(“Messi”); player.setAge(22); CometContext.publish(player); function handlePublish(pushed) { //pushed.data.name; //pushed.data.age; }
  43. 43. Extensions: FacesTrace • Trace/Debug tool • Lifecycle visualizer • Performance Tracker • Visual component tree
  44. 44. FacesTrace Demo
  45. 45. Integrate With • Spring • Spring Webflow • Seam • CDI • Portlets • See svn/examples
  46. 46. Documentation • User’s Guide - 350 pages • Wiki • Screencasts • API & TLD Docs • Third party articles/blogs
  47. 47. Community Support • http://primefaces.prime.com.tr/forum
  48. 48. Enterprise Support • 2/4 hour average response time • Priority forum access • Ticket based portal • IM support over skype • JSF specific help • Special Case Support
  49. 49. Community • Strong community feedback • 500 posts per week in forum • Join us!
  50. 50. Coming Soon TreeTable ContextMenu ProgressBar and more.......
  51. 51. Finale • cagatay.civici@prime.com.tr • Twitter: @cagataycivici, @primefaces • Facebook Group: 206606616332 • Blog: http://cagataycivici.wordpress.com • HomePage: http://www.primefaces.org • Atmosphere: http://atmosphere.dev.java.net
  52. 52. Questions

×