primefaces
TRANSCRIPT
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 especificación JSF2.0
• Fácil de configurar. • Cuenta con Mobil UI Kit
Configuració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-‐fileupload 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
• Especificaciones • 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>
Configuración de tema visual
<context-‐param> <param-‐name>primefaces.THEME</param-‐name> <param-‐value>bootstrap</param-‐value>
</context-‐param>
Configuració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> <servlet-‐name>Faces Servlet</servlet-‐name> <url-‐paCern>*.jsf</url-‐paCern> </servlet-‐mapping> <servlet-‐mapping> <servlet-‐name>Faces Servlet</servlet-‐name> <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 definir el ClientId del componente que se desea actualizar.
<h:form id="myform"> <p:commandBuaon update="myform:display" /> <h:outputText id="display" value="#{bean.value}"/>
</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" value="#{bean.value}"/> </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>
NoAficando usuarios • Primefaces cuenta con ajaxStatus el cual noLfica 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 value="#{bean.value}"/> </h:form>
<h:form id="form1"> <p:commandBuaon id="btn" update="@form" process="@this" /> <h:outputText value="#{bean.value}"/> </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 first – update="@(form:first)"
• 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
