PrimeFaces Session at Confess 2012

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

5. 3 Years Old

6. Lightweight

7. Easy to Use

8. Only 1 Jar
1.7~ mb

9. No Required
Dependencies

10. Zero Config

11. Who Uses?

12. In The Wild

13. Popularity

14. Global
Colombia

15. 100+ UI Components

16. Advanced UIs

17. Form Components

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 Ajax
Override API Callbacks Callbacks

19. Anatomy of a Component
Page <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>

20. Accessibility
Keyboard/Mouse
ARIA Attributes

21. HTML5
data-*
canvas websockets
forms media

22. PrimeFaces Ajax
Server APIs: Standard JSF 2
Client APIs:

23. Ajax Extensions
p:ajax
autoUpdate Callbacks
Selectors
AjaxStatus RequestContext
partialSubmit

24. p:ajax f:ajax
oncomplete onevent
onerror onerror
onstart
onsuccess
async
global

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. 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()”);
}

27. 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}” />

28. 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”);
}

29. 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” />

30. PartialSubmit
False True
Post Post
Data:javax.faces.partial.ajax=true&javax.faces.source=fo Data:javax.faces.partial.ajax=true&javax.faces.source=for
rm%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=79164825219094
21983%3A-2156051337299048496

31. PrimeFaces Selectors (PFS)
update=”@(form)”
update=”@(form.first)”
update=”@(.mystyle)”
update=”@(.ui-datatable)”
update=”@(:input:not(select))”
update=”@(:input:disabled))”

32. ResourceHandling
On The Fly
Optimizations and Loading
Minify Merge Compress

33. Demo

34. Themes

35. Install a Theme
Add primefaces-{themename}.jar
Configure
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>{themename}</param-value>
</context-param>

36. Roll Your Own

37. Advanced Themes

38. Demo

39. PrimeFaces Mobile

40. 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>

41. PrimeFaces Mobile
powered by

42. Demo

43. PrimeFaces Push
WebSockets

44. PrimeFaces Push
PushServer
JSF APP
(Jetty)
1
2 3
4
4
4 4 4

45. 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>

46. Demo

47. Back to Atmosphere?

48. Portlets
Sample: /svn/examples/trunk/prime-portlet

49. On The Cloud
http://primefaces-rocks.appspot.com
http://primefaces-gae-kickstart.appspot.com

50. Documentation
450+ Pages

51. Community
2000 posts / month

52. Bundled with NetBeans

53. Enterprise
Support Training Consulting

54. Scaffolding

55. Roadmap
• Current 3.2
• Next 3.3
• Keep on 3.x
• PrimeFaces Cookbook
• De-Facto Standard

56. The End
contact@prime.com.tr
@primefaces
206606616332
http://blog.primefaces.org