Your SlideShare is downloading. ×
0
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Primefaces Nextgen Lju
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Primefaces Nextgen Lju

2,374

Published on

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

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,374
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 7. 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*
  • 33. Component Suite Demo
  • 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
  • 47. Community Support • http://primefaces.prime.com.tr/forum
  • 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 • 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. Questions

×