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.

1. Çagatay Çivici

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

5. 4 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 PrimeFaces?

12. PrimeFaces in the Wild

13. Most Popular

14. Global

15. 100+ UI Components

16. Mock OS X

17. Form Components

18. Browser Support

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

20. 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:

21. Accessibility
Keyboard/Mouse
ARIA Attributes

22. HTML5
data-*
canvas websockets
forms media

23. Ajax in PrimeFaces
Server APIs: Standard JSF 2
Client APIs:

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

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

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

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

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

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

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

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

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

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

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

35. Demo

36. Themes

37. Twitter Bootstrap Theme

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

39. Roll your own

40. Advanced Themes

41. Demo

42. PrimeFaces Mobile

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

44. PrimeFaces Mobile
powered by

45. Demo

46. PrimeFaces Push
Atmosphere

47. Demo

48. Javascript CSS
Rest, Jax-RS, Php, Spring MVC ...

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

50. Demo

51. Portlets
via
Sample: /svn/examples/trunk/prime-portlet

52. 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/

53. Documentation
500+ Pages

55. Community
3000 posts / month

56. Bundled with NetBeans 7.x

57. PrimeFaces PRO
Support Training Consulting

58. Scaffholding

59. RoadMap
Current 3.4.2
Next Major 3.5
Maintenance 3.4.x
Mobile 1.0
PrimeUI JS Library
PrimeFaces for ASP.NET

60. Q/A
contact@prime.com.tr
@primefaces
groups/primefaces
http://blog.primefaces.org