Tutorial Basico PrimeFaces

Esta guía contiene los siguientes puntos

¿Que es PrimeFaces?
Prerrequisitos
Crear el proyecto en Netbeans
Agregar la dependencia PrimeFaces a nuestro archivo pom.xml
Crear nuestra página index.xhtml
Agregar nuestro descriptor de despliege

¿Que es PrimeFaces?

PrimeFaces es una suite de componentes gráficos (botones, menús, listas, listas desplegables, tablas, paneles, dialogos y otros) para crear interfaces gráficas de usuarios para aplicaciones web. Prime Faces es una extensión de JSF(Java Server Faces). He usado esta suite para desarrollar aplicaciones JEE, existe una extensa documentación pero solo en ingles, es por ello que me nació la iniciativa de escribir un guía básica, la verdad es que PrimeFaces no es muy complejo, si has trabajado con JSF te adaptarás muy rapido.

Algunas características de PrimeFaces

Se compone de un amplio catalogo de componentes, editores Html, dialogos, cuadros de textos que se autocompletan, graficas y mucho más.
Se basa en APIs de Ajax y en el estandard JSF
Ligero, un solo jar, no requiere dependencias y cero configuraciones
Cuenta con un kit para desarrollo mobile
Cuenta con 35 temas y herramienta para diseñar mas temas
Extensa documentación pero solo en ingles
Tiene una comunidad grande y activa
Desarrollado con pasión, de desarrolladores de aplicaciones para desarrolladores de aplicaciones.

En esta guía básica solo mostraremos un popup con el mensaje "Hola Mundo desde PrimeFaces"

Prerrequisitos
Java JDK 6 o Java JDK 7
JBoss AS 7.1.1 Final
Netbeans 8.1 con Maven y Soporte para Java Web y JEE

Si tienes dudas con la instalación y configuración de JBoss, te recomiendo revisar mi entrada anterior Instalar jbossas7 en windows

JBoss AS 7, viene con Mojarra, el cual es una implementación de Java Server Faces versión 2.0

1.- Crear el proyecto en Netbeans
Crearemos un proyecto en Netbeans, File, New Project. En categories seleccionamos Maven y en projects seleccionamos Web Application, Next.

Ingresamos los siguientes datos, Next.

Seleccionamos el servidor JBoss as 7, Finish.

2.- Agregar la dependencia PrimeFaces a nuestro archivo pom.xml
Vamos a usar la version 5.3 de PrimeFaces, lo podemos hacer de dos formas, la primera es editando el archivo pom.xml y agregar el siguiente extracto de xml

<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.3</version>
</dependency>

La segunda opción es agregarlo de forma gráfica, en el navegador del proyecto, seleccionar Dependencies, click derecho Add Dependency

Add

3.- Crear nuestra página index.xhtml
En el navegador del proyecto, seleccionamos el directorio Web Pages, click derecho, New, Other, en Categories seleccionamos Web y en Files Type seleccionamos XHTML, Next.
En el siguiente Dialogo, ingresar el nombre index

Editamos la página, lo más relevante de nuestra página

El namespace de primefaces
xmlns:p="http://primefaces.org/ui"

El tag contenedor de Java Faces
<f:view contentType="text/html">

El resto son los componentes gráficos, aquí tienes la página completa.

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

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <title>PrimeFaces Demo</title>
        </h:head> 
        <body> 
            <h2>
PrimeFaces Demo</h2>
<h:form>
                <h:panelGrid columns="1" cellpadding="5">
                    <p:commandButton value="Abrir Dialogo" type="button" onclick="PF('dlg1').show();" />
                </h:panelGrid>

                <p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
                    <h:outputText value="Hola Mundo desde PrimeFaces!" />
                </p:dialog>
            </h:form>
        </body> 
    </f:view>
</html>

4.- Agregar nuestro descriptor de despliege
En el navegador de proyecto, seleccionamos el directorio Web Pages, click derecho, New, Other, en Categories seleccionamos Web y en Files Type seleccionamos Standard Deployment Descriptor (web.xml)

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

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0">
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <session-config>
        <session-timeout>60</session-timeout>
    </session-config>

    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Algunos tutoriales te dirán que debes tener el archivo de configuración faces-config.xml, para este ejemplo simple no es necesario.

Aquí puedes descargar el proyecto para Netbeans

Ejecutar
Siempre recomiendo primero hacer un Clean and Build y luego Run, la aplicación se desplegará en el navegador por defecto.

Conclusión

Java Server Faces ha evolucionado mucho, ahora es más simple sin tantos archivos de configuraciones como lo era en un inicio. PrimeFaces es una suite de componentes enriquecidos, facil de usar y que no requiere de dependencias ni configuraciones.

Referencia
https://www.primefaces.org/documentation/

!Ya estoy en youtube! suscribete a mi canal https://www.youtube.com/channel/UC6-tLGUyvfrb9ibuCipFQKg

Páginas

domingo, 5 de noviembre de 2017