Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.
-
Upload
lester-reynolds -
Category
Documents
-
view
224 -
download
0
Transcript of Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.
![Page 1: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/1.jpg)
Kito D. MannPrincipal Consultant
Prime Time JSF with PrimeFaces 5
![Page 2: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/2.jpg)
Kito D. Mann@kito99
» Principal Consultant at Virtua» http://www.virtua.com» Training, consulting, architecture, mentoring, » Official US PrimeFaces partner
» Author, JavaServer Faces in Action» Founder, JSF Central
» http://www.jsfcentral.com
Copyright (C) 2012 Virtua, Inc. All rights reserved.
![Page 3: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/3.jpg)
Kito D. Mann@kito99
» Co-host, Enterprise Java Newscast» http://enterprisejavanews.com
» Internationally recognized speaker» JavaOne, JavaZone, Devoxx, NFJS, TSSJS, etc.
» JCP Member» JSF, WebBeans, JSF Portlet Bridge, Portlets
Copyright (C) 2012 Virtua, Inc. All rights reserved.
![Page 4: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/4.jpg)
Who uses PrimeFaces?
![Page 5: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/5.jpg)
Who uses PrimeFaces?
![Page 6: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/6.jpg)
Who uses PrimeFaces?
![Page 7: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/7.jpg)
Who uses PrimeFaces?
![Page 8: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/8.jpg)
Who uses PrimeFaces?
![Page 9: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/9.jpg)
Popularity
![Page 10: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/10.jpg)
Global
Colombia
![Page 11: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/11.jpg)
100+ UI Components
![Page 12: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/12.jpg)
Advanced UIs
![Page 13: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/13.jpg)
Form Components
![Page 14: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/14.jpg)
Hide Complexity
Keep Flexibility<p:tabView onTabChange=”handleTabChange()”><p:ajax event=”change” listener=”#{bean.onTabChange}” update=”comp” />
//tabs</p:tabView>
CSSOverride
JSAPI
ClientCallback
s
AjaxCallback
s
CSS JS AJAXJSON
![Page 15: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/15.jpg)
<p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule">
Page
<div id=”form:sch”> …</div>
Markup
<script type=”text/javascript”>$(function() {PrimeFaces.cw("Schedule","myschedule", {id:”form:schedule",widgetVar:"myschedule",defaultView:"month", locale:"en”,offset:0,header:{left:'prev,next,today', center:"title",right:"month,agendaWeek,agendaDay”},"schedule");}); </script>
Script
Anatomy of a Component
![Page 16: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/16.jpg)
HTML5
canvas
data-*websocket
s
forms media
![Page 17: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/17.jpg)
Server APIs: Standard JSF 2
Client APIs:
PrimeFaces Ajax
![Page 18: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/18.jpg)
f:ajax
onevent
onerror
PrimeFaces Ajax
p:ajax
oncomplete
onerror
onstart
async
global
onsuccess
![Page 19: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/19.jpg)
p:ajax<p:ajax event=“blur” update=“userComponent” process=“@this”/>
f:ajax<f:ajax event=“blur” render=“userComponent” execute=“@this”/>
a4j:ajax (RichFaces 3.x)<a4j:support event=“blur” reRender=“userComponent”/>
![Page 20: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/20.jpg)
autoUpdate
p:ajax
RequestContext
Callbacks
AjaxStatus
Selectors
partialSubmit
Ajax Extensions
![Page 21: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/21.jpg)
<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
AjaxStatus
![Page 22: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/22.jpg)
<p:commandButton value=”Submit” action=”#{bean.save}” />
<p:dialog widgetVar=”dialogWidget” ... />
public void save() { RequestContext rc = RequestContext.getCurrentInstance(); rc.execute(“PF(‘dialogWidget’).hide()”);}
Page
Bean
RequestContext - Scripts
![Page 23: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/23.jpg)
RequestContext - Update
<p:commandButton value=”Submit” action=”#{bean.save}” />
<h:outputText id=”val” value=”#{bean.property}” />
Page
public void save() { RequestContext rc = RequestContext.getCurrentInstance(); rc.addPartialUpdateTarget(“val”);}
Bean
or
<p:commandButton value=”Submit” action=”#{bean.save}” update=”val” />
<h:outputText id=”val” value=”#{bean.property}” />
![Page 24: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/24.jpg)
RequestContext - Scroll
<p:commandButton value=”Submit” action=”#{bean.save}” />
<h:outputText id=”val” value=”#{bean.property}” />
Page
public void save() { RequestContext rc = RequestContext.getCurrentInstance(); rc.scrollTo(“val”);}
Bean
![Page 25: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/25.jpg)
<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
![Page 26: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/26.jpg)
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
FalsePost 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
True
![Page 27: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/27.jpg)
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Ajax Update Keywords
Keyword Type@this Standard@form Standard@none Standard@namingcontainer PrimeFaces@parent PrimeFaces@composite PrimeFaces@child(n) PrimeFaces@previous PrimeFaces@widgetVar(name) PrimeFaces
![Page 28: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/28.jpg)
update=”@(form)”
update=”@(form.first)”
update=”@(.mystyle)”
update=”@(.ui-datatable)”
update=”@(:input:not(select))”
update=”@(:input:disabled))”
PrimeFaces Selectors (PFS)
![Page 29: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/29.jpg)
Resource Handling
Compress
Minify
On The Fly Loading
Merge
andOptimizatio
ns
![Page 30: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/30.jpg)
Themes
![Page 31: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/31.jpg)
Install a Theme
Add primefaces-{themename}.jar
Configure<context-param> <param-name>primefaces.THEME</param-name> <param-value>{themename}</param-value></context-param>
![Page 32: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/32.jpg)
Roll Your Own
![Page 33: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/33.jpg)
Advanced Themes
![Page 34: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/34.jpg)
Demo: Showcase
![Page 35: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/35.jpg)
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Client-side Validation
<h:form> <p:messages /> <p:inputText required="true" /> <p:inputTextarea required="true" /> <p:commandButton value="Save" validateClient="true" ajax="false"/></h:form>
![Page 36: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/36.jpg)
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Instant Validation with Events
<h:form> <h:panelGrid columns="4" cellpadding="5"> <h:outputLabel for="text" value="Text: (Change)" /> <p:inputText id="text" value="#{validationBean.text}" required="true"> <f:validateLength minimum="2" maximum="5" /> <p:clientValidator /> </p:inputText> <p:message for="text" display="icon" /> <h:outputText value="#{validationBean.text}" /> <h:outputLabel for="integer" value="Integer: (Keyup)" /> <p:inputText id="integer" value="#{validationBean.integer}"> <p:clientValidator event="keyup"/> </p:inputText> <p:message for="integer" display="icon" /> <h:outputText value="#{validationBean.integer}" /> </h:panelGrid> <p:commandButton value="Save" ajax="false" icon="ui-icon-check" validateClient="true"/></h:form>
![Page 37: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/37.jpg)
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Client-side Validation
Messages are fully integratedAPI for writing custom client-side validators and
convertersLocale object available in JavaScript
![Page 38: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/38.jpg)
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Bean Validation Integration
public class Bean {
@NotNull@Max(30)private String name;…}
<p:inputText value="#{bean.firstname}" />
<input type="text" maxlength="30" … />
![Page 39: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/39.jpg)
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Other Features
JavaScript APIAccessibility
Right-to-left supportException handlerDialog frameworkPage authorization
PrimeFaces Extensions…
![Page 40: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/40.jpg)
PrimeFaces Mobile
![Page 41: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/41.jpg)
PrimeFaces Mobile
Mobile navigation
8 Core Components
Gestures20+ PrimeFaces
Components
![Page 42: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/42.jpg)
PrimeFaces Mobile <f:view renderKitId="PRIMEFACES_MOBILE" /> <h:head> </h:head> <h:body> <pm:page id="main"> <pm:header title="Main Page"></pm:header> <pm:content> …. </pm:content> </pm:page> <pm:page id="second"> <pm:header title="Second Page"></pm:header> <pm:content> … </pm:content> </pm:page> </h:body>
![Page 43: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/43.jpg)
PrimeFaces Mobile
![Page 44: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/44.jpg)
Demo: Mobile
![Page 45: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/45.jpg)
PrimeFaces Push
JSF APP
PrimeFaces PushServlet
![Page 46: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/46.jpg)
PrimeFaces Push
Atmosphere
![Page 47: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/47.jpg)
public void increment() { count++; EventBus eventBus = EventBusFactory.getDefault().eventBus(); eventBus.publish("/counter", String.valueOf(count));}
Bean
PrimeFaces Push
Page
<h:form> <h:outputText value="#{counterView.count}" styleClass="display" /> <p:commandButton value="Click" actionListener="#{counterView.increment}" /></h:form>
<p:socket onMessage="handleMessage" channel="/counter" />
![Page 48: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/48.jpg)
<script type=”text/javascript”> function handleMessage(data) { $('.display').html(data); }</script>
Callback
PrimeFaces Push
Endpoint
@PushEndpoint("/counter")public class CounterResource {
@OnMessage(encoders = {JSONEncoder.class}) public String onMessage(String count) { return count; }}
![Page 49: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/49.jpg)
Demo: Push
![Page 50: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/50.jpg)
Portlets
![Page 51: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/51.jpg)
550+ Pages
Documentation
![Page 52: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/52.jpg)
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Books
![Page 53: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/53.jpg)
Community
![Page 54: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/54.jpg)
Bundled with NetBeans
![Page 55: Kito D. Mann Principal Consultant Prime Time JSF with PrimeFaces 5.](https://reader030.fdocuments.us/reader030/viewer/2022033100/56649ccf5503460f9499b418/html5/thumbnails/55.jpg)
TrainingSupport Consulting
Enterprise
PrimeTek Informatics