Primefaces

Primefaces

Diego
Armando
Gómez
M

dgomez@vortexbird.com

Introducción

•  Primefaces
es
una
implementación
de
JSF
de

código
libre.

•  En
el
2015
es
la
implementación
de
JSF
mas

popular.

•  Soporta
AJAX
basado
en
la
especiﬁcación

JSF2.0

•  Fácil
de
conﬁgurar.

•  Cuenta
con
Mobil
UI
Kit

Conﬁguración

•  Solo
se
debe
descargar
el
jar
de
primefaces

•  primefaces-‐{version}.jar

Maven

<dependency>

<groupId>org.primefaces</groupId>

<ar6factId>primefaces</ar6factId>

<version>5.1</version>

</dependency>

Gradle

'org.primefaces:primefaces:5.0'

Dependencias

Dependencia
Versión*
Tipo
Descripción

JSF
runLme
2.0,
2.1
or
2.2
Required
Apache
MyFaces
or
Oracle
Mojarra

itext
2.1.7
OpLonal
DataExporter
(PDF)

apache
poi
3.7
OpLonal
DataExporter
(Excel)

rome
1.0
OpLonal
FeedReader

commons-‐ﬁleupload
1.3
OpLonal
FileUpload

commons-‐io
2.2
OpLonal
FileUpload

atmosphere
2.2.2
OpLonal
PrimeFaces
Push

barcode4j-‐light
2.1
OpLonal
Barcode

qrgen
1.4
OpLonal
QR
Code
support
for
Barcode

RunAme

•  Especiﬁcaciones

•  JSF
2.0

•  JSF
2.1

•  JSF
2.2

Pagina
xhtml

<html
xmlns="hCp://www.w3.org/1999/xhtml"

xmlns:h="hCp://java.sun.com/jsf/html"

xmlns:f="hCp://java.sun.com/jsf/core"

xmlns:p="hCp://primefaces.org/ui">

<h:head>

</h:head>

<h:body>

<p:spinner
/>

</h:body>

</html>

Conﬁguración
de
tema
visual

<context-‐param>

<param-‐name>primefaces.THEME</param-‐name>

<param-‐value>bootstrap</param-‐value>

</context-‐param>

Conﬁguración
web.xml

<?xml
version="1.0"
encoding="UTF-‐8"?>

<web-‐app
version="3.0"

xmlns="hCp://java.sun.com/xml/ns/javaee"

xmlns:xsi=hCp://www.w3.org/2001/XMLSchema-‐instance

xsi:schemaLoca6on="hCp://java.sun.com/xml/ns/javaee
hCp://java.sun.com/xml/
ns/javaee/web-‐app_3_0.xsd"
>

<servlet>

<servlet-‐name>Faces
Servlet</servlet-‐name>

<servlet-‐class>javax.faces.webapp.FacesServlet</servlet-‐class>

</servlet>

<servlet-‐mapping>


<url-‐paCern>*.jsf</url-‐paCern>

</servlet-‐mapping>

<servlet-‐mapping>


<url-‐paCern>*.xhtml</url-‐paCern>

</servlet-‐mapping>

<context-‐param>

<param-‐name>primefaces.THEME</param-‐name>

<param-‐value>bootstrap</param-‐value>

</context-‐param>

</web-‐app>

Procesamiento
y
Renderizado
parcial

•  PPR
(ParLal
Page
Rendering)

•  aaributes
(update,
process,
onstart,

oncomplete).

<h:form>

<p:commandBuaon
update="display"
/>

<h:outputText
id="display"
value="#{bean.value}"/>

</h:form>

Procesamiento
y
Renderizado
parcial

•  ClientId

•  Es
posible
deﬁnir
el
ClientId
del
componente

que
se
desea
actualizar.

<h:form
id="myform">

<p:commandBuaon
update="myform:display"
/>

<h:outputText
id="display"

</h:form>

Procesamiento
y
Renderizado
parcial

•  Actualizar
Componentes
en
diferentes

contenedores

<h:form
id="form1">

<p:commandBuaon
update=":form2:display"
/>

</h:form>

<h:form
id="form2">

<h:outputText
id="display"

</h:form>

Procesamiento
y
Renderizado
parcial

•  Actualizar
múlLples
componentes

<h:form>

<p:commandBuaon
update="display1,display2"
/>

<p:commandBuaon
update="display1
display2"
/>

<h:outputText
id="display1"
value="#{bean.value1}"/>

<h:outputText
id="display2"
value="#{bean.value2}"/>

</h:form>

NoAﬁcando
usuarios

•  Primefaces
cuenta
con
ajaxStatus
el
cual
noLﬁca
a
los

usuarios
sobre
las
peLciones
ajax.

•  Global
vs
Non-‐Global

•  Por
defecto
todas
las
peLciones
son
globales
si
se
quiere

hacer
una
peLción
en
silencio
se
puede
apagar.

<p:commandBuaon
value="Silent"
global="false"
/>

<p:commandBuaon
value="NoLfy"
global="true"
/>

<p:ajaxStatus
onstart="PF('statusDialog').show()"

onsuccess="PF('statusDialog').hide()"
/>

<p:dialog
widgetVar="statusDialog"
modal="true"
draggable="false"
closable="false"

resizable="false"
showHeader="false">

<p:graphicImage
name="/demo/images/ajaxloadingbar.gif"
/>

</p:dialog>

ParAal
Processing

•  Update
es
similar
a
render
en
JSF
2.X

•  Process
es
similar
a
execute
en
JSF
2.X

•  El
update
se
usa
para
decir
a
primefaces
que

componentes
de
la
pantalla
deben
ser

actualizados.

•  El
process
se
usa
para
decir
a
primefaces
que

debe
ejecutar
cuando
se
ejecuta
un

componente.

ParAal
Processing

<h:form
id="form1">

<p:commandBuaon
id="btn"
update="form1"
process="btn"
/>

<h:outputText

</h:form>

<h:form
id="form1">

<p:commandBuaon
id="btn"
update="@form"
process="@this"
/>

<h:outputText

</h:form>

ParAal
Processing

Keyword
Type
DescripAon

@this Standard Current component
@all Standard Whole view
@form Standard Closest ancestor form of current component
@none Standard No component

PrimeFaces
Selectors
(PFS)

•  El
api
de
PFS
es
similar
a
el
api
de
jQuery

selector
pero
implementada
para
JSF.

•  Es
muy
potente
y
simple
a
las
vez.

•  Los
desarrolladores
que
estén
acostumbrados

a
jQuery
la
encuentran
muy
úLl.

PrimeFaces
Selectors
(PFS)

•  Actualizar
todos
los
form

de
una
pantalla

–  update="@(form)”

•  Actualizar
el
form
de
nombre
ﬁrst

–  update="@(form:ﬁrst)"

•  Actualizar
todos
los
componentes
cuya
styleClass
sea

miEsLlo

–  update="@(.miEsLlo)”

• 
Actualizar
todos
los
dataTable

–  update="@(.ui-‐datatable)”

Themes

•  hap://www.primefaces.org/themes

Enlaces

•  hap://www.primefaces.org

Primefaces

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Primefaces

Similaire à Primefaces (20)

Plus de Vortexbird

Plus de Vortexbird (12)

Dernier

Dernier (8)

Primefaces