JSF - ui: etiqueta param
Usando la etiqueta ui: param , podemos pasar parámetros al archivo de plantilla o un archivo incluido.
En el capítulo JSF: etiquetas de plantilla , hemos aprendido cómo crear y usar etiquetas de plantilla. Definimos varias secciones como encabezado, pie de página, contenido y una plantilla que combina todas las secciones.
Ahora aprenderemos
Cómo pasar parámetros a varias secciones de una plantilla
Cómo pasar parámetro (s) a una plantilla
Parámetro a sección de una plantilla
Crear parámetro: common.xhtml
Agregar parámetro a ui: include tag. Utilizarui:param etiqueta para definir un parámetro que contiene un valor que se pasará a la sección Encabezado.
<ui:insert name = "header" >
<ui:include src = "/templates/header.xhtml" >
<ui:param name = "defaultHeader" value = "Default Header" />
</ui:include>
</ui:insert>
Utilice el parámetro: header.xhtml
<ui:composition>
<h1>#{defaultHeader}</h1>
</ui:composition>
Parámetro a plantilla
Crear parámetro: home.xhtml
Agregar parámetro a ui: etiqueta de composición. Utilizarui:param etiqueta para definir un parámetro que contiene un valor que se pasará a la plantilla.
<ui:composition template = "templates/common.xhtml">
<ui:param name = "title" value = "Home" />
</ui:composition>
Utilice el parámetro: common.xhtml
<h:body>
<h2>#{title}</h2>
</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 - Templates Tag . |
2 | Modificar header.xhtml y common.xhtml archivos bajo src → principal → → webapp plantillas de carpeta. Modifíquelos como se explica a continuación. |
3 | Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
4 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
5 | Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver. |
6 | 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>#{defaultHeader}</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>
<h2>#{title}</h2>
<div style = "border-width:2px; border-color:green; border-style:solid;">
<ui:insert name = "header" >
<ui:include src = "/templates/header.xhtml" >
<ui:param name = "defaultHeader" value = "Default Header" />
</ui:include>
</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>
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:param name = "title" value = "Home" />
<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.