Primefaces Confess 2012
- 2. Çagatay Çivici • JSF Expert Group Member (JSR-314, JSR-344) • PrimeFaces Lead • Apache MyFaces PMC • Speaker, Author, Reviewer • Co-Founder of Prime Teknoloji
- 3. Prime Teknoloji • Specialized in Java EE and Agile • Consulting • Training • Delivery • Offices in Istanbul and Ankara • www.prime.com.tr
- 5. 3 Years Old
- 6. Lightweight
- 7. Easy to Use
- 8. Only 1 Jar 1.7~ mb
- 10. Zero Config
- 11. Who Uses?
- 12. In The Wild
- 13. Popularity
- 14. Global Colombia
- 16. Advanced UIs
- 17. Form Components
- 18. Hide Complexity CSS JS AJAX Keep Flexibility <p:tabView onTabChange=”handleTabChange()”> <p:ajax event=”change” listener=”#{bean.onTabChange}” update=”comp” /> //tabs </p:tabView> CSS JS Client Ajax Override API Callbacks Callbacks
- 19. Anatomy of a Component Page <p:schedule id=”sch” value=”#{bean.model}” editable=”true” /> Markup <div id=”sch”></div> <script type=”text/javascript”> Script PrimeFaces.cw(‘Schedule’,’widgetVar’, {id:’sch’, editable:true}); </script>
- 21. HTML5 data-* canvas websockets forms media
- 22. PrimeFaces Ajax Server APIs: Standard JSF 2 Client APIs:
- 23. Ajax Extensions p:ajax autoUpdate Callbacks Selectors AjaxStatus RequestContext partialSubmit
- 24. p:ajax f:ajax oncomplete onevent onerror onerror onstart onsuccess async global
- 25. AjaxStatus <p:ajaxStatus> <f:facet name=”start”> <p:graphicImage value=”fancyanimation.gif” /> </f:facet> Declarative <f:facet name=”complete”> <h:outputText value=”Request Completed” /> </f:facet> </p:ajaxStatus> Programmatic <p:ajaxStatus onstart=”dialog.show()” oncomplete=”dialog.hide()” /> Global <p:commandButton global=”true|false” />
- 26. RequestContext - Scripts <p:commandButton value=”Submit” action=”#{bean.save}” /> Page <p:dialog widgetVar=”dialogWidget” ... /> public void save() { RequestContext rc = RequestContext.getCurrentInstance(); Bean rc.execute(“dialogWidget.hide()”); }
- 27. RequestContext - Update <p:commandButton value=”Submit” action=”#{bean.save}” /> Page <h:outputText id=”val” value=”#{bean.property}” /> public void save() { Bean RequestContext rc = RequestContext.getCurrentInstance(); rc.addPartialUpdateTarget(“val”); } or <p:commandButton value=”Submit” action=”#{bean.save}” update=”val” /> <h:outputText id=”val” value=”#{bean.property}” />
- 28. RequestContext - Scroll <p:commandButton value=”Submit” action=”#{bean.save}” /> Page <h:outputText id=”val” value=”#{bean.property}” /> public void save() { Bean RequestContext rc = RequestContext.getCurrentInstance(); rc.scrollTo(“val”); }
- 29. AutoUpdate <p:growl id=”messages” /> <p:commandButton value=”Save” update=”messages” /> <p:commandButton value=”Update” update=”messages” /> <p:commandButton value=”Delete” update=”messages” /> becomes <p:growl id=”messages” autoUpdate=”true”/> <p:commandButton value=”Save” /> <p:commandButton value=”Update” /> <p:commandButton value=”Delete” />
- 30. PartialSubmit False True Post Post Data:javax.faces.partial.ajax=true&javax.faces.source=fo Data:javax.faces.partial.ajax=true&javax.faces.source=for rm%3Aj_idt18&javax.faces.partial.execute=form m%3Aj_idt18&javax.faces.partial.execute=form %3Aname&javax.faces.partial.render=form %3Aname&javax.faces.partial.render=form %3Adisplay&form%3Aj_idt18=form %3Adisplay&form%3Aj_idt18=form %3Aj_idt18&form=form&form%3Aname=&form %3Aj_idt18&form=form&form %3Aj_idt20=&form%3Aj_idt22=&form%3Aj_idt24=&form %3Aname=&javax.faces.ViewState=7916482521909421 %3Aj_idt26=&form%3Aj_idt28=&form%3Aj_idt30=&form 983%3A-2156051337299048496 %3Aj_idt32=&form%3Aj_idt34=&form%3Aj_idt36=&form %3Aj_idt38=&form%3Aj_idt40=&form%3Aj_idt42=&form %3Aj_idt44=&form%3Aj_idt46=&form%3Aj_idt48=&form %3Aj_idt50=&form%3Aj_idt52=&form%3Aj_idt66=&form %3Aj_idt68=&form%3Aj_idt70=&form%3Aj_idt72=&form %3Aj_idt74=&form%3Aj_idt76=&form%3Aj_idt78=&form %3Aj_idt80=&form%3Aj_idt82=&form%3Aj_idt84=&form %3Aj_idt86=&form%3Aj_idt88=&form%3Aj_idt90=&form %3Aj_idt92=&form%3Aj_idt94=&form%3Aj_idt96=&form %3Aj_idt98=&javax.faces.ViewState=79164825219094 21983%3A-2156051337299048496
- 31. PrimeFaces Selectors (PFS) update=”@(form)” update=”@(form.first)” update=”@(.mystyle)” update=”@(.ui-datatable)” update=”@(:input:not(select))” update=”@(:input:disabled))”
- 32. ResourceHandling On The Fly Optimizations and Loading Minify Merge Compress
- 33. Demo
- 34. Themes
- 35. Install a Theme Add primefaces-{themename}.jar Configure <context-param> <param-name>primefaces.THEME</param-name> <param-value>{themename}</param-value> </context-param>
- 36. Roll Your Own
- 37. Advanced Themes
- 38. Demo
- 40. PrimeFaces Mobile <pm:page title="TwitFaces"> <pm:view id="main" swatch="b"> <pm:header title="TwitFaces"> </pm:header> <pm:content> <h:form id="twitForm"> <h:outputText value="Account: " /> <h:inputText value="#{twitterController.username}" /> <p:separator /> <p:commandButton value="Get Tweets" icon="refresh" update="tweetList" actionListener="#{twitterController.loadTweets}" /> <p:dataList id="tweetList" value="#{twitterController.tweets}" var="tweet"> #{tweet} </p:dataList> </h:form> </pm:content> </pm:view> </pm:page>
- 41. PrimeFaces Mobile powered by
- 42. Demo
- 43. PrimeFaces Push WebSockets
- 44. PrimeFaces Push PushServer JSF APP (Jetty) 1 2 3 4 4 4 4 4
- 45. PrimeFaces Push Page <p:push channel=”chat” onmessage=”handleMessage” /> public void send() { RequestContext rc = RequestContext.getCurrentInstance(); Bean rc.push(“chat”, “Hello everyone!”); } Callback <script type=”text/javascript”> function handleMessage(event, data) { //data -> “Hello everyone!” } </script>
- 46. Demo
- 48. Portlets Sample: /svn/examples/trunk/prime-portlet
- 49. On The Cloud http://primefaces-rocks.appspot.com http://primefaces-gae-kickstart.appspot.com
- 50. Documentation 450+ Pages
- 51. Community 2000 posts / month
- 53. Enterprise Support Training Consulting
- 54. Scaffolding
- 55. Roadmap • Current 3.2 • Next 3.3 • Keep on 3.x • PrimeFaces Cookbook • De-Facto Standard
- 56. The End contact@prime.com.tr @primefaces 206606616332 http://blog.primefaces.org