primefaces-javaone-2012

Çagatay Çivici

Ç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 Technology

Prime TechnologySpecialized in Java EE and Agile

Consulting

Training

Delivery

Offices in Istanbul and Ankara

32 Employees (Oct 2012)

www.prime.com.tr

http://www.prime.com.tr

http://www.prime.com.tr

4 years old

Lightweight

Easy to Use

Only 1 Jar1.7~ mb

No requireddependencies

Zero Config

Who Uses PrimeFaces?

PrimeFaces in the Wild

Most Popular

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>

CSSOverride

JSAPI

ClientCallbacks

AjaxCallbacks

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

p:ajax f:ajaxoncomplete

onerroronstart

asyncglobal

onsuccess

oneventonerror

AjaxStatus<p:ajaxStatus>

<f:facet name=”start”><p:graphicImage value=”fancyanimation.gif” />

</f:facet><f:facet name=”complete”>

<h:outputText value=”Request Completed” /></f:facet>

</p:ajaxStatus>

<p:ajaxStatus onstart=”dialog.show()” oncomplete=”dialog.hide()” />

<p:commandButton global=”true|false” />

Declarative

Programmatic

Global

RequestContext - Params<p:commandButton value=”Submit” action=”#{bean.save}”

oncomplete=”handleComplete(xhr, status, args)” />

public void save() {RequestContext rc = RequestContext.getCurrentInstance();rc.addCallbackParam(“person”, person);

}

<script type=”text/javascript”>function handleComplete(xhr, status, args) {

alert(args.person.name);}

</script>

JSF Page

Bean

Callback

RequestContext - Scripts<p:commandButton value=”Submit” action=”#{bean.save}” />

<p:dialog widgetVar=”dialogWidget” ... />

public void save() {RequestContext rc = RequestContext.getCurrentInstance();rc.execute(“dialogWidget.hide()”);

}

JSF Page

Bean

RequestContext - Update<p:commandButton value=”Submit” action=”#{bean.save}” />

<h:outputText id=”val” value=”#{bean.property}” />

public void save() {RequestContext rc = RequestContext.getCurrentInstance();rc.addPartialUpdateTarget(“val”);

}

JSF Page

Bean

or<p:commandButton value=”Submit” action=”#{bean.save}”

update=”val” />


<p:commandButton value=”Submit” action=”#{bean.save}” />


public void save() {RequestContext rc = RequestContext.getCurrentInstance();rc.scrollTo(“val”);

}

Page

Bean

RequestContext - Scroll

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

PartialSubmitPost

Data:javax.faces.partial.ajax=true&javax.faces.source=form%3Aj_idt18&javax.faces.partial.execute=form%3Aname&javax.faces.partial.render=form%3Adisplay&form%3Aj_idt18=form%3Aj_idt18&form=form&form%3Aname=&form%3Aj_idt20=&form%3Aj_idt22=&form%3Aj_idt24=&form%3Aj_idt26=&form%3Aj_idt28=&form%3Aj_idt30=&form%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=7916482521909421983%3A-2156051337299048496

Post Data:javax.faces.partial.ajax=true&javax.faces.source=form%3Aj_idt18&javax.faces.partial.execute=form%3Aname&javax.faces.partial.render=form%3Adisplay&form%3Aj_idt18=form%3Aj_idt18&form=form&form%3Aname=&javax.faces.ViewState=7916482521909421983%3A-2156051337299048496

False True

update=”@(form)”

update=”@(form.first)”

update=”@(.mystyle)”

update=”@(.ui-datatable)”

update=”@(:input:not(select))”

update=”@(:input:disabled))”

PrimeFaces Selectors (PFS)

Optimizations

CompressMinify

On The Fly Loading

Merge

and

ResourceHandling

Demo

Themes

Twitter Bootstrap 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

Advanced Themes

Demo

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>

PrimeFaces Mobile

powered by

PrimeFaces Mobile

Demo

PrimeFaces Push

Atmosphere

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

500+ Pages

Community

3000 posts / month

Bundled with NetBeans 7.x

PrimeFaces PRO

TrainingSupport Consulting

Scaffholding

RoadMapCurrent 3.4.1

Next Major 4.0

Maintenance 3.4.x

Mobile 1.0

Move to GitHub

Invest more resources

PrimeUI JS Library

PrimeFaces for ASP.NET

Why PrimeFaces?We Love It

We Use It

Good for RIA and REA

Flexible, Easy to Use, Lightweight

From app devs to app devs

Most Popular

It works

PrimeFaces PRO

Q/[email protected]

@primefaces

groups/primefaces

http://blog.primefaces.org

Documents

primefaces-javaone-2012