07 tiles

Organizando la presentación con Tiles

mayo de 2005

Introducción (I)
 Composición de páginas
 Directamente en los JSP
 Código repetido
 Imposible de mantener
 Consistencia costosa
 Método “<jsp:include/>”
 Utilizando plantillas

Introducción (II)
 Funcionamiento de <jsp:include/>

Request
<jsp:include.../>

Request
Página Página
original Response incluida

Response

Introducción (III)
 Utilizando plantillas

Layout.jsp

Header.jsp Título

El relleno
Body.jsp

Footer.jsp (c)

Introducción (y IV)
 Ventajas e inconvenientes
 Para <jsp:include>
 Tecnología estable y probada
 Contenedores optimizados para JSP
 Pueden ser HTML no editable
 Para plantillas
 Mayor reutilización de código
 Mayor flexibilidad
 Más páginas a monitorizar

Instalación
 Forman parte de Struts (1.1+)
 Plug-In
 Pueden utilizarse sin Struts
 Declaración en “struts-config.xml”
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config"
value="/WEB-INF/tiles-defs.xml,
/WEB-INF/tiles-tests-defs.xml" />
<set-property property="definitions-parser-validate" value="true" />
</plug-in>

Creando la plantilla base (I)
 Primer paso:
 Identificar las diferentes plantillas
necesarias
 Buscar reutilización (pero no forzarla)
 El layout se corresponde con las
regiones de la página
 Cada región es un “tile”
 Los tiles pueden ser recursivos

Creando la plantilla base (II)

HEADER

MENU BODY

FOOTER

Creando la plantilla base (III)
<%@ taglib uri="/tags/tiles" prefix="tiles" %>
<HTML>
<HEAD>
<TITLE><tiles:getAsString name="title"/></TITLE>
<tiles:getAsString name="title"/>
</HEAD>
<BODY>
<TABLE border="0" width="100%" cellspacing="5">
<TR>
<TD colspan="2">
<tiles:insert attribute="header" />
</TD>
</TR>
<TR>
<TD width="140" valign="top">
<tiles:insert attribute='menu'/>
</TD>
<TD valign="top" align="left">
<tiles:insert attribute='body' />
</TD>
</TR>
<TR>
<TD colspan="2">
<tiles:insert attribute="footer" />
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Creando la plantilla base (IV)
 Los tags básicos son
 “tiles:insert”
 El valor del atributo se supone una página
 “tiles:getAsString”
 El valor se supone o convierte a String

Creando la plantilla base (y V)
 Atributos opcionales
 <tiles:insert attribute="extra" ignore="true" />
 No se queja si no se encuentra.

Pero, ¿qué hace un tile?
 Tile: cada región o “cuadrado” de la
página
 Puede utilizarse con XML
 No sólo para presentación
 Parametrizables
 Paso de argumentos como “atributos”
 “Definiciones”
 Un tile junto a sus atributos: instancia

Definiciones de “tiles” (I)
<tiles:insert page="/layouts/myLayout.jsp" flush="true">
<tiles:put name="title" value="Hello World" />
<tiles:put name="header" value="/tiles/header.jsp" />
<tiles:put name="body" type="string">
<%-- Place the content from /tiles/pageTwo.jsp here --%>
</tiles:put>
<tiles:put name="footer" value="/tiles/footer.jsp" />
<tiles:put name="menu" value="/tiles/menu.jsp" />
</tiles:insert>

Definiciones de “tiles” (II)
 Para cada “instancia” tenemos varios
parámetros
 Sólo unos pocos cambian de página en
página
 ¿Qué necesitamos?
 Un lugar donde dejar estas definiciones
 Poder reutilizarlas
 Definir sólo las diferencias

Definiciones de “tiles” (III)
 Declaración de una definición
 En base a tags
 Información necesaria
 Identificador
 Una plantilla base (path a la misma)
 Algunos atributos para insertar

Definiciones de “tiles” (y IV)
 Características avanzadas
 Una Definición puede sobrecargarse añadiendo
más atributos o reemplazándolos cuando se utiliza.
 Podemos extender una definición utilizando como
plantilla base otra definición (herencia de
definiciones).
 Una definición puede ser reutilizada almacenándola
en un JSP o en cargándola desde un archivo de
definiciones en formato XML.
 Una definción puede utilizarse como “objetivo” de
un ActionForward de Struts.

Fichero de definiciones (I)
 Configurado dentro del “plugin”
 Parámetro “definitions-config”
 Cada definición tiene un identificador
 No se corresponde con una URI

Fichero de definiciones (II)
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">

<tiles-definitions>

<definition name="definitionName" page="/layouts/myLayout.jsp">
<put name="title" value="Hello World" />
<put name="header" value="/tiles/header.jsp" />
<put name="footer" value="/tiles/footer.jsp" />
<put name="menu" value="/tiles/menu.jsp" />
<put name="body" value="/tiles/helloBody.jsp" />
</definition>



</tiles-definitions>

Fichero de definiciones (III)
 Derivando definiciones
<definition name="portal.page" extends="portal.masterPage">
<put name="title" value="Tiles 1.1 Portal" />
<put name="body" value="portal.body" />
</definition>

 Nomenclatura recomendada
 Similar a los paquetes de Java

Declaración en JSP (I)
 Menos utilizada pero más flexible
<tiles:definition id="definitionName" page="/layouts/myLayout.jsp">
<tiles:put name="body" value="/tiles/helloBody.jsp" />
</tiles:definition>

 Ámbito de página (atributo “scope”)

Declaración en JSP (II)
 Reutilización
<%@ include file="definitionsConfig.jsp" %>

<tiles:insert beanName="definitionName" beanScope="request" />
<tiles:put name="title" value="Another Page" />
<tiles:put name="body" value="/tiles/anotherBody.jsp" />
</tiles:insert>

Declaración en JSP (y III)
 Problema de “sobredefinición”
 Utilizar el tag “<logic:notPresent>”
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>

<logic:notPresent name="definitionName" scope="application">

<tiles:definition id="definitionName" page="/layouts/myLayout.jsp">
<tiles:put name="body" value="/tiles/helloBody.jsp" />
</tiles:definition>
<%-- … other definitions … --%>

</logic:notPresent>

Tiles como ActionForwards
 Plugin de Tiles
 Comprueba el path de los ActionForwards
 Si coincide con una definición de tile usa el
tile
<action
path="/tutorial/testAction2"
type="org.apache.struts.example.tiles.tutorial.ForwardExampleAction">
<forward
name="failure"
path=".forward.example.failure.page"/>
<forward
name="success"
path=".forward.example.success.page"/>
</action>

Atributos de tiles (I)
 Hasta ahora
 Atributos estáticos
 ¿No podemos especificarlos en runtime?
 ¡Claro que sí!
 Contexto propio de tiles
 Diferente a los de servlets
 Ámbito de request

Atributos de tiles (II)
“put”
 Equivalente a “setAttribute”
 Diferentes formas de uso
 Como propiedad
<tiles:put name="title" value="My first page" />
<tiles:put name="title" value="<%=myObject%>" />

 Como cuerpo del tag
<tiles:put name="title">My first page</tiles:put>

 Como bean
<tiles:put name="title" beanName="myBean" beanScope="session"/>

 Como propiedad de un bean
<tiles:put name="title" beanName="myBean" beanProperty="myProperty"/>

Atributos de tiles (III)
“put”
 Es posible indicar el tipo (type=):
 “page”, “string” o “definition”
 Y el rol de seguridad
 Si el usuario no dispone del rol no se añade el
atributo
<tiles:put name="title" value="myValue" role="myManager"/>
<tiles:put name="title" value="myValue" role="myStaff"/>

 Si se especifica en una definición se comprueba
el rol al inicializar el contexto de tiles.

Atributos de tiles (III)
“useAttribute”
 Permite acceder al valor del atributo desde
otro contexto
 Se puede mapear directamente
<tiles:useAttribute name="myAttribute" />

 O con otro nombre
<tiles:useAttribute attributeName="anAttribute" name="myAttribute" />

Atributos de tiles (IV)
“importAttribute”
 Funciona como “useAttribute”, pero
 No permite renombrarlos
 Si no se especifica atributo los importa todos
<tiles:importAttribute/>
 Podemos especificar el “scope”

Atributos de tiles (y V)
“putList” y “add”
 Podemos insertar los atributos como lista
 Tag “putList”
 Tag “add” para cada elemento de la lista
<tiles:insert page="menu.jsp" >
<tiles:putList name="items">
<tiles:add value="home" />
<tiles:add value="documentation"/>
</tiles:putList>
</tiles:insert>

 Luego podemos utilizar la “java.util.List” con
un “importAttribute”

La guinda final...
 Podemos incluir hojas de estilo CSS en
las plantillas base
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<HTML>
<HEAD>
<TITLE><tiles:getAsString name="title"/></TITLE>
<html:base/>
<LINK rel="stylesheet" type="text/css"
ref="<html:rewrite page='/styles/global.css'/>">
page='/styles/global.css'/>
</HEAD>
<BODY>
...

Aplicando tiles (I)
 Pensamos el diseño
 Cabecera: logos, menu de idioma
 Cuerpo: contenido
 Pie de página: copyright
 Diagrama de plantillas
.layout.order.form

.layout.order.confirm

.layout.main .layout.order

Aplicando tiles (II)
 Activamos el plugin
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config"
value="/WEB-INF/conf/tiles-defs.xml/>
</plug-in>

Aplicando tiles (III)
 Creamos la plantilla base
<html>
<head>
<title><tiles:getAsString name="pageTitle" ignore="true"/></title>
<tiles:getAsString ignore="true"/>
<link href="<h:rewrite page="/styles/jakin.css"/>" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="Header">
<tiles:insert attribute="header"/>
</div>
<div id="Content">
<tiles:insert attribute="content"/>
</div>
<div id="Footer">
<tiles:insert attribute="footer"/>
</div>
<iframe name="null" frameborder="0" width="0" height="0"></iframe>
</body>
</html>

Aplicando tiles (IV)
 Creamos las definiciones
<tiles-definitions>

<definition name=".layout.base" path="/WEB-INF/conf/layouts/MainLayout.jsp">
<put name="header" value="/WEB-INF/pages/Header.jsp"/>
</definition>

<definition name=".layout.main" extends=".layout.base">
<put name="header" value="/WEB-INF/pages/Header.jsp"/>
<put name="pageTitle" value="título temporal"/>
</definition>

<definition name=".layout.order" extends=".layout.main">
<put name="footer" value="/WEB-INF/pages/Footer.jsp"/>
<put name="pageTitle" value="título de órdenes"/>
</definition>

<definition name=".layout.order.form" extends=".layout.order">
<put name="content" value="/WEB-INF/pages/forms/order-form.jsp"/>
</definition>

<definition name=".layout.order.confirm" extends=".layout.order">
<put name="content" value="/WEB-INF/pages/results/order-confirmation.jsp"/>
</definition>

</tiles-definitions>

Aplicando tiles (V)
 Actualizamos “struts-config”
 Los forward apuntarán a tiles
<action-mappings>
<action path="/actions/locale"
type="org.apache.struts.actions.LocaleAction"
name="LocaleActionForm">
<forward name="success"
path=".layout.order.form
.layout.order.form"/>
</action>
<action path="/actions/index"
forward=".layout.order.form
.layout.order.form"/>
<action path="/actions/order"
type="app.Order"
name="orderFormBean"
scope="request"
input=".layout.order.form
.layout.order.form">
<forward name="success"
path=".layout.order.confirm
.layout.order.confirm"/>
</action>
</action-mappings>

Aplicando tiles (y VI)
 Añadimos un index.jsp...
...y ¡listo!

07 tiles

Recomendados

Recomendados

Más contenido relacionado

Similar a 07 tiles

Similar a 07 tiles (20)

Más de Roberto Moreno Doñoro

Más de Roberto Moreno Doñoro (20)

Último

Último (20)

07 tiles