Curso de Struts 2
Cómo hacer una plantilla con tiles
En esta lección aprenderemos a crear una plantilla reutilizable utilizando Tiles en Struts 2. Tiles es un framework que facilita la creación de vistas dinámicas y estructuradas, permitiendo dividir la interfaz en secciones reutilizables como cabeceras, menús y pies de página.
index.jsp
<meta http-equiv="Refresh" content="0;url=homePage.action">
web.xml
<listener>
<listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
</listener>
struts.xml
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" extends="struts-default">
<result-types>
<result-type name="tiles" class="org.apache.struts2.views.tiles.TilesResult" />
</result-types>
<action name="*Page">
<result type="tiles">{1}</result>
</action>
</package>
</struts>
TilesResult
: Define el tipo de resultado para las vistas basadas en Tiles.- Acción
homePage
: Asocia la acciónhomePage
con una plantilla llamadahome
.
WEB-INF/tiles.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
<definition name="baseLayout" template="/layouts/baseLayout.jsp">
<put-attribute name="title" value="Template" />
<put-attribute name="header" value="/templates/header.jsp" />
<put-attribute name="menu" value="/templates/menu.jsp" />
<put-attribute name="body" value="/templates/body.jsp" />
</definition>
<definition name="home" extends="baseLayout">
<put-attribute name="title" value="Home Page" />
<put-attribute name="body" value="/pages/home.jsp" />
</definition>
<definition name="contactUs" extends="baseLayout">
<put-attribute name="title" value="Contact Us Page" />
<put-attribute name="body" value="/pages/aboutUs.jsp" />
</definition>
</tiles-definitions>
layout
: Define una plantilla base con secciones comoheader
,menu
ybody
.home
ycontact
: Heredan la estructura delayout
y personalizan la secciónbody
.
baselayout.jsp
La plantilla base contiene el diseño general de la página. Por ejemplo:
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:insertAttribute name="title" ignore="true" /></title>
</head>
<body>
<div style="width:100%; height:70px; background:salmon; float:left">
<tiles:insertAttribute name="header" />
</div>
<div style="width:200px; height:500px; background:pink; float:left">
<tiles:insertAttribute name="menu" />
</div>
<div style="width:800px; height:500px; background:green; float:left">
<tiles:insertAttribute name="body" />
</div>
</body>
</html>
Problemas comunes usando tiles
Si experimentas problemas con caracteres especiales o codificación, puedes agregar esta configuración a web.xml
:
<web-app>
...
<jsp-config>
<jsp-property-group>
<url-pattern>*.jsp</url-pattern>
<page-encoding>UTF-8</page-encoding>
<trim-directive-whitespaces>true</trim-directive-whitespaces>
</jsp-property-group>
</jsp-config>
</web-app>