Download - AnkaraJUG Kasım 2012 - PrimeFaces
Ç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 Teknoloji
Nickname: optimus.prime
Prime TeknolojiJava EE, OSS, Agile, Mobile, E-Commerce
Consulting
Training
Delivery
Offices in Istanbul and Ankara
34 Employees (Nov 2012)
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” />
<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” />
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
Javascript CSS
Rest, Jax-RS, Php, Spring MVC ...
Pure JavaScript<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
500+ Pages
Community
3000 posts / month
Bundled with NetBeans 7.x
PrimeFaces PRO
TrainingSupport Consulting
Scaffholding
RoadMap
Current 3.4.2
Next Major 3.5
Maintenance 3.4.x
Mobile 1.0
PrimeUI JS Library
PrimeFaces for ASP.NET
