07 tiles

mayo de 2005

Organizando la presentación con Tiles

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

Response

Request

Response

Página incluida

Página original

<jsp:include.../>

Introducción (III)

Utilizando plantillas

Título

El relleno

(c)

Layout.jsp

Header.jsp

Body.jsp

Footer.jsp

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"/><tiles:getAsString name="title"/></TITLE>

</HEAD><BODY>

<TABLE border="0" width="100%" cellspacing="5"><TR>

<TD colspan="2"><tiles:insert attribute="header" /><tiles:insert attribute="header" />

</TD></TR><TR>

<TD width="140" valign="top"><tiles:insert attribute='menu'/><tiles:insert attribute='menu'/>

</TD><TD valign="top" align="left">

<tiles:insert attribute='body' /><tiles:insert attribute='body' /></TD>

</TR><TR>

<TD colspan="2"><tiles:insert attribute="footer" /><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)<%@ taglib uri="/tags/tiles" prefix="tiles" %><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

Nomenclatura recomendada Similar a los paquetes de Java

<definition name="portal.page" extends="portal.masterPage"><put name="title" value="Tiles 1.1 Portal" /><put name="body" value="portal.body" />

</definition>

Declaración en JSP (I)

Menos utilizada pero más flexible

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

<%@ taglib uri="/tags/tiles" prefix="tiles" %><tiles:definition id="definitionName" page="/layouts/myLayout.jsp">

<tiles:put name="title" value="Hello World" /><tiles:put name="header" value="/tiles/header.jsp" /><tiles:put name="footer" value="/tiles/footer.jsp" /><tiles:put name="menu" value="/tiles/menu.jsp" /><tiles:put name="body" value="/tiles/helloBody.jsp" />

</tiles:definition>

Declaración en JSP (II)

Reutilización<%@ taglib uri="/tags/tiles" prefix="tiles" %><%@ 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" %><%@ taglib uri="/tags/tiles" prefix="tiles" %>

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

<tiles:definition id="definitionName" page="/layouts/myLayout.jsp"><tiles:put name="title" value="Hello World" /><tiles:put name="header" value="/tiles/header.jsp" /><tiles:put name="footer" value="/tiles/footer.jsp" /><tiles:put name="menu" value="/tiles/menu.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

<actionpath="/tutorial/testAction2"type="org.apache.struts.example.tiles.tutorial.ForwardExampleAction"><forward

name="failure"path=".forward.example.failure.page"/>

<forwardname="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

Como cuerpo del tag

Como bean

Como propiedad de un bean

<tiles:put name="title" value="My first page" /><tiles:put name="title" value="<%=myObject%>" />

<tiles:put name="title">My first page</tiles:put>

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

<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

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

<tiles:put name="title" value="myValue" role="myManager"/><tiles:put name="title" value="myValue" role="myStaff"/>

Atributos de tiles (III)“useAttribute”

Permite acceder al valor del atributo desde otro contexto Se puede mapear directamente

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

<tiles:useAttribute name="myAttribute" />

Atributos de tiles (IV)“importAttribute”

Funciona como “useAttribute”, pero No permite renombrarlos Si no se especifica atributo los importa todos

Podemos especificar el “scope”

<tiles:importAttribute/>

Atributos de tiles (y V)“putList” y “add”

Podemos insertar los atributos como lista Tag “putList” Tag “add” para cada elemento de la lista

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

<tiles:insert page="menu.jsp" ><tiles:putList name="items">

<tiles:add value="home" /><tiles:add value="documentation"/>

</tiles:putList></tiles:insert>

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'/><html:rewrite page='/styles/global.css'/>">

</HEAD> <BODY> ...

http://www.inta.cl/exigesano/images/foto-guinda.jpg

Manos a la obra...

Aplicando tiles (I)

Pensamos el diseño Cabecera: logos, menu de idioma Cuerpo: contenido Pie de página: copyright

Diagrama de plantillas

.layout.main .layout.order

.layout.order.form

.layout.order.confirm

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"/><tiles:getAsString name="pageTitle" ignore="true"/></title> <link href="<h:rewrite page="/styles/jakin.css"/>" type="text/css" rel="stylesheet"/> </head> <body> <div id="Header"> <tiles:insert attribute="header"/><tiles:insert attribute="header"/> </div> <div id="Content"> <tiles:insert attribute="content"/><tiles:insert attribute="content"/> </div> <div id="Footer"> <tiles:insert attribute="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

Education