• Like
Primefaces Confess 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Primefaces Confess 2012

  • 21,525 views
Published

PrimeFaces Session at Confess 2012

PrimeFaces Session at Confess 2012

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
21,525
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
99
Comments
2
Likes
2

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. Çagatay Çivici
  • 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
  • 4. 3 Years Old
  • 5. Lightweight
  • 6. Easy to Use
  • 7. Only 1 Jar1.7~ mb
  • 8. No RequiredDependencies
  • 9. Zero Config
  • 10. Who Uses?
  • 11. In The Wild
  • 12. Popularity
  • 13. GlobalColombia
  • 14. 100+ UI Components
  • 15. Advanced UIs
  • 16. Form Components
  • 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. 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. AccessibilityKeyboard/MouseARIA Attributes
  • 20. HTML5 data-*canvas websockets forms media
  • 21. PrimeFaces AjaxServer APIs: Standard JSF 2Client APIs:
  • 22. Ajax Extensions p:ajaxautoUpdate Callbacks SelectorsAjaxStatus RequestContext partialSubmit
  • 23. p:ajax f:ajaxoncomplete onevent onerror onerror onstartonsuccess async global
  • 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. 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. 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. 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. 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. 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. PrimeFaces Selectors (PFS) update=”@(form)” update=”@(form.first)” update=”@(.mystyle)” update=”@(.ui-datatable)” update=”@(:input:not(select))” update=”@(:input:disabled))”
  • 31. ResourceHandling On The Fly Optimizations and LoadingMinify Merge Compress
  • 32. Demo
  • 33. Themes
  • 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. Roll Your Own
  • 36. Advanced Themes
  • 37. Demo
  • 38. PrimeFaces Mobile
  • 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. PrimeFaces Mobile powered by
  • 41. Demo
  • 42. PrimeFaces Push WebSockets
  • 43. PrimeFaces Push PushServer JSF APP (Jetty) 1 2 3 4 4 4 4 4
  • 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. Demo
  • 46. Back to Atmosphere?
  • 47. Portlets Sample: /svn/examples/trunk/prime-portlet
  • 48. On The Cloud http://primefaces-rocks.appspot.com http://primefaces-gae-kickstart.appspot.com
  • 49. Documentation 450+ Pages
  • 50. Community 2000 posts / month
  • 51. Bundled with NetBeans
  • 52. Enterprise Support Training Consulting
  • 53. Scaffolding
  • 54. Roadmap• Current 3.2• Next 3.3• Keep on 3.x• PrimeFaces Cookbook• De-Facto Standard
  • 55. The End contact@prime.com.tr @primefaces 206606616332 http://blog.primefaces.org