Primefaces Confess 2012

Çagatay Çivici

• JSF Expert Group Member (JSR-314, JSR-344)

• PrimeFaces Lead

• Apache MyFaces PMC

• Speaker, Author, Reviewer

• Co-Founder of Prime Teknoloji

Çagatay Çivici

• Specialized in Java EE and Agile

• Consulting

• Training

• Delivery

• Offices in Istanbul and Ankara

• www.prime.com.tr

Prime Teknoloji

http://www.prime.com.tr

http://www.prime.com.tr

3 Years Old

Lightweight

Easy to Use

1.7~ mb

Only 1 Jar

No Required Dependencies

Zero Config

Who Uses?

In The Wild

Popularity

Global

Colombia

100+ UI Components

Advanced UIs

Form Components

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

<p:schedule id=”sch” value=”#{bean.model}” editable=”true” />

<div id=”sch”></div>

<script type=”text/javascript”>PrimeFaces.cw(‘Schedule’,’widgetVar’, {id:’sch’, editable:true});

</script>

Page

Markup

Script

Anatomy of a Component

Accessibility

Keyboard/Mouse

ARIA Attributes

HTML5

canvas

data-*

websockets

forms media

Server APIs: Standard JSF 2

Client APIs:

PrimeFaces Ajax

autoUpdate

p:ajax

RequestContext

Callbacks

AjaxStatus

Selectors

partialSubmit

Ajax Extensions

p:ajax f:ajaxoncomplete

onerror

onstart

async

global

onsuccess

onevent

onerror

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

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

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

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

}

Page

Bean

RequestContext - Scripts


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

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

}

Page

Bean

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

update=”val” />


RequestContext - Update



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

}

Page

Bean

RequestContext - Scroll

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

AutoUpdate

becomes

PartialSubmit

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=&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

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

WebSockets

PrimeFaces Push

JSF APPPushServer

(Jetty)

PrimeFaces Push

12 3

4 4 44

4

<p:push channel=”chat” onmessage=”handleMessage” />

public void send() {RequestContext rc = RequestContext.getCurrentInstance();rc.push(“chat”, “Hello everyone!”);

}

<script type=”text/javascript”>function handleMessage(event, data) {

//data -> “Hello everyone!”}

</script>

Page

Bean

Callback

PrimeFaces Push

Demo

Back to Atmosphere?

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

Portlets

http://primefaces-rocks.appspot.com

http://primefaces-gae-kickstart.appspot.com

On The Cloud





450+ Pages

Documentation

2000 posts / month

Community

Bundled with NetBeans

TrainingSupport Consulting

Enterprise

Scaffolding

• Current 3.2

• Next 3.3

• Keep on 3.x

• PrimeFaces Cookbook

• De-Facto Standard

Roadmap

[email protected]

@primefaces

206606616332

http://blog.primefaces.org

The End

mailto:[email protected]

mailto:[email protected]



Primefaces Confess 2012

Technology