07 tiles
-
Upload
roberto-moreno-donoro -
Category
Education
-
view
751 -
download
2
Transcript of 07 tiles
![Page 1: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/1.jpg)
mayo de 2005
Organizando la presentación con Tiles
![Page 2: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/2.jpg)
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
![Page 3: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/3.jpg)
Introducción (II)
Funcionamiento de <jsp:include/>
Request
Response
Request
Response
Página incluida
Página original
<jsp:include.../>
![Page 4: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/4.jpg)
Introducción (III)
Utilizando plantillas
Título
El relleno
(c)
Layout.jsp
Header.jsp
Body.jsp
Footer.jsp
![Page 5: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/5.jpg)
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
![Page 6: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/6.jpg)
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>
![Page 7: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/7.jpg)
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
![Page 8: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/8.jpg)
Creando la plantilla base (II)
HEADER
MENU BODY
FOOTER
![Page 9: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/9.jpg)
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>
![Page 10: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/10.jpg)
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
![Page 11: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/11.jpg)
Creando la plantilla base (y V)
Atributos opcionales <tiles:insert attribute="extra" ignore="true" /> No se queja si no se encuentra.
![Page 12: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/12.jpg)
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
![Page 13: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/13.jpg)
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>
![Page 14: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/14.jpg)
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
![Page 15: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/15.jpg)
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
![Page 16: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/16.jpg)
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.
![Page 17: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/17.jpg)
Fichero de definiciones (I)
Configurado dentro del “plugin” Parámetro “definitions-config”
Cada definición tiene un identificador No se corresponde con una URI
![Page 18: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/18.jpg)
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>
<!-- ... more definitions ... -->
</tiles-definitions>
![Page 19: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/19.jpg)
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>
![Page 20: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/20.jpg)
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>
![Page 21: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/21.jpg)
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>
![Page 22: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/22.jpg)
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>
![Page 23: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/23.jpg)
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>
![Page 24: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/24.jpg)
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
![Page 25: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/25.jpg)
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"/>
![Page 26: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/26.jpg)
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"/>
![Page 27: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/27.jpg)
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" />
![Page 28: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/28.jpg)
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/>
![Page 29: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/29.jpg)
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>
![Page 30: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/30.jpg)
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> ...
![Page 31: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/31.jpg)
Manos a la obra...
![Page 32: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/32.jpg)
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
![Page 33: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/33.jpg)
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>
![Page 34: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/34.jpg)
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>
![Page 35: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/35.jpg)
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>
![Page 36: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/36.jpg)
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>
![Page 37: 07 tiles](https://reader033.fdocuments.mx/reader033/viewer/2022042715/559856d61a28abb01d8b46e6/html5/thumbnails/37.jpg)
Aplicando tiles (y VI)
Añadimos un index.jsp...
...y ¡listo!