ÇAĞATAY ÇİVİCİ

Ç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

PrimeTek BilişimJava EE and OSS

Consulting

Training

Delivery

www.primetek.com.tr

6 years old

Lightweight

Easy to Use

Only 1 Jar

No required dependencies

Zero Config

Who Uses PrimeFaces?

Who Uses PrimeFaces?

Who Uses PrimeFaces?

PrimeFaces in the Wild

PrimeFaces vs *Faces

PrimeFaces vs Vaadin

Global

100+ UI Components

Mock OS X

Form Components

Browser Support

Hide Complexity

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

CSS JS AJAX

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

Accessibility

Keyboard/Mouse

ARIA Attributes

HTML5

canvas

data-*

websockets

forms media

Ajax in PrimeFaces

Server APIs: Standard JSF 2

Client APIs:

autoUpdate

p:ajax

RequestContext

Callbacks

AjaxStatus

Selectors

partialSubmit

Ajax Extensions

Optimizations

CompressMinify

On The Fly Loading

Merge

and

ResourceHandling

Demo

Dialog Framework

target.xhtmlmain.xhtml

.openDialog("target");

.closeDialog(data);

Demo

Client Side Validation

Server Side Compatible

Bean Validation Extension API

Events

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>

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;

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>

Demo

Themes

Twitter Bootstrap Theme

MetroUI Theme

Install a Theme

Add primefaces-{themename}.jar

Configure<context-param>

<param-name>primefaces.THEME</param-name> <param-value>{themename}</param-value>

</context-param>

Roll your own

Premium Themes

Premium Layouts

Demo

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>

PrimeFaces Mobile

powered by

PrimeFaces Mobile

Demo

PrimeFaces Push

Atmosphere

PrimeFaces Push

websockets fallback transports

scalable portable

Demo

Javascript CSS

REST, Jax-RS, Php, Spring MVC ...

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’

});

Demo

Portlets

Sample: /svn/examples/trunk/prime-portlet

via

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/

Documentation

600~ Pages

Books

Community

120K Posts, 45K Members

Bundled with NetBeans

NetBeans Plugin

NetBeans Plugin

NetBeans Plugin

NetBeans Plugin

PrimeFaces ELITE

COMMUNITY ELITE

5.0

5.1

5.0

5.1

5.1.15.1.2

5.1.x…

$249 / year

PrimeFaces PRO

TrainingSupport Consulting

RoadMap

Current 5.1

Next 5.2

Maintenance 5.1.x Elite

Improve current feature set

New components

Premium Themes and Layouts

Q/Acontact@primetek.com.tr

@primefaces

groups/primefaces

http://blog.primefaces.org