¿Qué es Primefaces?
Primefaces es un librería ligera que no depende de otras librerías de terceros y no necesita configuraciones, se distribuye en un único jar y nos proporciona una serie de utilidades y componentes para usar con JavaServer Faces (JSF).Código Xules
Así, con Primefaces tendremos un gran número de componentes y diferentes temas para la presentación UI de JavaServer Faces (JSF) que es un framework para aplicaciones Java web que se utiliza para el desarrollo de aplicaciones empresariales Java EE.
Nos proporciona un UI framework para Java EE para nuestros desarrollos con JSF.Primefaces
En este proyecto vamos a utilizar Generador CRUD para Netbeans para Primefaces, vamos a probar la funcionalidad que nos proporciona inicialmente, y probar su adaptabilidad cuando tengamos que hacer las modificaciones necesarias para cumplir los requisitos que hemos definido para nuestro proyecto Learning Project.
Estás son algunas de las características principales que se destacan en la web de Primefaces:
- Un punto de vista diferente: sus desarrolladores usan está tecnología, pero no son vendedores del software, pero si proporcionan consultoría y actividades de aprendizaje.
- Simplicidad y rendimiento: es una librería que pesa poco y está encapsulada en un único jar.
- Fácil de usar: los componentes en Primefaces son desarrollados con unos principio de diseño el cual dice que un buen componente UI debería esconder la complejidad pero manteniendo la flexibilidad («A good UI component should hide complexity but keep the flexibility»).
- Un fuerte feedback de la comunidad: hay una contribución continua aportando ideas, resolviendo bugs,…
- Aplicaciones Spring: si realizas aplicaciones con Spring debes saber que la recomendación de Spring Source para el front-end con JSF es el uso de Primefaces, además es el único que soporta Spring Roo como front-end.
Vamos a probar el framework Primefaces con nuestro proyecto Learning Project con el que vamos a desarrollar un ejemplo con las funcionalidades necesarias para probar Primefaces para el desarrollo de aplicaciones web empresariales.
Tutorial Primefaces – Índice
- Introducción del proyecto
- Creación de la base de datos
- Creación del proyecto y configuración
- Creamos nuestra primera entidad CbLanguage
- Generamos Primefaces CRUD
1. Introducción del proyecto
Vamos a crear un proyecto para comprobar el desarrollo de aplicaciones con el framework Primefaces, no se pretende hacer una explicación exhaustiva del desarrollo de aplicaciones con Primefaces, sino simplemente desarrollar una aplicación con una funcionalidad y una presentación que nos permita analizar los beneficios y carencias que puede tener el uso de Primefaces.
El tutorial se desarrolla con una base de datos propia para el proyecto y todo el desarrollo se hará desde cero, con la ayuda y documentación que se nos facilita desde Primefaces.
Definición del proyecto
El proyecto consiste en la administración de clientes para diferentes empresas, para ello se plantea la necesidad de tener la información de la empresa y de los clientes, cada empresa podrá tener múltiples clientes, para el caso de estudio se plantea que ambas entidades tengan los campos básicos y direcciones que podrán ser una o varias.
Así mismo, y para completar el proyecto con el desarrollo que creemos necesario, se plantea que la tabla clientes tenga como tablas asociadas las tablas de: monedas, países e idiomas, que podrían ser tablas de uso general en la aplicación, y una tabla más específica como podría ser formas de pago.
2. Creación de la base de datos
Esquema con draw.io
Para hacernos unas idea de las relaciones entre las tablas vamos a presentar el siguiente esquema:
Esquema SQL
Para desarrollar este esquema vamos a necesitar las siguientes tablas, a continuación se explica su utilidad y algunas características básicas, el resto irá directamente sobre el código SQL:
|
Learning Project
|
||
|
TABLA
|
DESCRIPCIÓN
|
CARACTERÍSTICAS DE DISEÑO
|
|
cb_enterprise |
Empresas de la aplicación, cada empresa tendrá sus clientes. |
Las empresas tendrán definido inicialmente: idioma, país y moneda, así como los campos básicos para hacer pruebas. |
|
cb_customer |
Tabla general de cliente, donde se almacenarán los clientes de las diferentes empresas, se entiende cliente como aquel que compra a una empresa. |
Los tendrán definido inicialmente: idioma, país, direcciones, empresas, métodos de pago y moneda, así como los campos básicos para hacer pruebas. |
|
cb_addresses |
Tabla de registro de las direcciones, se asocian aquí las direcciones que tienen un cliente, cada cliente tendrá un número ilimitado de direcciones con cb_address relacionado mediante cb_addresses (es básicamente una tabla relacional). |
Registro para asociar las direcciones al cliente. |
|
cb_address |
Tabla de dirección donde se guardan los datos de la dirección en sí. |
Tabla de dirección que tendrá los campos generales de una dirección, así como números de teléfono, transportista y tipos de dirección. |
|
cb_language |
Tabla con los idiomas registrados en la aplicación, se podrá relacionar con múltiples tablas. |
|
|
cb_country |
Tabla con los países registrados en la aplicación, se podrá relacionar con múltiples tablas. |
Para cada país se especificará la moneda y el idioma utilizado por defecto. |
|
cb_currency |
Tabla con las monedas registradas en la aplicación, se podrá relacionar con múltiples tablas. |
|
|
cb_paymentmethod |
Métodos de pago definidos para el cliente u otras entidades. |
|
Aquí, solo voy publicar el script de la base de datos de MariaDB (MySQL) que llamaremos customerdb, para más información sobre como instalar MariaDB y como se crea la base de datos sobre MariaDB (MySQL), la puedes obtener aquí en el primer capítulo del tutorial de MariaDB y en una serie de publicaciones que continúan a esta donde se explican con detalle la creación de las tablas en MariaDB (MySQL) y la sintaxis SQL para la base de datos MySQL, …
Sql de la base de datos MariaDB (MySQL)
Si ya te has informado o si quieres descargarte ya el SQL desarrollado en MariaDB (MySQL) para el diseño de este proyecto, y también, un script para la población de datos de customerdb,aquí lo tienes:
Script para la creación de las tablas del esquema de customerdb definido en Learning Project:
Script para la población de datos de customerdb:
MariaDB SQL Script para la población de la base de datos Customerdb
Esquema de customerdb
A continuación, una imagen donde se muestran las relaciones reales de la base de datos, con los nombres de las claves foráneas, …
3. Creación del proyecto y configuración
Instalación y configuración de Primefaces CRUD
Para este proyecto vamos a utilizar el IDE Netbeans, sino lo tienes instalado lo puedes descargar desde su página este es el enlace: Netbeans download, en esta página tienes la descarga directa del IDE, también está disponible la instalación en español, en las imágenes de este tutorial se mostrará la versión en inglés que es la que yo utilizo.
Instalación del plugin de Primefaces
Ahora instalamos el plugin de Primefaces para esto seguimos los siguientes pasos:
- Abrimos Netbeans y nos vamos en el menú a Tools > Plugins (Herramienta > Plugins).
- Seleccionamos la pestaña de Available Plugins (Plugins disponibles), aquí buscamos Primefaces, lo seleccionamos y pulsamos el botón de instalación.
- Una vez hecho esto ya podemos seleccionarPrimefaces cuando creemos nuestro proyectos con JSF, ya que nos aparecerá como una de las librerías disponibles.
Instalación del plugin generador CRUD para Primefaces
Ahora vamos a instalar el plugin del Generador CRUD para Netbeans para Primefaces que vamos a utilizar:
- En primer lugar descarga del plugin para Netbeans en el enlace
- Abrimos Netbeans y nos vamos en el menú a Tools > Plugins (Herramienta > Plugins).
- Seleccionamos la pestaña de Downloaded (Descargados) y pulsamos el botón Add Plugins (Añadir plugins), aquí buscamos el archivo que hemos descargado del plugin que vamos a instalar tiene que tener una extenxión .nbm, lo seleccionamos y pulsamos el botón de instalación.
Ahora ya estamos listos para utilizar el plugin algunos enlaces de interés son los siguientes:
- Página del plugin: Generador CRUD para Netbeans para Primefaces
- Getting Started página de información para empezar con el plugin
Creación y definición del proyecto con Primefaces
Ahora ya estamos listos para empezar con nuestro proyecto, empezaremos creándolo, después definiremos la base de datos que vamos a utilizar y finalmente crearemos la clase para entidad cb_language para entrar en contacto y probar que todo funciona bien.
Creamos el proyecto
Para crear un proyecto en Netbeans vamos a File > New Project (Archivo > Nuevo Proyecto), una vez hecho esto nos aparecerá una ventana, aquí seleccionamos Java Web y nos aparece la opción Web Application como se muestra en la imagen:
Netbeans creando un proyecto Java Web
Le damos nombre a nuestro proyecto, en mi caso CustomerdbPrimefaces y lo ubicamos donde queramos:
Netbeans – Nombramos el proyecto
Seleccionamos el servidor de aplicaciones en este caso GlassFish con Java EE 7 y dejando la ruta por defecto para nuestro proyecto:
Netbeans – Selección del servidor de aplicaciones GlassFish
Seguimos avanzando y ahora seleccionaremos JSF y la librería Primefaces para su utilización como se muestra en las dos imágenes:
Netbeans – Seleccionamos JSF
Netbeans – Seleccionamos Primefaces
Y listo, con esto ya tenemos nuestro proyecto inicial con JSF y Primefaces creado, por defecto se crea con una plantilla por defecto, con lo que ya podemos ejecutar el proyecto y comprobar si todo funciona bien:
Netbeans explorando el proyecto creado
Ejecutamos el proyecto para desplegarlo sobre el servidor seleccionado:
Netbeans Run On Server
Y si todo fue bien veremos el siguiente resultado :
Primefaces CRUD proyecto creado
4. Creamos nuestra primera entidad CbLanguage
Consultamos la tabla cb_language
Esta es la tabla con la que vamos a iniciar las pruebas, aquí puedes ver como conectar en Netbeans la base de datos MariaDB (MySQL) que hemos creado anteriormente, una vez configurado podemos ver las tablas creadas en la base de datos y hacer una consulta usando el editor sobre la primera ttabla que vamos a implementar, así de sencillo:
Editor SQL Netbeans para customerdb
Editor SQL Netbeans consulta sobre cb_language
Creamos las clases de entidad para cb_language
Seleccionamos New > Entity Classes from Database:
Creando las clases con Entity Classes From Database
Creamos un nuevo Data Source para la base de datos customerdb:
Entity Classes From Database – selección de Data Source base de datos
Establecemos un nombre JNDI como por ejemplo CustomerbdMariaDB y seleccionamos la conexión de la base de datos, como por ejemplo:
Entity Classes From Database – selección base de datos
Ahora podrás ver todas las tablas de la base de datos que hemos creado, para empezar seleccionamos únicamente la tabla cb_language para ir explicando poco a poco que es lo que estamos haciendo, y lo que es más importante como lo podemos modificar y adaptar a nuestras necesidades, más adelante explicaremos las posibilidades que se nos presentan, ahora haz la selección que se indica en la imagen:
Entity Classes From Database seleccionamos cb_language
Y ya llegamos al último paso, seleccionamos y pulsamos Finish:
Entity Classes From Database indicamos el paquete y generamos las clases
Explora las clases que se han creado para la persistencia de datos para la clase cb_language.
5. Generamos Primefaces CRUD para nuestra entidad
Ahora vamos a utilizar el Generador CRUD para Netbeans para Primefaces que hemos instalado para generar las páginas para las clases que creamos anteriormente para cb_language que es la clase org.xulescode.custormerdb.jpa.CbLanguage.
En primer lugar seleccionamos la opción como se muestra en la figura:
Primefaces CRUD
Seleccionamos las clases de tipo entidad del proyecto, en este momento como solo hemos generado org.xulescode.custormerdb.jpa.CbLanguage la añadimos:
Seleccionamos las clases de tipo entidad del proyecto
Generamos las páginas JSF para el proyecto pudiendo seleccionar la ubicación:
Primefaces CRUD Generamos las páginas JSF seleccionando la ubicación
También se generan las páginas para los móviles donde podemos seleccionar la ubicación de los ficheros que se van a generar, aquí los vamos a dejar con la opción por defecto:
Primefaces CRUD Páginas para móviles
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 y finalizamos:
Primefaces CRUD Opciones
Ahora en nuestro proyecto aparecen una serie de clases que nos servirán para manejar las diferentes opciones para la entidad, también se crea un nuevo menú con los accesos básicos para poder realizar todas las acciones necesarias para el mantenimiento y gestión de cb_language.
Exploremos el resultado de Primefaces CRUD
Para ejecutar nuestro proyecto CustomerdbPrimefaces en el servidor GlassFish, nos situamos con el cursor encima del proyecto y buscamos la opción Run, nuestro proyecto se ejecutará en el navegador que tengamos configurado por defecto, es el resultado que tendrías que ver en pantalla si has realizado correctamente el tutorial:
Primefaces CRUD Application MENU
Si seleccionamos en el menú Cb Language accedemos al listado de los idiomas de la aplicación, este es el resultado:
Primefaces CRUD Application LIST CB LANGUAGE
Veamos algunas opciones situando el curso encima de una fila y pulsando el botón izquierdo del botón nos aparecen las siguientes opciones: Create, View, Edit y Delete, que en definitiva son las acciones que conforman nuestra aplicación Primefaces CRUD.
Primefaces CRUD Application LIST FILTER
Selección de la opción View para ver un registro:
Primefaces CRUD Application LIST VIEW
Ahora seleccionamos la opción Edit sobre un registro y cambiamos algún campo para comprobar el funcionamiento, en nuestro caso actualizamos un registro de nuestra aplicación Primefaces CRUD sustituyendo (Spanish) por (España)
Primefaces CRUD Application LIST UPDATE
Al guardar los cambios se cierra la pantalla y ya se actualiza en el listado principal como se muestra en nuestra imagen:
Primefaces CRUD Application LIST actualización del listado
Exploremos el resultado de Primefaces CRUD
Vamos a ver la opción de crear un nuevo elemento, pulsamos la opcion CREATE en nuestra aplicación, nos aparecerá esta pantalla:
Primefaces CRUD CREATE
Completamos los datos del registro y pulsamos SAVE:
Primefaces CRUD CREATE SAVE guardamos los resultados
Nos aparecerá una ventana para confirmar la acción de guardar el registro, como se muestra aquí:
Primefaces CRUD CREATE SAVE confirmation
Finalmente, en nuestra pantalla principal aparece el nuevo valor que hemos creado, en este caso he utilizado el filtro para que solo aparezca este registro como puedes ver:
Primefaces CRUD CREATE RESULT
Exploremos Primefaces CRUD para Móvil
Primefaces CRUD versión móvil, desde el menú podemos acceder a la versión móvil de nuestra aplicación Primefaces CRUD, así es como se ve:
Primefaces CRUD Mobile version
Accedemos a la lista de la entidad creada y vemos la visualización de los registros en nuestra versión móvil de Primefaces CRUD:
Primefaces CRUD Mobile version LIST
Para crear un registro pulsamos el botón CREATE y esta sería la visualización de la pantalla:
Primefaces CRUD Mobile version CREATE
Ya puedes continuar con los siguientes capítulos
2.1 Entity classes from database Primefaces CRUD – Primefaces (2.1) creamos las entidades para nuestro proyecto y analizamos el código
2.2 Creación de las páginas CRUD Primefaces del proyecto – Primefaces (2.2) vamos a ver los resultados de la creación de Primefaces CRUD de las entidades de nuestra base de datos MySQL (MariaDB).
Espero que te haya sido útil. Xules
Ahora evalúa la misma aplicación desarrollada con Spring Roo o con Openxava
Aplicación Web CRUD, segura y multiidioma con Spring Roo con PostgreSQL
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
En esta primera parte que vamos a dividir en tres capítulos vamos a desarrollar un proyecto con total funcionalidad siguiendo la propuesta de Learning Project, en el primero prepararemos el entorno y empezaremos la programación, en el segundo buscaremos definir todas las clases del modelo para el proyecto, y por último, actualizaremos la presentación analizando las capacidades de Openxava.
¿Qué es Primefaces?
Primefaces es un librería ligera que no depende de otras librerías de terceros y no necesita configuraciones, se distribuye en un único jar y nos proporciona una serie de utilidades y componentes para usar con JavaServer Faces (JSF).Código Xules
Así, con Primefaces tendremos un gran número de componentes y diferentes temas para la presentación UI de JavaServer Faces (JSF) que es un framework para aplicaciones Java web que se utiliza para el desarrollo de aplicaciones empresariales Java EE.
Nos proporciona un UI framework para Java EE para nuestros desarrollos con JSF.Primefaces
En este proyecto vamos a utilizar Generador CRUD para Netbeans para Primefaces, vamos a probar la funcionalidad que nos proporciona inicialmente, y probar su adaptabilidad cuando tengamos que hacer las modificaciones necesarias para cumplir los requisitos que hemos definido para nuestro proyecto Learning Project.
Estás son algunas de las características principales que se destacan en la web de Primefaces:
- Un punto de vista diferente: sus desarrolladores usan está tecnología, pero no son vendedores del software, pero si proporcionan consultoría y actividades de aprendizaje.
- Simplicidad y rendimiento: es una librería que pesa poco y está encapsulada en un único jar.
- Fácil de usar: los componentes en Primefaces son desarrollados con unos principio de diseño el cual dice que un buen componente UI debería esconder la complejidad pero manteniendo la flexibilidad («A good UI component should hide complexity but keep the flexibility»).
- Un fuerte feedback de la comunidad: hay una contribución continua aportando ideas, resolviendo bugs,…
- Aplicaciones Spring: si realizas aplicaciones con Spring debes saber que la recomendación de Spring Source para el front-end con JSF es el uso de Primefaces, además es el único que soporta Spring Roo como front-end.
Vamos a probar el framework Primefaces con nuestro proyecto Learning Project con el que vamos a desarrollar un ejemplo con las funcionalidades necesarias para probar Primefaces para el desarrollo de aplicaciones web empresariales.
Tutorial Primefaces
Introducción del proyecto
Vamos a crear un proyecto para comprobar el desarrollo de aplicaciones con el framework Primefaces, no se pretende hacer una explicación exhaustiva del desarrollo de aplicaciones con Primefaces, sino simplemente desarrollar una aplicación con una funcionalidad y una presentación que nos permita analizar los beneficios y carencias que puede tener el uso de Primefaces.
El tutorial se desarrolla con una base de datos propia para el proyecto y todo el desarrollo se hará desde cero, con la ayuda y documentación que se nos facilita desde Primefaces.
Definición del proyecto
El proyecto consiste en la administración de clientes para diferentes empresas, para ello se plantea la necesidad de tener la información de la empresa y de los clientes, cada empresa podrá tener múltiples clientes, para el caso de estudio se plantea que ambas entidades tengan los campos básicos y direcciones que podrán ser una o varias.
Así mismo, y para completar el proyecto con el desarrollo que creemos necesario, se plantea que la tabla clientes tenga como tablas asociadas las tablas de: monedas, países e idiomas, que podrían ser tablas de uso general en la aplicación, y una tabla más específica como podría ser formas de pago.
Creación de la base de datos
Esquema con draw.io
Para hacernos unas idea de las relaciones entre las tablas vamos a presentar el siguiente esquema:
Esquema SQL
Para desarrollar este esquema vamos a necesitar las siguientes tablas, a continuación se explica su utilidad y algunas características básicas, el resto irá directamente sobre el código SQL:
|
Learning Project
|
||
|
TABLA
|
DESCRIPCIÓN
|
CARACTERÍSTICAS DE DISEÑO
|
|
cb_enterprise |
Empresas de la aplicación, cada empresa tendrá sus clientes. |
Las empresas tendrán definido inicialmente: idioma, país y moneda, así como los campos básicos para hacer pruebas. |
|
cb_customer |
Tabla general de cliente, donde se almacenarán los clientes de las diferentes empresas, se entiende cliente como aquel que compra a una empresa. |
Los tendrán definido inicialmente: idioma, país, direcciones, empresas, métodos de pago y moneda, así como los campos básicos para hacer pruebas. |
|
cb_addresses |
Tabla de registro de las direcciones, se asocian aquí las direcciones que tienen un cliente, cada cliente tendrá un número ilimitado de direcciones con cb_address relacionado mediante cb_addresses (es básicamente una tabla relacional). |
Registro para asociar las direcciones al cliente. |
|
cb_address |
Tabla de dirección donde se guardan los datos de la dirección en sí. |
Tabla de dirección que tendrá los campos generales de una dirección, así como números de teléfono, transportista y tipos de dirección. |
|
cb_language |
Tabla con los idiomas registrados en la aplicación, se podrá relacionar con múltiples tablas. |
|
|
cb_country |
Tabla con los países registrados en la aplicación, se podrá relacionar con múltiples tablas. |
Para cada país se especificará la moneda y el idioma utilizado por defecto. |
|
cb_currency |
Tabla con las monedas registradas en la aplicación, se podrá relacionar con múltiples tablas. |
|
|
cb_paymentmethod |
Métodos de pago definidos para el cliente u otras entidades. |
|
Aquí, solo voy publicar el script de la base de datos de MariaDB (MySQL) que llamaremos customerdb, para más información sobre como instalar MariaDB y como se crea la base de datos sobre MariaDB (MySQL), la puedes obtener aquí en el primer capítulo del tutorial de MariaDB y en una serie de publicaciones que continúan a esta donde se explican con detalle la creación de las tablas en MariaDB (MySQL) y la sintaxis SQL para la base de datos MySQL, …
Sql de la base de datos MariaDB (MySQL)
Si ya te has informado o si quieres descargarte ya el SQL desarrollado en MariaDB (MySQL) para el diseño de este proyecto, y también, un script para la población de datos de customerdb,aquí lo tienes:
Script para la creación de las tablas del esquema de customerdb definido en Learning Project:
Script para la población de datos de customerdb:
MariaDB SQL Script para la población de la base de datos Customerdb
Esquema de customerdb
A continuación, una imagen donde se muestran las relaciones reales de la base de datos, con los nombres de las claves foráneas, …
Creación del proyecto y configuración
Instalación y configuración de Primefaces CRUD
Para este proyecto vamos a utilizar el IDE Netbeans, sino lo tienes instalado lo puedes descargar desde su página este es el enlace: Netbeans download, en esta página tienes la descarga directa del IDE, también está disponible la instalación en español, en las imágenes de este tutorial se mostrará la versión en inglés que es la que yo utilizo.
Instalación del plugin de Primefaces
Ahora instalamos el plugin de Primefaces para esto seguimos los siguientes pasos:
- Abrimos Netbeans y nos vamos en el menú a Tools > Plugins (Herramienta > Plugins).
- Seleccionamos la pestaña de Available Plugins (Plugins disponibles), aquí buscamos Primefaces, lo seleccionamos y pulsamos el botón de instalación.
- Una vez hecho esto ya podemos seleccionarPrimefaces cuando creemos nuestro proyectos con JSF, ya que nos aparecerá como una de las librerías disponibles.
Instalación del plugin generador CRUD para Primefaces
Ahora vamos a instalar el plugin del Generador CRUD para Netbeans para Primefaces que vamos a utilizar:
- En primer lugar descarga del plugin para Netbeans en el enlace
- Abrimos Netbeans y nos vamos en el menú a Tools > Plugins (Herramienta > Plugins).
- Seleccionamos la pestaña de Downloaded (Descargados) y pulsamos el botón Add Plugins (Añadir plugins), aquí buscamos el archivo que hemos descargado del plugin que vamos a instalar tiene que tener una extenxión .nbm, lo seleccionamos y pulsamos el botón de instalación.
Ahora ya estamos listos para utilizar el plugin algunos enlaces de interés son los siguientes:
- Página del plugin: Generador CRUD para Netbeans para Primefaces
- Getting Started página de información para empezar con el plugin
Creación y definición del proyecto con Primefaces
Ahora ya estamos listos para empezar con nuestro proyecto, empezaremos creándolo, después definiremos la base de datos que vamos a utilizar y finalmente crearemos la clase para entidad cb_language para entrar en contacto y probar que todo funciona bien.
Creamos el proyecto
Para crear un proyecto en Netbeans vamos a File > New Project (Archivo > Nuevo Proyecto), una vez hecho esto nos aparecerá una ventana, aquí seleccionamos Java Web y nos aparece la opción Web Application como se muestra en la imagen:
Netbeans creando un proyecto Java Web
Le damos nombre a nuestro proyecto, en mi caso CustomerdbPrimefaces y lo ubicamos donde queramos:
Netbeans – Nombramos el proyecto
Seleccionamos el servidor de aplicaciones en este caso GlassFish con Java EE 7 y dejando la ruta por defecto para nuestro proyecto:
Netbeans – Selección del servidor de aplicaciones GlassFish
Seguimos avanzando y ahora seleccionaremos JSF y la librería Primefaces para su utilización como se muestra en las dos imágenes:
Netbeans – Seleccionamos JSF
Netbeans – Seleccionamos Primefaces
Y listo, con esto ya tenemos nuestro proyecto inicial con JSF y Primefaces creado, por defecto se crea con una plantilla por defecto, con lo que ya podemos ejecutar el proyecto y comprobar si todo funciona bien:
Netbeans explorando el proyecto creado
Ejecutamos el proyecto para desplegarlo sobre el servidor seleccionado:
Netbeans Run On Server
Y si todo fue bien veremos el siguiente resultado :
Primefaces CRUD proyecto creado
Consultamos la tabla cb_language
Esta es la tabla con la que vamos a iniciar las pruebas, aquí puedes ver como conectar en Netbeans la base de datos MariaDB (MySQL) que hemos creado anteriormente, una vez configurado podemos ver las tablas creadas en la base de datos y hacer una consulta usando el editor sobre la primera ttabla que vamos a implementar, así de sencillo:
Editor SQL Netbeans para customerdb
Editor SQL Netbeans consulta sobre cb_language
Creamos las clases de entidad para cb_language
Seleccionamos New > Entity Classes from Database:
Creando las clases con Entity Classes From Database
Creamos un nuevo Data Source para la base de datos customerdb:
Entity Classes From Database – selección de Data Source base de datos
Establecemos un nombre JNDI como por ejemplo CustomerbdMariaDB y seleccionamos la conexión de la base de datos, como por ejemplo:
Entity Classes From Database – selección base de datos
Ahora podrás ver todas las tablas de la base de datos que hemos creado, para empezar seleccionamos únicamente la tabla cb_language para ir explicando poco a poco que es lo que estamos haciendo, y lo que es más importante como lo podemos modificar y adaptar a nuestras necesidades, más adelante explicaremos las posibilidades que se nos presentan, ahora haz la selección que se indica en la imagen:
Entity Classes From Database seleccionamos cb_language
Y ya llegamos al último paso, seleccionamos y pulsamos Finish:
Entity Classes From Database indicamos el paquete y generamos las clases
Explora las clases que se han creado para la persistencia de datos para la clase cb_language.
Utilizamos la utilidad de Primefaces CRUD
Ahora vamos a utilizar el Generador CRUD para Netbeans para Primefaces que hemos instalado para generar las páginas para las clases que creamos anteriormente para cb_language que es la clase org.xulescode.custormerdb.jpa.CbLanguage.
En primer lugar seleccionamos la opción como se muestra en la figura:
Primefaces CRUD
Seleccionamos las clases de tipo entidad del proyecto, en este momento como solo hemos generado org.xulescode.custormerdb.jpa.CbLanguage la añadimos:
Seleccionamos las clases de tipo entidad del proyecto
Generamos las páginas JSF para el proyecto pudiendo seleccionar la ubicación:
Primefaces CRUD Generamos las páginas JSF seleccionando la ubicación
También se generan las páginas para los móviles donde podemos seleccionar la ubicación de los ficheros que se van a generar, aquí los vamos a dejar con la opción por defecto:
Primefaces CRUD Páginas para móviles
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 y finalizamos:
Primefaces CRUD Opciones
Ahora en nuestro proyecto aparecen una serie de clases que nos servirán para manejar las diferentes opciones para la entidad, también se crea un nuevo menú con los accesos básicos para poder realizar todas las acciones necesarias para el mantenimiento y gestión de cb_language.
Exploremos el resultado de Primefaces CRUD
Para ejecutar nuestro proyecto CustomerdbPrimefaces en el servidor GlassFish, nos situamos con el cursor encima del proyecto y buscamos la opción Run, nuestro proyecto se ejecutará en el navegador que tengamos configurado por defecto, es el resultado que tendrías que ver en pantalla si has realizado correctamente el tutorial:
Primefaces CRUD Application MENU
Si seleccionamos en el menú Cb Language accedemos al listado de los idiomas de la aplicación, este es el resultado:
Primefaces CRUD Application LIST CB LANGUAGE
Veamos algunas opciones situando el curso encima de una fila y pulsando el botón izquierdo del botón nos aparecen las siguientes opciones: Create, View, Edit y Delete, que en definitiva son las acciones que conforman nuestra aplicación Primefaces CRUD.
Primefaces CRUD Application LIST FILTER
Selección de la opción View para ver un registro:
Primefaces CRUD Application LIST VIEW
Ahora seleccionamos la opción Edit sobre un registro y cambiamos algún campo para comprobar el funcionamiento, en nuestro caso actualizamos un registro de nuestra aplicación Primefaces CRUD sustituyendo (Spanish) por (España)
Primefaces CRUD Application LIST UPDATE
Al guardar los cambios se cierra la pantalla y ya se actualiza en el listado principal como se muestra en nuestra imagen:
Primefaces CRUD Application LIST actualización del listado
Exploremos el resultado de Primefaces CRUD
Vamos a ver la opción de crear un nuevo elemento, pulsamos la opcion CREATE en nuestra aplicación, nos aparecerá esta pantalla:
Primefaces CRUD CREATE
Completamos los datos del registro y pulsamos SAVE:
Primefaces CRUD CREATE SAVE guardamos los resultados
Nos aparecerá una ventana para confirmar la acción de guardar el registro, como se muestra aquí:
Primefaces CRUD CREATE SAVE confirmation
Finalmente, en nuestra pantalla principal aparece el nuevo valor que hemos creado, en este caso he utilizado el filtro para que solo aparezca este registro como puedes ver:
Primefaces CRUD CREATE RESULT
Exploremos Primefaces CRUD para Móvil
Primefaces CRUD versión móvil, desde el menú podemos acceder a la versión móvil de nuestra aplicación Primefaces CRUD, así es como se ve:
Primefaces CRUD Mobile version
Accedemos a la lista de la entidad creada y vemos la visualización de los registros en nuestra versión móvil de Primefaces CRUD:
Primefaces CRUD Mobile version LIST
Para crear un registro pulsamos el botón CREATE y esta sería la visualización de la pantalla:
Primefaces CRUD Mobile version CREATE
Espero que te haya sido útil. Xules
Hola muy buen blog, deseo cambiar el diseño del CRUD sin agregar Tema con estilos CSS pero no puedo, habría alguna manera de hacerlos
Hola Jacqui.
En primer lugar muchas gracias por tu valoración, puedes aplicar estilos CSS a la página en general, si esos estilos afectan a los componentes tienes que usar los atributos del componente: style y styleClass:
Puedes consultar los ejemplos en Primefaces Showcase buscando en el apartado de documentación los atributos, por ejemplo aquí: http://www.primefaces.org/showcase/ui/panel/layout/element.xhtml
Espero que esto te guíe en la resolución de tus problemas.
Saludos.
Favor como se puede en una datatable Primafaces , Todo el registro sea dentro del datatable :
Por ejemplo al registrar una factura en la parte de los items, en una celda de la tabla ingresar un código articulo que consulte a la base de datos y muestre su descripción de articulo , dentro del datatable en la siguiente columna.
Hola Jorge.
Una forma de hacerlo si entiendo bien lo que preguntas es mediante rowExpansion, en la web de Primefaces tienes un ejemplo: ejemplo expansion, esto lo que hace es que al pulsar el botón de expansión puedes mostrar datos dentro de rowExpansion pudiendo construir una Panel u otra Datatable, este sería el esquema del ejemplo sacado de la web de Primefaces:
<h:form> <p:dataTable var="car" value="#{dtBasicView.cars}"> <f:facet name="header"> Expand rows to see detailed information </f:facet> <p:column style="width:16px"> <p:rowToggler /> </p:column> <p:column headerText="Id"> <h:outputText value="#{car.id}" /> </p:column> <p:column headerText="Year"> <h:outputText value="#{car.year}" /> </p:column> <p:rowExpansion> <p:panelGrid columns="2" columnClasses="label,value" style="width:300px"> <f:facet name="header"> <p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/> </f:facet> <h:outputText value="Id:" /> <h:outputText value="#{car.id}" /> <h:outputText value="Year" /> <h:outputText value="#{car.year}" /> <h:outputText value="Color:" /> <h:outputText value="#{car.color}" style="color:#{car.color}"/> <h:outputText value="Price" /> <h:outputText value="$#{car.price}" /> </p:panelGrid> </p:rowExpansion> </p:dataTable> </h:form>El resultado final sería:
Espero que te sea útil mi respuesta, hádmelo saber aquí, saludos.
CODIGO DESCRIPCION CANTIDAD
100 LLANTA 185/R 20
gracias por la respuesta , pero mi pregunta es que dentro del datatable , por ejemplo en la primera columna , en la celda digitar el codigo de articulo consulte la base de datos y en la segunda columna de la misma fila mostrar la descripcion del articulo
Hola de nuevo Jorge.
No te puedo dar un ejemplo, pero si guiarte como hacerlo.
Espero que con esto resuelvas tus dudas.
Saludos.
Saludos desde Ecuador muy bena explicación, felicitaciones..!
Una pregunta, como realizo la configuración para implementar dos bases de datos en el mismo proyecto, la cosa es que no sé dónde hacer la configuración ya que no tengo mucha experiencia con esto, agradezco tu ayuda.
Hola Roger, gracias por tu valoración.
Para utilizar 2 bases de datos las tienes que definir en la unidad de persistencia: persistence.xml, tal que así:
<?xml version="1.0" encoding="UTF-8"?> <persistence version="2.1" xmlns="http://xmlns.jcp.org/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd"> <persistence-unit name="CustomerdbPrimefacesProjectPU" transaction-type="JTA"> <jta-data-source>CustomerdbDataSource</jta-data-source> <exclude-unlisted-classes>false</exclude-unlisted-classes> <properties/> </persistence-unit> <persistence-unit name="SEGUNDA-BASE-DE-DATOS" transaction-type="JTA"> <jta-data-source>CustomerdbDataSource</jta-data-source> <exclude-unlisted-classes>false</exclude-unlisted-classes> <properties/> </persistence-unit> </persistence>Después tendrás que seleccionar la que quieres utilizar en el EntityManager:
@PersistenceContext(unitName="CustomerdbPrimefacesProjectPU", type=PersistenceContextType.TRANSACTION) private EntityManager entityManagerCustomerdb; @PersistenceContext(unitName="SEGUNDA-BASE-DE-DATOS", type=PersistenceContextType.TRANSACTION) private EntityManager entityManagerSegundaBaseDeDatos;Si te he ayudado con mi respuesta, hádmelo saber aquí, gracias.
Un saludo.
Saludos;
Excelente blog y excelente tutorial lo he seguido paso a paso y la implementacion ha ido genial, pero he intentado agregar un PF().filter() para la busqueda y no m funciona (he seguido los ejemplos de la pagina oficial de primefaces donde parace simple su implementacion), me gustaria saber que tan complicado es agregar esta funcionalidad y si teneis una idea de como implementarlo me vendria bien…gracias
Hola Angel.
Muchas gracias por tu valoración sobre mi blog, perdón por haber tardado tanto en responderte, en estos momentos no puedo pasarte un ejemplo de como usar PF().filter(), si lo he utilizado en alguna ocasión siguiendo la documentación.
Saludos.
Excelente tutorial, tengo una duda, he intentado agregar un método para autocompletar un imputText siguiendo los ejemplos de la página oficial de Primefaces, cómo podría hacerlo, espero tu respuesta, gracias de antemano.
Hola, tengo un proyecto escolar en donde use Primefaces, JSF y JPA
lo que sucede es que algunos formularios son muy parecido por que son para crear ciudades, crear cargos, crear tipos de cargos, entre otros….
La idea es que estos tres primeros formularios estén en un tamsheet o algo así como lo que tu tienes en tu ejemplo, todo esto para que el usuario no se pierda y para que se vea mejor.
Como se hace para incluir estas pestañas y que se tenga la navegación y la funcionalidad de los botones ya que cuando insertamos el código de primefaces dejan de funcionar los vínculos y no se puede crear ni eliminar.
disculpa segui todo al pie de la letra pero al final me sale esto
GlassFish Server 4, deploy, null, false
C:\Users\tony\Documents\NetBeansProjects\primefacesEjemplo\nbproject\build-impl.xml:1050: The module has not been deployed.
See the server log for details.
Felicitarte por el tutorial
Muchas gracias Nestor, espero que te haya servido de ayuda.
Un saludo.
Felicitaros, muy buen tutorial. Si requieren de una formación in company u online, no dejen de consultar nuestro curso primefaces
Hola Carlos.
Gracias por tu valoración.
Un saludo.
hola me pueden ayudar con un dialog en prime faces y jsf
Felicitaciones por todas estas guias
Es una gran ayuda el que algunas paginas esten en 2 idiomas, ademas de mejorar mi ingles leo algo que me interesa. El «problema» es que si activas el ingles modificando directamente la url, despues es bastante confuso como volver a la version en español. Seria ideal en que los articulos traducidos hubiera un link a su traduccion.
He tenido algunos «problemillas» para seguir este articulo:
– en la creacion de tablas esta cb_address.estate y en el de carga esta cb_address.state
– new datasource no me generaba el schema, vi tarde la explicación en la 2 parte del articulo, asi que solucione con «proyecto – new – otros – persistencia – database schema» y posteriormente en otra prueba desde la administración del servidor de payara, generando el pool y el jndi.
– error al compilar «javax.validation does not exis», lo solucione renombrando validation-api.jar como bean-validator.jar.
– error al complilar «cannot find symbol @Inject», lo solucione añadiendo manualmente en CbLanguageController.java
import javax.inject.Inject;
– Esto es solo un aporte por si alguien tiene problemas parecidos y esto le pudiera ayudar.
Me parece muy interesante tu blog, y seguire leyendo muchos de tus articulos asi como todo lo nuevos que escribas.
Hola Miguel.
Muchas gracias por tu aporte, tendré en cuenta las mejoras que propones en la gestión de los idiomas, aunque desgraciadamente solo está traducido al inglés un 15% de la web, de momento no llego para hacer las traducciones de todas las publicaciones, lo que si mantengo es la traducción en la documentación del código.
Un saludo.
Me ha funcionado todo correctamente, pero en la version movil si pulso en editar, si es del principio de la lista si me muestra la ficha, pero si hago algo de scroll al dar editar hace el intento pero no hace nace.
Lo he probado en un iphone 5 con version 10.2.1
¿alguna idea de este problema?
Hola Miguel.
Ahora mismo no tengo un iphone disponible para hacer las pruebas, si te diré que parece más un problema del navegador y la configuración del iphone que de la versión móvil desarrollada con Primefaces.
Un saludo.
Hola,
He seguido el tutorial hasta crear al CRUD de cbLanguage.
Al intentar ejecutarlo, aparece el siguiente error:
/index.xhtml @9,64 Invalid path : /WEB-INF/include/template.xhtml
Este tutorial es mi primera lección de JSF y PrimeFaces, luego no logro entender cuál es el problema.
Saludos amigos!!!
quisiera que me guie e como puedo hacer un buscador.. con primefaces … quiero buscar algo y ver todo lo que contiene y agregar nuevas cosas; ejemplo busco una marca de carro y a essa aggrago un nuevo vehiculo…
Hola excelente tutorial a mi me sirvio muchisimo en una implementacion :D, tengo solo un problema y es que al momento de hacer un cambio en la base de datos tengo que reahacer todo el proyecto de nuevo y eso me tarda muchisimo tiempo.
Como puedo hacer cambios en la base de datos y generarar de nuevpo el CRUD sin tener que volver a hacer el proyecto??
Muchas gracias.
Hola buen tutorial.
Tengo un pequeño problema, lo que pasa es que tengo la vista de el encabezado de una factura y cuando selecciono la fila y escojo la opción de ver quiero que me muestre las lineas de la factura que estén relacionadas con el encabezado.
Apenas he comenzado a usar primefaces y no lo puedo solucionar aun.
Gracias.