jsf 2 plantillas con facelets ejemplo

JSF 2 plantillas con Facelets ejemplo

En la aplicación web, la mayoría de las páginas se sigue un diseño de la interfaz web similar y el estilo, por ejemplo, el mismo encabezado y pie de página. En JSF 2.0, puede utilizar etiquetas Facelets para proporcionar una interfaz de diseño web estándar con facilidad, de hecho, es un aspecto similar con marco Azulejo Apache .

En este ejemplo, se muestra el uso de 4 etiquetas Facelets para construir la página a partir de una plantilla:

1. ui: insert - Se utiliza en el archivo de plantilla, que define el contenido que se va a sustituir por el archivo que cargar la plantilla. El contenido se puede reemplazar con "ui: define" tag.

2. ui: define - Define el contenido que se inserta en la plantilla con un "ui: insert" juego de etiquetas.

3. ui: include - Similar a la de JSP "jsp: include", incluye el contenido de otra página XHTML.4. ui: Composición - Si se usa con el atributo "plantilla", la plantilla especificada está

cargada, y los hijos de esta etiqueta define la composición de la plantilla, de lo contrario, es un grupo de elementos que se pueden insertar en alguna parte. Además, JSF elimina todas las etiquetas "fuera" de la "ui: Composición" tag.

1. Diseño de plantillasEn JSF 2.0, un archivo de plantilla es un archivo XHTML normal, con pocas etiquetas facelets JSF para definir el diseño de la plantilla.

File : commonLayout.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:outputStylesheet name="common-style.css" library="css" />

</h:head>

<h:body>

<div id="page">

<div id="header">

<ui:insert name="header" >

<ui:include src="/template/common/commonHeader.xhtml" />

</ui:insert>

</div>

<div id="content">

<ui:insert name="content" >

<ui:include src="/template/common/commonContent.xhtml" />

</ui:insert>

</div>

<div id="footer">

<ui:insert name="footer" >

<ui:include src="/template/common/commonFooter.xhtml" />

</ui:insert>

</div>

</div>

</h:body>

</html>

En este modelo, se define el diseño web estándar:

1. Utiliza " h: outputStylesheet "etiqueta para incluir un archivo CSS en la cabeza para peinar todo el diseño de la página.

2. Utiliza " ui: insert "etiqueta para definir tres secciones reemplazables: encabezado, contenido y pie de página.

3. Utiliza " ui: include "tag para proporcionar un contenido por defecto si no se especifica ningún reemplazo cuando se utiliza la plantilla.

2. Encabezado, contenido y pie de páginaTres contenido de la página por defecto.

File : commonHeader.xhtml






>

<body>

<ui:composition>

<h1>This is default header</h1>

</ui:composition>

</body>

</html>

File : commonContent.xhtml






>

<body>

<ui:composition>

<h1>This is default content</h1>

</ui:composition>

</body>

</html>

File : commonFooter.xhtml






>

<body>

<ui:composition>

<h1>This is default footer</h1>

</ui:composition>

</body>

</html>

Cuando estas páginas se insertan en el archivo de plantilla, todas las etiquetas fuera de la " :

ui composición serán eliminados ". Por ejemplo,

File : commonHeader.xhtml






>

<body>

ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF

<ui:composition>


</ui:composition>

ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF

</body>

</html>

JSF sólo toma elementos siguientes y se insertan en el archivo de plantilla

<ui:composition>


</ui:composition>

Al insertar en la "commonLayout" plantilla, se convirtió en ...

File : commonLayout.xhtml

...

<h:body>

<div id="page">

<div id="header">


</div>

...

3. Utilizando TemplatePara utilizar una plantilla existente, por ejemplo. " commonLayout.xhtml ", utilice" ui:

Composición "de la etiqueta con un atributo" plantilla ". Vea los dos ejemplos siguientes:

File : default.xhtml







>

<h:body>

<ui:composition template="template/common/commonLayout.xhtml">

</ui:composition>

</h:body>

</html>

Esta página JSF carga "commonLayout.xhtml" plantilla y mostrar todo el contenido de la página por defecto.

File : page1.xhtml







>

<h:body>

<ui:composition template="/template/common/commonLayout.xhtml">

<ui:define name="content">

<h2>This is page1 content</h2>

</ui:define>

<ui:define name="footer">

<h2>This is page1 Footer</h2>

</ui:define>

</ui:composition>

</h:body>

</html>

Esta página JSF carga una plantilla "commonLayout.xhtml" y utilizar "ui: define" tag para anular el del "ui: insert" etiqueta, que se define en el archivo de plantilla.

Tenga en cuentala medida en que el nombre de la " ui: define "etiqueta se corresponde con el nombre del" ui: insert "etiqueta, que se define en la plantilla, el" ui: insert "contenido es reemplazado.

jsf 2 plantillas con facelets ejemplo

Documents