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 Technology
Specialized in Java EE and Agile
Consulting
Training
Delivery
Ofces in Istanbul and Ankara
32 Employees (Oct 2012)
www.prime.com.tr
4 years old
Lightweight
Easy to Use
Only 1 Jar
1.7~ mb
No required
dependencies
Zero Cong
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>
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
p:ajax f:ajax
oncomplete
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
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 />
<h:outputText id=val value=#{bean.property} />
<p:commandButton value=Submit action=#{bean.save} />
<h:outputText id=val value=#{bean.property} />
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 />
PartialSubmit
Post
Data:javax.faces.partial.ajax=true&javax.faces.source=fo
rm%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=79164825219094
21983%3A-2156051337299048496
Post
Data:javax.faces.partial.ajax=true&javax.faces.source=for
m%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=7916482521909421
983%3A-2156051337299048496
False True
update=@(form)
update=@(form.rst)
update=@(.mystyle)
update=@(.ui-datatable)
update=@(:input:not(select))
update=@(:input:disabled))
PrimeFaces Selectors (PFS)
Optimizations
Compress Minify
On The Fly
Loading
Merge
and
ResourceHandling
Demo
Themes
Twitter Bootstrap Theme
Install a Theme
Add primefaces-{themename}.jar
Congure
<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
Training Support Consulting
Scaffholding
RoadMap
Current 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/A
contact@prime.com.tr
@primefaces
groups/primefaces
http://blog.primefaces.org