Primefaces Confess 2012

22,394 views

Published on

PrimeFaces Session at Confess 2012

Published in: Technology, Art & Photos
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
22,394
On SlideShare
0
From Embeds
0
Number of Embeds
18,855
Actions
Shares
0
Downloads
102
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Primefaces Confess 2012

  1. 1. Çagatay Çivici
  2. 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. 3. Prime Teknoloji• Specialized in Java EE and Agile• Consulting• Training• Delivery• Offices in Istanbul and Ankara• www.prime.com.tr
  4. 4. 3 Years Old
  5. 5. Lightweight
  6. 6. Easy to Use
  7. 7. Only 1 Jar1.7~ mb
  8. 8. No RequiredDependencies
  9. 9. Zero Config
  10. 10. Who Uses?
  11. 11. In The Wild
  12. 12. Popularity
  13. 13. GlobalColombia
  14. 14. 100+ UI Components
  15. 15. Advanced UIs
  16. 16. Form Components
  17. 17. 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 AjaxOverride API Callbacks Callbacks
  18. 18. Anatomy of a ComponentPage <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>
  19. 19. AccessibilityKeyboard/MouseARIA Attributes
  20. 20. HTML5 data-*canvas websockets forms media
  21. 21. PrimeFaces AjaxServer APIs: Standard JSF 2Client APIs:
  22. 22. Ajax Extensions p:ajaxautoUpdate Callbacks SelectorsAjaxStatus RequestContext partialSubmit
  23. 23. p:ajax f:ajaxoncomplete onevent onerror onerror onstartonsuccess async global
  24. 24. 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” />
  25. 25. 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()”); }
  26. 26. 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}” />
  27. 27. 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”); }
  28. 28. 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” />
  29. 29. PartialSubmit False True Post PostData:javax.faces.partial.ajax=true&javax.faces.source=fo Data:javax.faces.partial.ajax=true&javax.faces.source=forrm%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=7916482521909421983%3A-2156051337299048496
  30. 30. PrimeFaces Selectors (PFS) update=”@(form)” update=”@(form.first)” update=”@(.mystyle)” update=”@(.ui-datatable)” update=”@(:input:not(select))” update=”@(:input:disabled))”
  31. 31. ResourceHandling On The Fly Optimizations and LoadingMinify Merge Compress
  32. 32. Demo
  33. 33. Themes
  34. 34. Install a Theme Add primefaces-{themename}.jar Configure <context-param> <param-name>primefaces.THEME</param-name> <param-value>{themename}</param-value> </context-param>
  35. 35. Roll Your Own
  36. 36. Advanced Themes
  37. 37. Demo
  38. 38. PrimeFaces Mobile
  39. 39. 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>
  40. 40. PrimeFaces Mobile powered by
  41. 41. Demo
  42. 42. PrimeFaces Push WebSockets
  43. 43. PrimeFaces Push PushServer JSF APP (Jetty) 1 2 3 4 4 4 4 4
  44. 44. 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>
  45. 45. Demo
  46. 46. Back to Atmosphere?
  47. 47. Portlets Sample: /svn/examples/trunk/prime-portlet
  48. 48. On The Cloud http://primefaces-rocks.appspot.com http://primefaces-gae-kickstart.appspot.com
  49. 49. Documentation 450+ Pages
  50. 50. Community 2000 posts / month
  51. 51. Bundled with NetBeans
  52. 52. Enterprise Support Training Consulting
  53. 53. Scaffolding
  54. 54. Roadmap• Current 3.2• Next 3.3• Keep on 3.x• PrimeFaces Cookbook• De-Facto Standard
  55. 55. The End contact@prime.com.tr @primefaces 206606616332 http://blog.primefaces.org

×