AnkaraJUG Kasım 2012 - PrimeFaces

2,077 views
1,865 views

Published on

PrimeFaces, JavaServer Faces icin gelistirllen ve dunya capinda populer olan zengin bir arayuz kutuphanesidir. Bu sunumda PrimeFaces Bilesenleri, Mobil, Ajax Push, Tema Destegi gibi modullerin yani sira PrimeFaces ekibinin gelistirdigi yeni jQuery javascript kutuphanesi PrimeUI'da tanitilmaktadir.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,077
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

AnkaraJUG Kasım 2012 - PrimeFaces

  1. 1. Çagatay Çivici
  2. 2. Çagatay Çivici JSF Expert Group Member (JSR-314, JSR-344) PrimeFaces Architect and Lead Developer Apache MyFaces PMC Speaker, Author, Reviewer Co-Founder of Prime Teknoloji Nickname: optimus.prime
  3. 3. Prime Teknoloji Java EE, OSS, Agile, Mobile, E-Commerce Consulting Training Delivery Offices in Istanbul and Ankara 34 Employees (Nov 2012) www.prime.com.tr
  4. 4. 4 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 PrimeFaces?
  11. 11. PrimeFaces in the Wild
  12. 12. Most Popular
  13. 13. Global
  14. 14. 100+ UI Components
  15. 15. Mock OS X
  16. 16. Form Components
  17. 17. Browser Support
  18. 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 AjaxOverride API Callbacks Callbacks
  19. 19. Anatomy of a Component JSF <p:schedule id=”sch” value=”#{bean.model}” editable=”true” />Markup <div id=”sch”></div> <script type=”text/javascript”> Script scheduleWidget = new PrimeFaces.widget.Schedule(‘sch’, {editable:true}); </script> You get:
  20. 20. AccessibilityKeyboard/MouseARIA Attributes
  21. 21. HTML5 data-*canvas websockets forms media
  22. 22. Ajax in PrimeFaces Server APIs: Standard JSF 2 Client APIs:
  23. 23. Ajax Extensions p:ajaxautoUpdate Callbacks SelectorsAjaxStatus RequestContext partialSubmit
  24. 24. p:ajax f:ajaxoncomplete onevent onerror onerror onstartonsuccess async global
  25. 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. 26. RequestContext - Params <p:commandButton value=”Submit” action=”#{bean.save}”JSF Page oncomplete=”handleComplete(xhr, status, args)” /> Bean public void save() { RequestContext rc = RequestContext.getCurrentInstance(); rc.addCallbackParam(“person”, person); }Callback <script type=”text/javascript”> function handleComplete(xhr, status, args) { alert(args.person.name); } </script>
  27. 27. RequestContext - Scripts <p:commandButton value=”Submit” action=”#{bean.save}” />JSF Page <p:dialog widgetVar=”dialogWidget” ... /> public void save() { Bean RequestContext rc = RequestContext.getCurrentInstance(); rc.execute(“dialogWidget.hide()”); }
  28. 28. RequestContext - Update <p:commandButton value=”Submit” action=”#{bean.save}” />JSF 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}” />
  29. 29. 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”); }
  30. 30. AutoUpdate <p:growl id=”messages” /> <p:commandButton value=”Save” update=”messages” /> <p:commandButton value=”Update” update=”messages” /> <p:commandButton value=”Delete” update=”messages” /> <p:growl id=”messages” autoUpdate=”true”/> <p:commandButton value=”Save” /> <p:commandButton value=”Update” /> <p:commandButton value=”Delete” />
  31. 31. 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
  32. 32. PrimeFaces Selectors (PFS) update=”@(form)” update=”@(form.first)” update=”@(.mystyle)” update=”@(.ui-datatable)” update=”@(:input:not(select))” update=”@(:input:disabled))”
  33. 33. ResourceHandling On The Fly Optimizations and LoadingMinify Merge Compress
  34. 34. Demo
  35. 35. Themes
  36. 36. Twitter Bootstrap Theme
  37. 37. Install a Theme Add primefaces-{themename}.jar Configure <context-param> <param-name>primefaces.THEME</param-name> <param-value>{themename}</param-value> </context-param>
  38. 38. Roll your own
  39. 39. Advanced Themes
  40. 40. Demo
  41. 41. PrimeFaces Mobile
  42. 42. 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>
  43. 43. PrimeFaces Mobile powered by
  44. 44. Demo
  45. 45. PrimeFaces Push Atmosphere
  46. 46. Demo
  47. 47. Javascript CSS Rest, Jax-RS, Php, Spring MVC ...
  48. 48. Pure JavaScript<input id=”spinner” type=”text” /> $(‘#spinner’).puispinner(); <div id="default"> $(‘#default’).puitabview(); <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div> <div id="tab1"> $(‘#default’).puitabview({ content 1 orientation: ‘left’ </div> }); <div id="tab2"> content 2 </div> <div id="tab3"> content 3 </div> </div></div>
  49. 49. Demo
  50. 50. Portlets via Sample: /svn/examples/trunk/prime-portlet
  51. 51. On the Cloud http://primefaces-rocks.appspot.com http://primefaces-gae-kickstart.appspot.com http://blog.jelastic.com/2012/06/11/how-to-deploy-primefaces-applications-into-jelastic-cloud/
  52. 52. Documentation 500+ Pages
  53. 53. Community 3000 posts / month
  54. 54. Bundled with NetBeans 7.x
  55. 55. PrimeFaces PRO Support Training Consulting
  56. 56. Scaffholding
  57. 57. RoadMapCurrent 3.4.2Next Major 3.5Maintenance 3.4.xMobile 1.0PrimeUI JS LibraryPrimeFaces for ASP.NET
  58. 58. Q/A contact@prime.com.tr @primefaces groups/primefaces http://blog.primefaces.org

×