JSF: etiquetas de plantilla
Las plantillas en una aplicación web definen un diseño y estilo de interfaz común. Por ejemplo, un mismo banner, logotipo en encabezado común e información de derechos de autor en pie de página. JSF proporciona las siguientes etiquetas de facelet para proporcionar un diseño de interfaz web estándar.
S. No | Etiqueta y descripción |
---|---|
1 | ui:insert Utilizado en el archivo de plantilla. Define los contenidos que se colocarán en una plantilla. ui: define tag puede reemplazar su contenido. |
2 | ui:define Define el contenido que se insertará en una plantilla. |
3 | ui:include Incluye el contenido de una página xhtml en otra página xhtml. |
4 | ui:composition Carga una plantilla usando templateatributo. También puede definir un grupo de componentes que se insertarán en la página xhtml. |
Crear plantilla
La creación de una plantilla para una aplicación web es un procedimiento paso a paso. Los siguientes son los pasos para crear una plantilla de muestra.
Paso 1: Cree el archivo de encabezado: header.xhtml
Utilizar ui:composition etiqueta para definir un contenido predeterminado de la sección Encabezado.
<ui:composition>
<h1>Default Header</h1>
</ui:composition>
Paso 2: Cree un archivo de pie de página: footer.xhtml
Utilizar ui:composition etiqueta para definir un contenido predeterminado de la sección Pie de página.
<ui:composition>
<h1>Default Footer</h1>
</ui:composition>
Paso 3: Cree el archivo de contenido: contents.xhtml
Utilizar ui:composition etiqueta para definir un contenido predeterminado de la sección Contenido.
<ui:composition>
<h1>Default Contents</h1>
</ui:composition>
Paso 4: Cree una plantilla: common.xhtml
Utilizar ui:insert y ui:includeetiqueta para incluir encabezado / pie de página y archivo de contenido en el archivo de plantilla. Nombra cada sección enui:insert etiqueta.
name atributo de ui:insert La etiqueta se utilizará para reemplazar el contenido de la sección correspondiente.
<h:body>
<ui:insert name = "header" >
<ui:include src = "header.xhtml" />
</ui:insert>
<ui:insert name = "content" >
<ui:include src = "contents.xhtml" />
</ui:insert>
<ui:insert name = "footer" >
<ui:include src = "footer.xhtml" />
</ui:insert>
</h:body>
Paso 5a: use la plantilla con contenido predeterminado: home.xhtml
Cargue common.xhtml, una plantilla usando ui:composition etiqueta en cualquier página xhtml.
<h:body>
<ui:composition template = "common.xhtml">
</h:body>
Paso 5b: use la plantilla y establezca su propio contenido: home.xhtml
Cargue common.xhtml, una plantilla usando ui:compositionetiqueta en cualquier página xhtml. Utilizarui:define etiqueta para anular los valores predeterminados.
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "content">
<h:link value = "Page 1" outcome = "page1" />
<h:link value = "Page 2" outcome = "page2" />
</ui:define>
</ui:composition>
</h:body>
Aplicación de ejemplo
Creemos una aplicación JSF de prueba para probar las etiquetas de plantilla en JSF.
Paso | Descripción |
---|---|
1 | Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el capítulo JSF - Primera aplicación . |
2 | Cree la carpeta de plantillas en src → principal → carpeta de aplicaciones web . |
3 | Cree los archivos header.xhtml, footer.xhtml, contents.xhtml y common.xhtml en la carpeta src → main → webapp → templates . Modifíquelos como se explica a continuación. |
4 | Cree los archivos page1.xhtml y page2.xhtml en src → main → carpeta webapp . Modifíquelos como se explica a continuación. |
5 | Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
6 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
7 | Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver. |
8 | Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso. |
header.xhtml
<?xml version = "1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Header</h1>
</ui:composition>
</body>
</html>
footer.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Footer</h1>
</ui:composition>
</body>
</html>
content.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Content</h1>
</ui:composition>
</body>
</html>
common.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:head></h:head>
<h:body>
<div style = "border-width:2px; border-color:green; border-style:solid;">
<ui:insert name = "header" >
<ui:include src = "/templates/header.xhtml" />
</ui:insert>
</div>
<br/>
<div style = "border-width:2px; border-color:black; border-style:solid;">
<ui:insert name = "content" >
<ui:include src = "/templates/contents.xhtml" />
</ui:insert>
</div>
<br/>
<div style = "border-width:2px; border-color:red; border-style:solid;">
<ui:insert name = "footer" >
<ui:include src = "/templates/footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
page1.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "header">
<h2>Page1 header</h2>
</ui:define>
<ui:define name = "content">
<h2>Page1 content</h2>
<h:link value = "Back To Home" outcome = "home" />
</ui:define>
<ui:define name = "footer">
<h2>Page1 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
page2.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "header">
<h2>Page2 header</h2>
</ui:define>
<ui:define name = "content">
<h2>Page2 content</h2>
<h:link value = "Back To Home" outcome = "home" />
</ui:define>
<ui:define name = "footer">
<h2>Page2 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
home.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template = "templates/common.xhtml">
<ui:define name = "content">
<br/><br/>
<h:link value = "Page 1" outcome = "page1" />
<h:link value = "Page 2" outcome = "page2" />
<br/><br/>
</ui:define>
</ui:composition>
</h:body>
</html>
Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.
Hacer clic Page1 enlace y verá el siguiente resultado.
O haga clic en Page2 enlace y verá el siguiente resultado.