ankarajug kasım 2012 - primefaces
DESCRIPTION
PrimeFaces, JavaServer Faces icin gelistirllen ve dunya capinda populer olan zengin bir arayuz kutuphanesidir. Bu sunumda PrimeFaces Bilesenleri, Mobil, Ajax Push, Tema Destegi gibi modullerin yani sira PrimeFaces ekibinin gelistirdigi yeni jQuery javascript kutuphanesi PrimeUI'da tanitilmaktadir.TRANSCRIPT
Ç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
