La siguiente tabla enlista las etiquetas Facelets que son usadas para las plantillas con su respectiva funcionalidad.
Etiqueta
|
Función
|
ui:component
|
Defines a component that is created and added to the component tree.
|
ui:composition
|
Defines a page composition that optionally uses a template. Content outside of this tag is ignored.
|
ui:debug
|
Defines a debug component that is created and added to the component tree.
|
ui:decorate
|
Similar to the composition tag but does not disregard content outside this tag.
|
ui:define
|
Defines content that is inserted into a page by a template.
|
ui:fragment
|
Similar to the component tag but does not disregard content outside this tag.
|
ui:include
|
Encapsulate and reuse content for multiple pages.
|
ui:insert
|
Inserts content into a template.
|
ui:param
|
Used to pass parameters to an included file.
|
ui:repeat
|
Used as an alternative for loop tags, such as c:forEach or h:dataTable.
|
ui:remove
|
Removes content from a page.
|
Para mas información sobre las etiquetas, vea la documentación en
http://download.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/
La librería de etiquetas de Facelets incluye la etiqueta de plantilla principal ui:insert. Una página plantillas que es creada con esta etiqueta permite definir una estructura default para una página. Una página plantilla es usada como plantilla para otras páginas usualmente referidas como páginas cliente.
Aquí hay un ejemplo de una plantilla salvada como template.xhtml.
<!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"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css"
rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css"
rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">Top Section</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left Section</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Main Content</ui:insert>
</div>
</div>
</h:body>
</html>
La página de ejemplo define una página XHTML que es dividida en tres secciones: una sección superior, una sección izquierda y una sección principal. Estas secciones tiene una hoja de estilos asociada a ellas. La misma estructura puede ser reutilizada en otras páginas de la aplicación.
La página cliente invoca la plantilla usando la etiqueta ui:composition. En el siguiente ejemplo, una página cliente llamada templateclient.xhtml invoca la plantilla llamada template.xhtml del ejemplo precedente. Una página cliente puede insertar contenido con la ayuda de la etiqueta ui:define.
<!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"
xmlns:h="http://java.sun.com/jsf/html">
<h:body>
<ui:composition template="./template.xhtml">
<ui:define name="top">
Welcome to Template Client Page
</ui:define>
<ui:define name="left">
<h:outputLabel value="You are in the Left Section"/>
</ui:define>
<ui:define name="content">
<h:graphicImage value="#{resource['images:wave.med.gif']}"/>
<h:outputText value="You are in the Main Content Section"/>
</ui:define>
</ui:composition>
</h:body>
</html>
0 comentarios:
Publicar un comentario en la entrada