Esta publicación continúa el desarrollo de la guía de creación de aplicaciones con Primefaces, aquí vamos a ver los resultados de la creación de Primefaces CRUD de las entidades de nuestra base de datos MySQL (MariaDB) que desarrollamos en la publicación anterior: Entity classes from database Primefaces CRUD – Primefaces (2.1).

Estos son los apartados que vamos a ver en está publicación:

Creación de las páginas CRUD Primefaces del proyecto – Primefaces (2.2)

  1. CREACIÓN DE LAS PÁGINAS CRUD CON PRIMEFACES
  2. EL RESULTADO
  3. AÑADIMOS SOPORTE MULTIIDIOMA
  4. CAMBIAMOS EL TEMA

 

Para que te sitúes estos son los apartados vistos anteriormente:

  1. Creación del proyecto y puesta en marcha (2.1)
  2. Creamos las entidades para nuestro proyecto (2.1)
  3. Analizamos el código creado (2.1)
  4. Definiendo manualmente la conexión (Glassfish) (2.1)

¿Empezamos?

5. CREACIÓN DE LAS PÁGINAS CRUD CON PRIMEFACES

Una vez creadas las entidades vamos a continuar con la creación CRUD de nuestras páginas para Primefaces, todo lo que necesitas tener instalado te lo explico aquí Instalación y configuración de Primefaces CRUD con detalle. En resumen:

Una vez finalizada la instalación ya podemos proceder a la generación de las páginas CRUD para Primefaces con nuestro plugin, estas son las entidades que hemos incluido en nuestro esquema y que en la publicación anterior definimos con detalles:

Para lanzar el generador seleccionamos sobre nuestro proyecto New > Primefaces Pages from Entity classes como se muestra en la imagen:

Primefaces CRUD

Primefaces CRUD


 

Seleccionamos todas las entidades y continuamos con la creación:

Primefaces Project - Creando las páginas para las entidades

Primefaces Project – Creando las páginas para las entidades


 

Definimos ahora los paquetes para las clases que se generarán, en mi caso me gusta las clases en diferentes paquetes para facilitar su manejo como se muestra en la imagen:

Primefaces Project - Java Packages

Primefaces Project – Java Packages


 

Indicamos ahora donde se generarán las página JSF Primefaces:

Primefaces-02-Project-PrimefacesPages-03-JSF-Pages

Primefaces-02-Project-PrimefacesPages-03-JSF-Pages


 

Primefaces tiene una presentación propia y diferenciada de sus componentes para el entorno móvil por eso se generarán unas páginas independientes para la versión móvil:

Primefaces-02-Project-PrimefacesPages-04-Mobile-Pages

Primefaces-02-Project-PrimefacesPages-04-Mobile-Pages


 

Por último, en el siguiente paso se nos muestran las diferentes opciones del plugin Generador CRUD para Netbeans para Primefaces, de momento no entraremos en más detalle, hacemos la selección como se muestra en la imagen y finalizamos:

Primefaces-02-Project-PrimefacesPages-05-Options

Primefaces-02-Project-PrimefacesPages-05-Options


 

Al finalizar la creación de las páginas de Primefaces observamos algún error en nuestro proyecto, esto es porque nos falta alguna librería por incluir, vamos al menú en Libraries y seleccionamos Java EE 7 API Library
 

6. EL RESULTADO

Ya estamos listos para desplegar nuestro proyecto y empezar las pruebas, si así sin más. Este será el resultado:

Primefaces Project - Menú principal

Primefaces Project – Menú principal

Como puedes ver en el menú principal tenemos acceso al menú WEB en Maintenance y al menú MÓVIL en Mobile, este menú se carga en index.xhtml donde utilizamos el sistema de plantillas para ir cargando las diferentes páginas, este es el código del índice:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/customer/template.xhtml">
        <ui:define name="title">
            <h:outputText value="#{customerBundle.AppName}"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <p:panel header="#{customerBundle.Welcome}">
                <p><h:outputText value="#{customerBundle.WelcomeMessage}"></h:outputText></p>
            </p:panel>
        </ui:define>
    </ui:composition>
</html>

Simplemente mostramos este código para mostrar el sistema de plantillas Facelets que se está utilizando, como puedes en este caso se utiliza template.xhtml y se carga con .

Ahora no profundizaré en este tema ya que lo haré más adelante al elaborar mi propia presentación, mi recomendación es que explores por tu cuenta el sistema utilizado, simplemente accede a lo diferentes ficheros utilizados en la plantilla, el esquema es sencillo.

Facelets un sistema de código abierto de plantillas web bajo la Licencia Apache y la tecnología de controlador de JavaServer Faces (JSF)Wikipedia

 

Web

Ahora ya podemos ver el resultado de nuestro proyecto, desde la opción de menú Maintenance tenemos acceso a todos los listados de nuestras entidades, como puedes ver desplegando el menú. Si seleccionamos la entidad CbCountry veremos un tabla con todos los países cargados en el sistema:

Primefaces Project - CbCountry List

Primefaces Project – CbCountry List

El listado de cada entidad se ha creado con todas las opciones de creación, lectura, actualización y borrado (Create Read Update Delete), y así simplemente, accediendo al menú popup obtenemos todas estas opciones sobre cada fila como se muestra en la imagen:

Primefaces Project - Aplicación con el listado de países

Primefaces Project – Aplicación con el listado de países

¿Qué código se ha generado para mostrar esto? Explorando las páginas creadas puedes ver que para cada entidad en la carpeta Web Pages > Customer encontrarás las siguientes páginas:

  • cbCountry/Create.xhtml
  • cbCountry/Edit.xhtml
  • cbCountry/List.xhtml
  • cbCountry/View.xhtml
  • cbCountry/index.xhtml

Como su nombre indica cada una efectuará la representación web de la acción requerida, a continuación, vemos como se muestran con un diálogo superpuesto las opciones de View (Vista) y Edit (Edición)

Primefaces Project - CbCountry View

Primefaces Project – CbCountry View

Primefaces Project - CbCountry Edit

Primefaces Project – CbCountry Edit


 

Explora el código generado y familiarizate con él, en próximas publicaciones crearemos nuestro propio sistema de gestión CRUD.

Móvil

Para la versión móvil se generan unas páginas específicas adaptadas a estos dispositivos, y para ello con Primefaces utilizamos su versión de componentes para el móvil, por ejemplo:

    <pm:field>
        <p:outputLabel value="#{customerBundle.EditCbCountryLabel_country}" for="country" />
        <p:inputText id="country" value="#{cbCountryController.selected.country}" title="#{customerBundle.EditCbCountryTitle_country}" required="true" requiredMessage="#{customerBundle.EditCbCountryRequiredMessage_country}" size="100" maxlength="100"/>
    </pm:field>

 

Utilizando estos componentes obtenemos la siguiente versión móvil de forma sencilla, empezando por el listado:

Primefaces Project - Versión móvil CbCountry list

Primefaces Project – Versión móvil CbCountry list

Al igual que antes, las páginas generadas para cada entidad en la carpeta Web Pages > Customer > m nos permitirán realizar las gestiones CRUD en formato móvil:

  • cbCountry/Create.xhtml
  • cbCountry/Edit.xhtml
  • cbCountry/List.xhtml
  • cbCountry/View.xhtml
  • cbCountry/index.xhtml

Desde el menú principal accediendo a la opción Mobile seleccionando cualquiera de las opciones obtendrás un listado como el que se muestra a continuación para CbCountry, desde ahí tendrás acceso a la creación, lectura, actualización y borrado (Create Read Update Delete):

Primefaces Project - Versión móvil list

Primefaces Project – Versión móvil list

Como se veía en la imagen anterior podemos acceder fácilmente a la creación de un nuevo elemento desde el botón CREATE, ahora simplemente nos queda añadir los datos y comprobar su funcionamiento creando un nuevo país:

Primefaces Project - Versión móvil create

Primefaces Project – Versión móvil create

Por último, para mostrar un poco más vemos la versión móvil para la actualización de un elemento:

Primefaces Project - Versión móvil edit

Primefaces Project – Versión móvil edit


 

7. AÑADIMOS SOPORTE MULTIIDIOMA

En nuestro proyecto podemos añadir fácilmente varios idiomas, lo que será bastante fácil si lo comparamos con la labor de traducir todos los textos. En 3 pasos vamos a añadir un nuevo idioma nos colocamos sobre el fichero CustomerdbBundle.properties (lo encontrarás en el paquete por defecto), y en el menú buscamos la opción Add > Locale:

PrimefacesProjectInit-I18n-01

PrimefacesProjectInit-I18n-01

Definimos el New Locale donde podemos introducirlo a mano o seleccionar una de las opciones, en mi caso seleccion es_ES_EURO:

PrimefacesProjectInit-I18n-02

PrimefacesProjectInit-I18n-02

Como puedes ver se ha creado un nuevo fichero CustomerdbBundle_es_ES_EURO.properties, ahora solo te queda acceder a la opción de edición y realizar todas las traducciones:

PrimefacesProjectInit-I18n-03-Actualizando

PrimefacesProjectInit-I18n-03-Actualizando


 

8. CAMBIAMOS EL TEMA

La actualización de nuestro proyecto con un nuevo tema de Primefaces es bastantes sencillo. En primer lugar necesitamos descargar el tema que queremos cargar o hacer la descarga completa de todos los temas disponibles aportados por la comunidad:

Una vez descargado necesitamos añadir la librería a nuestro proyecto, aquí añade el jar directamente al proyecto o crear una librería nueva que lo incluya con el nombre de Primefaces themes, por ejemplo.

Una vez hecho esto necesitamos indicarle a nuestra aplicación que tema cargar, esto lo haremos en nuestro fichero de configuración web.xml, lo puedes encontrar dentro de Web Pages > WEB-INF, este es el contenido:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <context-param>  
        <param-name>primefaces.THEME</param-name>  
        <param-value>bootstrap</param-value>  
    </context-param>  
    <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>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

 

Es importante que te familiarices con los ficheros de configuración ya que al profundizar en el desarrollo de aplicaciones esto se hará cada vez más necesario.

Ahora, añadamos el tema, en mi caso voy a seleccionar el tema Bootstrap, para eso simplemente añado este código en el fichero web.xml:

    <context-param>  
        <param-name>primefaces.THEME</param-name>  
        <param-value>bootstrap</param-value>  
    </context-param>

 

Despliega nuevamente el proyecto y ya está, ya tienes el nuevo tema instalado y funcionando, así queda el tema Bootstrap:

Primefaces Project - Tema Bootstrap

Primefaces Project – Tema Bootstrap

Espero que te haya sido útil. Xules

 

Espero que te haya sido útilXules

¿Qué hacemos ahora?

Ahora puedes comparar el desarrollo de Primefaces con otros frameworks que también usan metodologías CRUD para la creación rápida de proyectos como Spring Roo y OpenXava.

 

Aplicación Web CRUD, segura y multiidioma con Spring Roo con PostgreSQL

Logo_SpringRoo

Aplicación Web CRUD, segura y multiidioma con Spring Roo con PostgreSQL – Guía Spring Roo 1. Con Spring Roo definimos nuestra entidades, generamos la aplicación Web CRUD, le añadimos Spring Security y diferentes idiomas para la aplicación desde nuestra consola Roo.Código Xules

 
 

OpenXava

Creamos el proyecto Learning Project con OpenXava donde prepararemos el entorno, empezaremos la programación, definiremos todas las clases del modelo para el proyecto, y por último, actualizaremos la presentación analizando las capacidades de OpenXava.Xules