Primefaces
-
Upload
vortexbird -
Category
Software
-
view
76 -
download
5
Transcript of Primefaces
![Page 2: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/2.jpg)
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
![Page 3: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/3.jpg)
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'
![Page 4: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/4.jpg)
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
![Page 5: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/5.jpg)
RunAme
• Especificaciones • JSF 2.0 • JSF 2.1 • JSF 2.2
![Page 6: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/6.jpg)
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>
![Page 7: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/7.jpg)
Configuración de tema visual
<context-‐param> <param-‐name>primefaces.THEME</param-‐name> <param-‐value>bootstrap</param-‐value>
</context-‐param>
![Page 8: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/8.jpg)
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>
![Page 9: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/9.jpg)
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>
![Page 10: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/10.jpg)
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>
![Page 11: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/11.jpg)
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>
![Page 12: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/12.jpg)
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>
![Page 13: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/13.jpg)
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>
![Page 14: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/14.jpg)
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.
![Page 15: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/15.jpg)
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>
![Page 16: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/16.jpg)
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
![Page 17: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/17.jpg)
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.
![Page 18: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/18.jpg)
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)”
![Page 19: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/19.jpg)
Themes
• hap://www.primefaces.org/themes
![Page 20: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/20.jpg)
Enlaces
• hap://www.primefaces.org
![Page 21: Primefaces](https://reader031.fdocuments.mx/reader031/viewer/2022020208/55b42fc5bb61eb0b3f8b45a8/html5/thumbnails/21.jpg)