12. Curso de Java Server Faces 2.0 (Plantillas)

Plantillas en JSF 2.0

El objetivo de las plantillas es reutilizar código, implementando partes de código ya escritas en una página conocida como “TEMPLATE” dentro de otras páginas conocidas como “CLIENTES DEL TEMPLATE”.

Un ejemplo son las aplicaciones donde siempre se muestra una cabecera, un menú y un pie de página, lo único que va cambiando es la sección de contenido. Implementando las plantillas de JSF 2.0 en nuestras paginas solo nos preocuparíamos por la parte del contenido de la pagina y nos olvidaríamos de cabeceras, menús laterales y pies de pagina.

 
Ejemplos de plantillas:

 

Para implementar plantillas en JSF 2.0 debemos implementar dos elementos:

1.   Facelets Template
2.   Facelets Template Client

Facelets Template:

Es la plantilla o diseño donde se especifican las diferentes secciones dentro de una página, aquí se definen cabeceras, menús laterales, pies de página y contenido.

Facelets Template Client:

Es la pagina que va a implementar al TEMPLATE, solo se preocupara por escribir alguna(s) secciones de código, ya que al importar el TEMPLATE se importan sus diferentes regiones.

Para comenzar a utilizar plantillas debemos importar el namespace “ui” para poder hacer uso de los tags de templates.

 

Si queremos aplicar una hoja de estilos a nuestra página usamos la etiqueta:


 


JSF 2.0 cuenta con los siguientes Facelets tags:

 

Descripción de los tags más importantes:

ui:composition 

Define una composición que opcionalmente usa una plantilla, múltiples composiciones pueden usar la misma plantilla, con esto se encapsula y reutiliza el layout, JSF no toma en cuenta todo lo que esta fuera de la composición.

ui:define

Define el contenido que es insertado dentro de una pagina por una plantilla, el tag ui:define puede ser usado dentro de: ui:composition, ui:component, ui:decorate, y ui:fragment tags.

ui:insert

Inserta contenido en una plantilla. El contenido es definido con ui:define en cualquiera de los siguientes tags: ui:composition, ui:component, ui:decorate o ui:fragment.

ui:include

Encapsula y reutiliza contenido entre múltiples paginas XHTML, hay 3 cosas que este componente puede incluir: XHTML plano, paginas XHTML que tienen su tag ui:composition o ui:component. Usted deberá proporcionar el nombre de archivo a través del atributo “src”.

Ejemplo de Plantilla:

 


Ejemplo de cliente:

 

Ejecución:

En el template se definieron las secciones de Cabecera, menú izquierdo, pie de página y contenido. El cliente del template solo uso la parte del contenido a través de la etiqueta ui:define dentro de la etiqueta ui:composition que importa el layout dentro de la pagina cliente.