jsf - mkyong - ui:composition primefaces
¿Cómo incluir otro XHTML en XHTML utilizando JSF 2.0 Facelets? (2)
<ui:include>
La forma más básica es <ui:include> . El contenido incluido se debe colocar dentro de <ui:composition> .
Ejemplo de inicio de la página maestra /page.xhtml :
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Include demo</title>
</h:head>
<h:body>
<h1>Master page</h1>
<p>Master page blah blah lorem ipsum</p>
<ui:include src="/WEB-INF/include.xhtml" />
</h:body>
</html>
La página de inclusión /WEB-INF/include.xhtml (sí, este es el archivo en su totalidad, todas las etiquetas fuera de <ui:composition> son innecesarias, ya que Facelets las ignora de todos modos):
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h2>Include page</h2>
<p>Include page blah blah lorem ipsum</p>
</ui:composition>
Esto debe ser abierto por /page.xhtml . Tenga en cuenta que no necesita repetir <html> , <h:head> y <h:body> dentro del archivo de inclusión, ya que de lo contrario se obtendría un HTML no válido .
Puede usar una expresión EL dinámica en <ui:include src> . Consulte también ¿Cómo ajax-refresh dynamic incluir contenido en el menú de navegación? (JSF SPA) .
<ui:define> / <ui:insert>
Una forma más avanzada de incluir es la creación de plantillas . Esto incluye básicamente al revés. La página de la plantilla maestra debe usar <ui:insert> para declarar lugares para insertar el contenido de la plantilla definida. La página del cliente de la plantilla que utiliza la página de la plantilla maestra debe usar <ui:define> para definir el contenido de la plantilla que se va a insertar.
Página de la plantilla maestra /WEB-INF/template.xhtml (como sugerencia de diseño: el encabezado, el menú y el pie de página pueden ser, a su vez, archivos <ui:include> ):
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
<div id="footer">Footer</div>
</h:body>
</html>
Página del cliente de la plantilla / /page.xhtml (tenga en cuenta el atributo de la template ; también aquí, este es el archivo en su totalidad):
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
Esto debe ser abierto por /page.xhtml . Si no hay <ui:define> , entonces se mostrará el contenido predeterminado dentro de <ui:insert> , si corresponde.
<ui:param>
Puede pasar los parámetros a <ui:include> o <ui:composition template> mediante <ui:param> .
<ui:include ...>
<ui:param name="foo" value="#{bean.foo}" />
</ui:include>
<ui:composition template="...">
<ui:param name="foo" value="#{bean.foo}" />
...
</ui:composition >
Dentro del archivo de inclusión / plantilla, estará disponible como #{foo} . En caso de que necesite pasar "muchos" parámetros a <ui:include> , entonces debería considerar registrar el archivo de inclusión como un archivo de etiquetas, para que finalmente pueda usarlo así como <my:tagname foo="#{bean.foo}"> . Consulte también ¿ Cuándo utilizar <ui: include>, archivos de etiquetas, componentes compuestos y / o componentes personalizados?
Incluso puedes pasar beans completos, métodos y parámetros a través de <ui:param> . Consulte también JSF 2: cómo pasar una acción que incluye un argumento que se debe invocar a una subvista de Facelets (usando ui: include y ui: param)?
Consejos de diseño
Los archivos que no deben ser de acceso público simplemente ingresando / adivinando su URL, deben colocarse en la carpeta /WEB-INF , como el archivo de inclusión y el archivo de plantilla en el ejemplo anterior. Vea también ¿Qué archivos XHTML necesito poner en / WEB-INF y cuáles no?
No es necesario que haya ninguna marca (código HTML) fuera de <ui:composition> y <ui:define> . Puedes poner cualquiera, pero Facelets los ignorará . Poner marcas allí solo es útil para los diseñadores web. Ver también ¿Existe una manera de ejecutar una página JSF sin construir todo el proyecto?
El doctype HTML5 es el doctype recomendado en estos días, "a pesar de" que es un archivo XHTML. Debería ver XHTML como un lenguaje que le permite producir resultados HTML utilizando una herramienta basada en XML. Consulte también ¿Es posible utilizar JSF + Facelets con HTML 4/5? y JavaServer Faces 2.2 y compatibilidad con HTML5, por qué aún se usa XHTML .
Los archivos CSS / JS / image se pueden incluir como recursos reubicables / localizados / versionados dinámicamente. Consulte también ¿Cómo hacer referencia al recurso CSS / JS / image en la plantilla de Facelets?
Puede colocar los archivos de Facelets en un archivo JAR reutilizable. Vea también Estructura para múltiples proyectos JSF con código compartido .
Para ver ejemplos del mundo real de plantillas de Facelets avanzadas, consulte la carpeta src/main/webapp webapp del código fuente de la aplicación de inicio de Java EE y el código fuente del sitio de presentación de OmniFaces .
¿Cuál es la forma más correcta de incluir otra página XHTML en una página XHTML? He estado tratando de diferentes maneras, ninguno de ellos está funcionando.
Página incluida:
<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>
Incluyendo la página:
<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
- Inicia su archivo xhtml incluido con
ui:compositioncomo se muestra arriba. - Incluyes ese archivo con
ui:includeen el archivo xhtml incluido como también se muestra arriba.