¿Trucos JSP para facilitar la creación de plantillas?
En el trabajo me han asignado la tarea de convertir un montón de HTML
archivos en un proyecto simple JSP
. Realmente es todo estático, no hay lógica del lado del servidor para programar. Debo mencionar que soy completamente nuevo en Java. Los archivos JSP parecen facilitar el trabajo con inclusiones y variables comunes, como PHP
, pero me gustaría saber una forma sencilla de obtener algo como herencia de plantilla ( Django
estilo) o al menos poder tener un archivo base.jsp que contenga el encabezado y el pie de página, para poder insertar contenido más tarde.
Ben Lings parece ofrecer algo de esperanza en su respuesta aquí: Herencia de plantilla JSP ¿Alguien puede explicar cómo lograr esto?
Dado que no tengo mucho tiempo, creo que el enrutamiento dinámico es demasiado, así que estoy feliz de que las URL se asignen directamente a .jsp
los archivos, pero estoy abierto a sugerencias.
Gracias.
Editar: No quiero utilizar ninguna biblioteca externa, porque aumentaría la curva de aprendizaje para mí y para otros que trabajan en el proyecto, y la empresa para la que trabajo ha sido contratada para hacer esto.
Otra edición: no estoy seguro de si JSP tags
será útil porque mi contenido realmente no tiene variables de plantilla. Lo que necesito es una manera de poder hacer esto:
base.html:
<html><body>
{ content.body }
</body></html>
somepage.html
<wrapper:base.html>
<h1>Welcome</h1>
</wrapper>
siendo la salida:
<html><body>
<h1>Welcome</h1>
</body></html>
Creo que esto me daría suficiente versatilidad para hacer todo lo que necesito. Se podría lograr, includes
pero luego necesitaría una inclusión superior e inferior para cada envoltorio, lo cual es un poco complicado.
Como sugirió skaffman , los archivos de etiquetas JSP 2.0 son la rodilla de la abeja.
Tomemos su ejemplo simple.
Pon lo siguiente enWEB-INF/tags/wrapper.tag
<%@tag description="Simple Wrapper Tag" pageEncoding="UTF-8"%>
<html><body>
<jsp:doBody/>
</body></html>
Ahora en tu example.jsp
página:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:wrapper>
<h1>Welcome</h1>
</t:wrapper>
Eso hace exactamente lo que crees que hace.
Entonces, ampliemos esto a algo un poco más general.
WEB-INF/tags/genericpage.tag
<%@tag description="Overall Page template" pageEncoding="UTF-8"%>
<%@attribute name="header" fragment="true" %>
<%@attribute name="footer" fragment="true" %>
<html>
<body>
<div id="pageheader">
<jsp:invoke fragment="header"/>
</div>
<div id="body">
<jsp:doBody/>
</div>
<div id="pagefooter">
<jsp:invoke fragment="footer"/>
</div>
</body>
</html>
Para usar esto:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:genericpage>
<jsp:attribute name="header">
<h1>Welcome</h1>
</jsp:attribute>
<jsp:attribute name="footer">
<p id="copyright">Copyright 1927, Future Bits When There Be Bits Inc.</p>
</jsp:attribute>
<jsp:body>
<p>Hi I'm the heart of the message</p>
</jsp:body>
</t:genericpage>
¿Qué te compra eso? Mucho en realidad, pero se pone aún mejor...
WEB-INF/tags/userpage.tag
<%@tag description="User Page template" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<%@attribute name="userName" required="true"%>
<t:genericpage>
<jsp:attribute name="header">
<h1>Welcome ${userName}</h1>
</jsp:attribute>
<jsp:attribute name="footer">
<p id="copyright">Copyright 1927, Future Bits When There Be Bits Inc.</p>
</jsp:attribute>
<jsp:body>
<jsp:doBody/>
</jsp:body>
</t:genericpage>
Para usar esto: (supongamos que tenemos una variable de usuario en la solicitud)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:userpage userName="${user.fullName}">
<p>
First Name: ${user.firstName} <br/>
Last Name: ${user.lastName} <br/>
Phone: ${user.phone}<br/>
</p>
</t:userpage>
Pero resulta que te gusta usar ese bloque de detalles de usuario en otros lugares. Entonces, lo refactorizaremos.
WEB-INF/tags/userdetail.tag
<%@tag description="User Page template" pageEncoding="UTF-8"%>
<%@tag import="com.example.User" %>
<%@attribute name="user" required="true" type="com.example.User"%>
First Name: ${user.firstName} <br/>
Last Name: ${user.lastName} <br/>
Phone: ${user.phone}<br/>
Ahora el ejemplo anterior se convierte en:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:userpage userName="${user.fullName}">
<p>
<t:userdetail user="${user}"/>
</p>
</t:userpage>
La belleza de los archivos JSP Tag es que básicamente le permiten etiquetar marcas genéricas y luego refactorizarlas al contenido de su corazón.
JSP Tag Files
Prácticamente he usurpado cosas como Tiles
etc., al menos para mí. Los encuentro mucho más fáciles de usar ya que la única estructura es la que tú le das, nada preconcebido. Además, puede utilizar archivos de etiquetas JSP para otras cosas (como el fragmento de detalles del usuario anterior).
Aquí hay un ejemplo que es similar a DisplayTag que he hecho, pero todo esto se hace con Tag Files (y el Stripes
marco, esas son las etiquetas s:...). Esto da como resultado una tabla de filas, colores alternos, navegación de páginas, etc.:
<t:table items="${actionBean.customerList}" var="obj" css_class="display">
<t:col css_class="checkboxcol">
<s:checkbox name="customerIds" value="${obj.customerId}"
onclick="handleCheckboxRangeSelection(this, event);"/>
</t:col>
<t:col name="customerId" title="ID"/>
<t:col name="firstName" title="First Name"/>
<t:col name="lastName" title="Last Name"/>
<t:col>
<s:link href="/Customer.action" event="preEdit">
Edit
<s:param name="customer.customerId" value="${obj.customerId}"/>
<s:param name="page" value="${actionBean.page}"/>
</s:link>
</t:col>
</t:table>
Por supuesto, las etiquetas funcionan con JSTL tags
(me gusta c:if
, etc.). Lo único que no puede hacer dentro del cuerpo de una etiqueta de archivo de etiqueta es agregar código scriptlet Java, pero esto no es una limitación tan grande como podría pensar. Si necesito material de scriptlet, simplemente pongo la lógica en una etiqueta y la suelto. Fácil.
Por lo tanto, los archivos de etiquetas pueden ser prácticamente lo que usted desee. En el nivel más básico, es una simple refactorización de cortar y pegar. Tome una parte del diseño, recórtela, realice algunas parametrizaciones simples y reemplácela con una invocación de etiqueta.
En un nivel superior, puedes hacer cosas sofisticadas como esta etiqueta de tabla que tengo aquí.
Hice una biblioteca de etiquetas de herencia de plantillas JSP estilo Django bastante fácil. https://github.com/kwon37xi/jsp-template-inheritance
Creo que facilita la gestión de diseños sin una curva de aprendizaje.
código de ejemplo:
base.jsp: diseño
<%@page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSP Template Inheritance</title>
</head>
<h1>Head</h1>
<div>
<layout:block name="header">
header
</layout:block>
</div>
<h1>Contents</h1>
<div>
<p>
<layout:block name="contents">
<h2>Contents will be placed under this h2</h2>
</layout:block>
</p>
</div>
<div class="footer">
<hr />
<a href="https://github.com/kwon37xi/jsp-template-inheritance">jsp template inheritance example</a>
</div>
</html>
view.jsp: contenido
<%@page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
<layout:extends name="base.jsp">
<layout:put name="header" type="REPLACE">
<h2>This is an example about layout management with JSP Template Inheritance</h2>
</layout:put>
<layout:put name="contents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta,
augue ut ornare sagittis, diam libero facilisis augue, quis accumsan enim velit a mauris.
</layout:put>
</layout:extends>
Basado en la misma idea básica que en la respuesta de @Will Hartung , aquí está mi motor mágico de plantilla extensible de una etiqueta. Incluso incluye documentación y un ejemplo :-)
WEB-INF/tags/block.tag:
<%--
The block tag implements a basic but useful extensible template system.
A base template consists of a block tag without a 'template' attribute.
The template body is specified in a standard jsp:body tag, which can
contain EL, JSTL tags, nested block tags and other custom tags, but
cannot contain scriptlets (scriptlets are allowed in the template file,
but only outside of the body and attribute tags). Templates can be
full-page templates, or smaller blocks of markup included within a page.
The template is customizable by referencing named attributes within
the body (via EL). Attribute values can then be set either as attributes
of the block tag element itself (convenient for short values), or by
using nested jsp:attribute elements (better for entire blocks of markup).
Rendering a template block or extending it in a child template is then
just a matter of invoking the block tag with the 'template' attribute set
to the desired template name, and overriding template-specific attributes
as necessary to customize it.
Attribute values set when rendering a tag override those set in the template
definition, which override those set in its parent template definition, etc.
The attributes that are set in the base template are thus effectively used
as defaults. Attributes that are not set anywhere are treated as empty.
Internally, attributes are passed from child to parent via request-scope
attributes, which are removed when rendering is complete.
Here's a contrived example:
====== WEB-INF/tags/block.tag (the template engine tag)
<the file you're looking at right now>
====== WEB-INF/templates/base.jsp (base template)
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:block>
<jsp:attribute name="title">Template Page</jsp:attribute>
<jsp:attribute name="style">
.footer { font-size: smaller; color: #aaa; }
.content { margin: 2em; color: #009; }
${moreStyle}
</jsp:attribute>
<jsp:attribute name="footer">
<div class="footer">
Powered by the block tag
</div>
</jsp:attribute>
<jsp:body>
<html>
<head>
<title>${title}</title>
<style>
${style}
</style>
</head>
<body>
<h1>${title}</h1>
<div class="content">
${content}
</div>
${footer}
</body>
</html>
</jsp:body>
</t:block>
====== WEB-INF/templates/history.jsp (child template)
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:block template="base" title="History Lesson">
<jsp:attribute name="content" trim="false">
<p>${shooter} shot first!</p>
</jsp:attribute>
</t:block>
====== history-1977.jsp (a page using child template)
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:block template="history" shooter="Han" />
====== history-1997.jsp (a page using child template)
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:block template="history" title="Revised History Lesson">
<jsp:attribute name="moreStyle">.revised { font-style: italic; }</jsp:attribute>
<jsp:attribute name="shooter"><span class="revised">Greedo</span></jsp:attribute>
</t:block>
--%>
<%@ tag trimDirectiveWhitespaces="true" %>
<%@ tag import="java.util.HashSet, java.util.Map, java.util.Map.Entry" %>
<%@ tag dynamic-attributes="dynattributes" %>
<%@ attribute name="template" %>
<%
// get template name (adding default .jsp extension if it does not contain
// any '.', and /WEB-INF/templates/ prefix if it does not start with a '/')
String template = (String)jspContext.getAttribute("template");
if (template != null) {
if (!template.contains("."))
template += ".jsp";
if (!template.startsWith("/"))
template = "/WEB-INF/templates/" + template;
}
// copy dynamic attributes into request scope so they can be accessed from included template page
// (child is processed before parent template, so only set previously undefined attributes)
Map<String, String> dynattributes = (Map<String, String>)jspContext.getAttribute("dynattributes");
HashSet<String> addedAttributes = new HashSet<String>();
for (Map.Entry<String, String> e : dynattributes.entrySet()) {
if (jspContext.getAttribute(e.getKey(), PageContext.REQUEST_SCOPE) == null) {
jspContext.setAttribute(e.getKey(), e.getValue(), PageContext.REQUEST_SCOPE);
addedAttributes.add(e.getKey());
}
}
%>
<% if (template == null) { // this is the base template itself, so render it %>
<jsp:doBody/>
<% } else { // this is a page using the template, so include the template instead %>
<jsp:include page="<%= template %>" />
<% } %>
<%
// clean up the added attributes to prevent side effect outside the current tag
for (String key : addedAttributes) {
jspContext.removeAttribute(key, PageContext.REQUEST_SCOPE);
}
%>