¿Cómo incluir otro XHTML en XHTML usando Facelets JSF 2.0?


¿Cuál es la forma más correcta de incluir otra página XHTML en una página XHTML? He estado probando diferentes maneras, ninguna de ellas está funcionando.

Author: BalusC, 2011-01-25

2 answers

<ui:include>

Forma Más básica es <ui:include>. El contenido incluido debe colocarse dentro <ui:composition>.

Ejemplo de lanzamiento 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, cualquier etiqueta fuera de <ui:composition> es innecesaria, ya que son ignoradas por las facetas 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 necesita ser abierto por /page.xhtml. Ten en cuenta que no necesitas repetir <html>, <h:head> y <h:body> dentro del archivo include como de lo contrario resultaría en HTML no válido.

Puede usar una expresión EL dinámica en <ui:include src>. Ver también Cómo ajax-refresh dynamic incluir contenido por menú de navegación? (JSF SPA) .


<ui:define>/<ui:insert>

Una forma más avanzada de incluir es plantillas. Esto incluye, básicamente, al revés. La página de la plantilla maestra debe usar <ui:insert> declarar lugares para insertar contenido de plantilla definido. La página de cliente de plantilla que está utilizando la página de la plantilla maestra debe utilizar <ui:define> para definir el contenido de la plantilla que se va a insertar.

Página de plantilla maestra /WEB-INF/template.xhtml (como sugerencia de diseño: el encabezado, el menú y el pie de página pueden a su vez incluso ser 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 de cliente de plantilla /page.xhtml (tenga en cuenta el atributo 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 necesita ser abierto por /page.xhtml. Si no hay <ui:define>, entonces el contenido predeterminado dentro de <ui:insert> será se muestra en su lugar, si lo hay.


<ui:param>

Puede pasar parámetros a <ui:include> o <ui:composition template> por <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 include/template, estará disponible como #{foo}. En caso de que necesite pasar" muchos " parámetros a <ui:include>, entonces será mejor que considere registrar el archivo de inclusión como un archivo de etiquetas, para que finalmente pueda usarlo como <my:tagname foo="#{bean.foo}">. Consulte también Cuándo usar , archivos de etiquetas, componentes compuestos y / o personalizados componentes?

Incluso puede pasar frijoles enteros, métodos y parámetros a través de <ui:param>. Ver también JSF 2: ¿cómo pasar una acción incluyendo un argumento para ser invocado a una sub-vista de Facelets (usando ui:include y ui: param)?


Consejos de diseño

Los archivos que no se supone que sean de acceso público con solo ingresar/adivinar su URL, deben colocarse en la carpeta /WEB-INF, como el archivo include y el archivo de plantilla en el ejemplo anterior. Véase también ¿Qué archivos XHTML necesito poner en /WEB-INF y cuáles no?

No es necesario que haya ningún marcado (código HTML) fuera de <ui:composition> y <ui:define>. Puedes poner cualquiera, pero será ignorado por las facetas. Poner marcado allí solo es útil para los diseñadores web. Ver también ¿Hay alguna manera de ejecutar una página de 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ías vea XHTML como un lenguaje que le permite producir resultados HTML usando una herramienta basada en XML. Ver también ¿Es posible utilizar Facelets JSF + con HTML 4/5? y JavaServer se enfrenta a la compatibilidad con 2.2 y HTML5, por qué se sigue utilizando XHTML.

Los archivos CSS/JS/image pueden ser incluidos como recursos dinámicamente reubicables/localizados/versionados. Véase también ¿Cómo hacer referencia al recurso CSS / JS / image en la plantilla Facelets?

Puede poner archivos Facelets en un FRASCO reutilizable file. Véase también Estructura para múltiples proyectos JSF con código compartido.

Para obtener ejemplos reales de plantillas de Facelets avanzadas, consulte la carpeta src/main/webapp de Java EE Kickoff App source code y OmniFaces showcase site source code.

 390
Author: BalusC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:03:02

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:composition como se muestra arriba.
  • Incluye ese archivo con ui:include en el archivo xhtml incluido como también se muestra arriba.
 22
Author: Benchik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-07 06:28:41