PrimeTime JSF with PrimeFaces - Dec 2014

Ç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