Primefaces Nextgen Lju
1 like2,016 views
PrimeFaces is a next generation JavaServer Faces (JSF) component suite that provides 70+ rich UI components and features like Ajax push technology. It was created by Cagatay Civici in 2008 and is now used by thousands of developers worldwide. Some key features include easy Ajax implementation, unobtrusive JavaScript, mobile frameworks like TouchFaces, and integration with technologies like Spring and Portlets. The documentation and community support resources make it easy for developers to learn and use PrimeFaces in their projects.
Primefaces Nextgen Lju
- 1. PrimeFaces Next Generation Component Suite Cagatay Civici
- 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. Prime Technology • Agile and Java EE Consulting • JSF, Spring, Seam, JPA • Trainings (e.g. PrimeFaces, JSF 2.0) • Outsource Development • Istanbul/Turkey based
- 4. What is this about? • PrimeFaces Component Suite • RIA • Ajax Push • TouchFaces • iPhone/Android/Palm • GPS Navigation • Mock OS X with JSF • Interested?
- 5. PrimeFaces • Next Generation Component Suite • Designed with JSF 2.0 in mind
- 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
- 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. 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. Extreme UI with PrimeFaces
- 11. Simple Setup JSF 1.2 JSF 2.0 • ResourceServlet • ResourceServlet (Opt) • p:resources • Taglib • Taglib • Ready! • Ready!
- 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. 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. 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. 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. Output
- 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. 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. 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. 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. Keywords • @this update=”@parent” • @parent • @form • @all • @none
- 22. Partial Processing • Decide what to process • process attribute • Ajax requests • Non-ajax requests process=”@this”
- 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. 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. 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. Process vs Update Restore View Apply Request Process Validations Update Model Invoke App Update Render
- 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. 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. Component specific callbacks • onstart • onsuccess • oncomplete • onerror <p:commandButton onstart=”return confirm(‘Sure’)” oncomplete=”alert(‘Done’);” />
- 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. 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. 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*
- 34. TouchFaces • Mobile UI Kit • WebKit Browsers • IPhone, Android, Palm • Native IPhone UI • Integrated Ajax • Regular JSF • Powered by jqTouch
- 35. TouchFaces UI • <i:application /> • <i:view /> • <i:tableView /> • <i:rowGroup /> • <i:rowItem /> • <i:switch />
- 36. TouchFaces in Action Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News
- 37. TouchFaces Demo
- 38. Ajax Push/Comet • Built on top of Atmosphere • <p:push /> • CometContext.publish(...)
- 39. Atmosphere Framework • Portable Comet Framework • Write Once, Deploy Anywhere • Rest support • Servlet 3.0 support • JSF Integration: PrimeFaces
- 40. Ajax Push/Comet
- 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. 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. Extensions: FacesTrace • Trace/Debug tool • Lifecycle visualizer • Performance Tracker • Visual component tree
- 44. FacesTrace Demo
- 45. Integrate With • Spring • Spring Webflow • Seam • CDI • Portlets • See svn/examples
- 46. Documentation • User’s Guide - 350 pages • Wiki • Screencasts • API & TLD Docs • Third party articles/blogs
- 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. Community • Strong community feedback • 500 posts per week in forum • Join us!
- 50. Coming Soon TreeTable ContextMenu ProgressBar and more.......
- 51. Finale • [email protected] • Twitter: @cagataycivici, @primefaces • Facebook Group: 206606616332 • Blog: http://cagataycivici.wordpress.com • HomePage: http://www.primefaces.org • Atmosphere: http://atmosphere.dev.java.net
- 52. Questions