Curso de Struts 2 | Cómo hacer una plantilla con tiles 1

Curso de Struts 2

Cómo hacer una plantilla con tiles

Curso de Struts 2 | Cómo hacer una plantilla con tiles 2

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ón homePage con una plantilla llamada home.

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 como header, menu y body.home y
  • contact: Heredan la estructura de layout y personalizan la sección body.

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>