Sigue a Genbetadev

PrimeFaces - aplicando temas

Ya vimos como “instalar” PrimeFaces sobre NetBeans, así que vamos a dar un segundo paso, y empezar a crear alguna página con este cómodo y ligero framework.

En esta ocasión vamos a ver una de las características visuales de PrimeFaces: los temas de apariencia. Usaremos los que ya están disponibles en el framework, aunque tenemos que tener en cuenta que siempre podremos crear temas propios, y así ampliar el conjunto proporcionado.

Creando el proyecto y ejecutándolo


Lo primero que debemos hacer es crear un proyecto, y añadir la biblioteca de PrimeFaces a el, de manera que podamos usarlo en nuestras páginas. Estos pasos ya se vieron en el artículo “PrimeFaces: framework sobre JSF 2.0. Primeros pasos“, con lo cual no los vamos a repetir.

Una vez creado el proyecto escribiremos el código de la página index.xhtml:

Desplegamos el proyecto y vemos el resultado. El aspecto que presenta la página es el siguiente:
PrimeFaces - aspecto del tema por defecto
He añadido la aplicación de un efecto al texto presentado “Pulsa sobre mí para ver como exploto” para que además podamos ver como se aplican los efectos de JQuery en este framework, para, en este caso, una etiqueta de texto. Así que pulsad sobre el texto para ver el efecto, y cambiad el efecto entre los disponibles en los comentarios que he colocado en la página, para experimentar un poco.

Acto seguido vemos la página de temas disponibles para PrimeFaces y elegimos el que nos guste. Accedemos al repositorio y descargamos el tema elegido. Para nuestro ejemplo nos descargaremos el fichero .jar que contiene todos los temas disponibles:
Descargando todos los temas disponibles

Añadimos la librería del tema correspondiente al proyecto, o en nuestro caso la librería de todos los temas. Para ello crearemos dentro del directorio WEB-INF una carpeta lib, y dentro de ella copiaremos el fichero .jar que previamente hemos descargado:
Copiando el fichero .jar en el lugar correspondiente del proyecto

Una vez hecho esto, sólo debemos especificar cual de los temas disponibles queremos configurar para nuestro proyecto. Para ello modificamos el fichero web.xml, añadiendo las siguientes líneas:

Si volvemos a desplegar el proyecto y vemos el resultado, veremos cómo se ha aplicado el tema que hemos configurado, cambiando el aspecto de toda la página:
PrimeFaces - resultado de aplicar uno de los temas disponibles

Esta funcionalidad es útil cuando nuestro tema no va a cambiar, y queremos dar un aspecto a la página distinto al que viene por defecto. PrimeFaces nos permite además un cambio de este aspecto “en caliente”, que será el tema que tratemos en el siguiente artículo sobre este framework.

Más información | Temas disponibles para PrimeFaces | Repositorio de temas de PrimeFaces
En GENBETA | PrimeFaces: framework sobre JSF 2.0. Primeros pasos

Los comentarios se han cerrado

Ordenar por:

3 comentarios