Los Facelets proporcionan etiquetas para crear fácilmente composiciones de plantillas basadas en un único archivo de plantilla, similar a la tecnología de .NET de páginas maestras. La finalidad de este mecanismo es la de reducir la duplicación de código para diversas secciones del sitio web que se repiten en todas las páginas web, como:
- El encabezado
- El menú de navegación
- El pie de página.
El archivo de plantilla maestra debe representar un diseño de página web completo con todas las secciones de todo el sitio y usar etiquetas <ui: insert=""> para representar los lugares donde se pueden insertar las secciones específicas de la página.
Creando la estructura
Para ello , se creará un archivo plantilla, y archivos satélite que contengan el código de la cabecera y pie de página. Además, de diversas páginas para comprobar la navegación. La estructura debe ser la siguiente:
El código de layout.xhtml es:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>#{title}</title>
</h:head>
<h:body>
<header>
<ui:include src="/WEB-INF/includes/layout/header.xhtml" />
</header>
<main>
<ui:insert name="content" />
</main>
<footer>
<ui:include src="/WEB-INF/includes/layout/footer.xhtml" />
</footer>
</h:body>
</html>
</code>
El código de header.xhtml es:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<a href="#{request.contextPath}/">
INICIO
</a>
<nav>
<ul>
<li><h:link outcome="/about" value="About" /></li>
<li><h:link outcome="/help" value="Help" /></li>
<li><h:link outcome="/contact" value="Contact" /></li>
</ul>
</nav>
<hr/>
</ui:composition>
El código de footer.xhtml es:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<hr/>
<nav>
<ul>
<li>Términos de servicio</li>
<li>Política de privacidad</li>
<li>Política de cookies</li>
</ul>
</nav>
<small>
© JavaJhon
</small>
</ui:composition>
El código de index.xhtml es:
<ui:composition template="/WEB-INF/template/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:param name="title" value="Inicio" />
<ui:define name="content">
<h1>Pantalla de inicio</h1>
<p>Lorem ipsum dolor sit amet.</p>
</ui:define>
</ui:composition>
Tendremos una interacción como se aprecia en la imagen
Fuentes:
- Schotlz, B. y Tijms, A. (2018). The Definitive Guide to JSF in Java EE 8:Building Web Applications with JavaServer Faces. United States of America: Apress.
No hay comentarios:
Publicar un comentario