Centro

de Comercio y Servicios
Regional Cauca


GUIA #7. USO DE TEMPLATES CON PRIMEFACES

Las herramientas que se utilizarán para el desarrollo son:
- Entorno de desarrollo: Netbeans 8.0.2
- Servidor de Aplicaciones: Glassfish 3.5
- Herramientas y frameworks: EJB, JSF (PrimeFaces)

1. Creación de Proyecto Web
En nuestro entorno de desarrollo creamos un nuevo proyecto web, el nombre de proyecto en nuestro caso será
“Templates” y elegimos el framework web a utilizar. En nuestro caso sería JavaServer Faces -> Primefaces.

2. Creación de la plantilla
En nuestro proyecto, hacemos click derecho y seleccionamos la opción new/other. En la ventana que se despliega
seleccionamos la categoría “JavaServer Faces” y el tipo de archivo “Facelets Template”, y siguiente.

A continuación le damos nombre a nuestro archivo “plantilla” y el tipo de plantilla que queremos generar

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

Como producto de este proceso se crea dentro del proyecto un archivo plantilla.xhtml y una carpeta de resources
que contiene los estilos que se aplican (css)

El código que se genera en la plantilla nos muestra cómo aplicar los estilos a la página (contenidos dentro de las
etiquetas <h:head> </h:head>) y el esqueleto del diseño generado a través de la etiqueta <div> y <ui:insert> que
para nuestro caso se ubican en la parte superior (cabecera), inferior (pie de página) y centro (contenido):

Oscar Viveros Egas. ohviveros@misena.edu.co
 Centro de Comercio y Servicios
Regional Cauca


Ahora, vamos a modificar la plantilla, de tal forma que tengamos la misma cabecera y pie da página para toda la
aplicación. Para nuestro caso, el diseño de la cabecera tendrá definido el menú con las opciones que el usuario podrá
ejecutar, modificamos entonces el código del archivo plantilla.xhtml en el contenido del <div id=”top”> para la
cabecera y del <div id=”bootom”> para el pie de página:

Para que este código funcione correctamente debimos haber creado una carpeta “imagenes” dentro de “resources”
que contenga la imagen de la cabecera, y las url de cada item del menú por ahora no redirige a ninguna página.
Veamos el pie de página:

Para verificar cómo va quedando nuestra plantilla, vamos a darle click derecho al archivo y ejecutarlo. Para su
ejecución se debe verificar que el servidor Glassfish se encuentre iniciado. El resultado del código agregado en la
plantilla sería algo así (se modificaron algunos valores de la hoja de estilo cssLayout):

3. Cliente para el uso de la plantilla
Una vez hemos creado la plantilla, debemos generar los clientes que puedan utilizarla y los cuales contendrán la
funcionalidad de la aplicación. Inicialmente creamos un folder “contents” dentro del cual crearemos por carpetas
todas nuestras páginas de contenido. Al interior de esta carpeta, por mayor orden, creamos un nuevo folder
“productos” y dentro de este sus respectivos clientes de la plantilla:

Oscar Viveros Egas. ohviveros@misena.edu.co

 Centro de Comercio y Servicios
Regional Cauca

Una vez hemos dado click, debemos darle un nombre (crear), seleccionar la carpeta donde va a ser creado (damos
click en “Browse…” seleccionamos la carpeta “productos”) y seleccionar el template del cual es cliente (damos click
en “Browse…” y seleccionamos el archivo plantilla.xhtml); adicionalmente de las secciones a generar en el nuevo
archivo dejamos elegida solo la opción “content”, ya que la cabecera y pie de página serán reutilizados de la plantilla.
Damos click en finalizar:

Repetimos el paso anterior para crear dos archivos adicionales en la carpeta productos “buscar” y “editar” y en una
nueva carpeta “ventas”(al interior de contents) crear los archivos “buscar” y “crear”

Modifiquemos el contenido de cada archivo para poder diferenciarlo de los demás.
Oscar Viveros Egas. ohviveros@misena.edu.co
 Centro de Comercio y Servicios
Regional Cauca


4. Navegación entre las diferentes pantallas
Ahora debemos agregar un código que le otorgue funcionalidad al menú de la cabecera para navegar entre las
diferentes opciones (entre las páginas que acabamos de crear como clientes de la plantilla). Para esto, vamos a
modificar el código al interior de la etiqueta <ui:insert name=”Top”> del archivo plantilla.xhtml:

Al ejecutar nuestra aplicación, se podrá navegar por las diferentes opciones que se describen en el menú.
Tendríamos ahora que generar el diseño y la funcionalidad para cada una de estas.

¡¡¡GRACIAS!!!

Oscar Viveros Egas. ohviveros@misena.edu.co