PrimeFaces

1. ÇAĞATAY ÇİVİCİ

2. Çağatay Çivici
JSF Expert Group Member (JSR 314, 344 and 372)
PrimeFaces Architect and Lead Developer
Apache MyFaces PMC
Speaker, Author, Reviewer
Founder of PrimeTek Bilişim
Nickname: optimus.prime

3. PrimeTek Bilişim
Java EE and OSS
Consulting
Training
Delivery
www.primetek.com.tr

5. 6 years old

6. Lightweight

7. Easy to Use

8. Only 1 Jar

9. No required
dependencies

10. Zero Config

11. Who Uses PrimeFaces?

12. Who Uses PrimeFaces?

13. Who Uses PrimeFaces?

14. PrimeFaces in the Wild

15. PrimeFaces vs *Faces

16. PrimeFaces vs Vaadin

17. Global

18. 100+ UI Components

19. Mock OS X

20. Form Components

21. Browser Support

22. Hide Complexity
CSS JS AJAX
Keep Flexibility
<p:tabView onTabChange=”handleTabChange()”>
<p:ajax event=”change” listener=”#{bean.onTabChange}” update=”comp” />
//tabs
</p:tabView>
CSS
Override
JS
API
Client
Callbacks
Ajax
Callbacks

23. Anatomy of a Component
<p:schedule id=”sch” value=”#{bean.model}” editable=”true” />
<div id=”sch”></div>
<script type=”text/javascript”>
scheduleWidget = new PrimeFaces.widget.Schedule(‘sch’, {editable:true});
</script>
You get:
JSF
Markup
Script

24. Accessibility
Keyboard/Mouse
ARIA Attributes

25. HTML5
canvas
data-*
websockets
forms media

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

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

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

29. Demo

30. Dialog Framework
main.xhtml target.xhtml
.openDialog("target");
.closeDialog(data);

31. Demo

32. Client Side Validation
Server Side
Compatible
Bean Validation Extension API
Events

33. Client Side Validation
<p:inputText id="name" value="#{validationView.text}" required="true" label="Name"/>
<p:inputText id="number" value="#{validationView.integer}" label="Number">
<f:validateDoubleRange minimum="5" maximum="8" />
</p:inputText>
<p:message for="number" />
<p:inputText id="regex" value="#{validationView.regexText}" validatorMessage="Value does
not match pattern.">
<f:validateRegex pattern="^[a-zA-Z]+$" />
</p:inputText>
!
<p:inputText id="date" value="#{validationView.date}" label="Date">
<f:convertDateTime pattern="MM/dd/yyyy" />
</p:inputText>

34. Bean Validation
@ManagedBean
public class BeanValidationView {
@Size(min=2,max=5) private String name;
@Min(10) @Max(20) private Integer age;
@DecimalMax(value= "99.9", message = "Shold not exceed 99.9") private Double amount;
@Digits(integer=3,fraction=2) private Double amount2;
@AssertTrue private boolean checked;
@Past private Date pastDate;
@Future private Date futureDate;
@Pattern(regexp="^[-+]?d+$") private String pattern;

35. Client Side Bean Validation
<p:inputText id="name" value="#{beanValidationView.name}" label="Name"/>
!
<p:inputText id="age" value="#{beanValidationView.age}" label="Age"/>
<p:inputText id="amount" value="#{beanValidationView.amount}" label="Amount"/>
<p:inputText id="amount2" value="#{beanValidationView.amount2}" label="Amount 2"/>
<p:inputText id="pattern" value="#{beanValidationView.pattern}" label="pattern"/>
!
<p:selectBooleanCheckbox id="checked" value="#{beanValidationView.checked}" />
<p:inputText id="psstDate" value="#{beanValidationView.pastDate}">
<f:convertDateTime pattern="MM/dd/yyyy" />
</p:inputText>
<p:inputText id="futureDate" value="#{beanValidationView.futureDate}">
<f:convertDateTime pattern="MM/dd/yyyy" />
</p:inputText>

36. Demo

37. Themes

38. Twitter Bootstrap Theme

39. MetroUI Theme

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

41. Roll your own

42. Premium Themes

43. Premium Layouts

44. Demo

45. PrimeFaces Mobile

46. PrimeFaces Mobile
<h:body>
<pm:page id="first">
<pm:header title="Twitter" theme="b"></pm:header>
<pm:content>
<h:form id="main">
<p:growl id="messages" showDetail="true" />
<h2>See what’s happening right now.</h2>
<p:inputText id="search" value="#{twitterView.keyword}" type="search" />
<p:commandButton value="Search" icon="search"
actionListener="#{twitterView.search}" update="tweets search"/>
<p:dataList id="tweets" value="#{twitterView.tweets}" var="tweet">
<p:graphicImage value="#{tweet.user.biggerProfileImageURL}" />
<h2>#{tweet.user.screenName}</h2>
</p:dataList>
</h:form>
</pm:page>
</h:body>

47. PrimeFaces Mobile
powered by

48. Demo

49. PrimeFaces Push
Atmosphere

50. PrimeFaces Push
websockets fallback
transports
scalable portable

51. Demo

52. Javascript CSS
REST, Jax-RS, Php, Spring MVC ...

53. Vanilla Prime
<input id=”spinner” type=”text” />
<div id="default">
<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">
content 1
</div>
<div id="tab2">
content 2
</div>
<div id="tab3">
content 3
</div>
</div>
</div>
$(‘#spinner’).puispinner();
$(‘#default’).puitabview();
$(‘#default’).puitabview({
orientation: ‘left’
});

54. Demo

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

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

57. Documentation
600~ Pages

58. Books

59. Community
120K Posts, 45K Members

60. Bundled with NetBeans

61. NetBeans Plugin

62. NetBeans Plugin

63. NetBeans Plugin

64. NetBeans Plugin

65. PrimeFaces ELITE
COMMUNITY ELITE
5.0
5.1
5.0
5.1
5.1.1
5.1.2
5.1.x
…
$249
/ year

66. PrimeFaces PRO
Support Training Consulting

67. RoadMap
Current 5.1
Next 5.2
Maintenance 5.1.x Elite
Improve current feature set
New components
Premium Themes and Layouts

68. Q/A
contact@primetek.com.tr
@primefaces
groups/primefaces
http://blog.primefaces.org