Tips Spring : [BOOT] integración con JSP

logo spring

Java Server Pages, ahora renombrada como Jakarta Server Pages, es la tecnología que ofrece Java para la generación dinámica de páginas WEB. A día de hoy se puede considerar un vestigio del pasado, pues hace años que contamos con motores de plantillas tales como Thymeleaf que ofrecen mejores capacidades. Además, la tendencia actual es la creación de clientes JavaScript con Angular, React y similares, que usan APIs REST.

No obstante, puesto que le tengo cierto cariño (recuerdos de juventud), en este pequeño artículo voy a crear una aplicación Spring Boot que muestra una página web generada mediante JSP con una lista de países.

Si recién empiezas con Spring Boot, te recomiendo que antes eches un vistazo a este tutorial.

Esta es la clase que representa a la aplicación.

@SpringBootApplication
public class SpringBootJspApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringBootJspApplication.class, args);
	}

}

Comencemos añadiendo el starter spring-boot-starter-web.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>   
</dependency>

JSP requiere la dependencia para el lenguaje JTSL, basado en etiquetas.

<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>jstl</artifactId>
  <scope>provided</scope>
</dependency>

También necesita su motor de compilación (las páginas JSP se traducen a código Java).

<dependency>
  <groupId>org.apache.tomcat.embed</groupId>
  <artifactId>tomcat-embed-jasper</artifactId>
  <scope>provided</scope>
</dependency>

En el fichero de configuración application.properties definimos el prefijo y sufijo de los ficheros .jsp. El primero es la ruta en la que se ubican dentro de la carpeta /src/main/webapp y el segundo la extensión.

spring.mvc.view.prefix= /WEB-INF/jsp/
spring.mvc.view.suffix= .jsp

Ya está lista la infraestructura. Ahora vamos a escribir una clase especial denominada «controlador» con métodos que serán invocados cuando llamemos a ciertas direcciones vía HTTP.

@Controller
public class CountriesController {

    @RequestMapping("/")
    public String list(Model model) {
        model.addAttribute("countriesList", buildCountriesList());
        return "countriesList";
    }

    private List<Country> buildCountriesList() {
        List<Country> countries = new ArrayList<>();

        countries.add(new Country("Mexico", 130497248));
        countries.add(new Country("Spain", 49067981));
        countries.add(new Country("Colombia", 46070146));

        return countries;
    }

Anotamos nuestra clase controladora con @Controller. En un método que devuelva una cadena indicamos la url a la que atenderá con @RequestMapping. Al ser la raíz de la aplicación, no haría falta indicarla. Opcionalmente podemos definir el tipo de petición (GET, POST, PUT…) que puede tratar el método, si no se indica se atenderán todos.

Dentro del método obtenemos la lista de países y la hacemos accesible en la página JSP añadiéndola con cierto nombre al modelo (Model) de Spring MVC, un objeto que recibimos como argumento.

Por último, se retorna el nombre de la vista. Spring lo completa con los valores que pusimos en spring.mvc.view.prefix y spring.mvc.view.suffix para obtener la ruta del fichero. En nuestro ejemplo esa ruta será /WEB-INF/jsp/countriesList.jsp

En /src/main/webapp/WEB-INF/jsp/countriesList.jsp diseñamos la página web.

<%@ page contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" type="image/png" href="/favicon.png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">

    <link rel="stylesheet" href="/styles.css">
    <title>Spring Boot + JSP</title>

</head>

<body>

   <div class="container">

      <div class="title">
        <h1>Countries</h1>
      </div>

      <c:choose>

            <c:when test="${not empty countriesList}">
    
                <ul>
                    <c:forEach var="item" items="${countriesList}">
                        <li>${item.name}:<fmt:formatNumber
                                value="${item.population}" /></li>
                    </c:forEach>
                </ul>
    
            </c:when>
            
            <c:otherwise>
                <b>NO DATA</b>
            </c:otherwise>
            
        </c:choose>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted"><a href="https://danielme.com/spring/">danielme.com</a></p>
      </div>
    </footer>

</body>

</html>

Se trata de una página web bastante típica. Lo más interesante es el fragmento que se genera dinámicamente cada vez que se ejecuta la JSP y que está programado con las etiquetas JSTL. El código es autoexplicativo; si countriesList tiene elementos, se itera para mostrarlos en un listado. Si no, se muestra un mensaje.

Obsérvese que tenemos ficheros enlazados (CSS y favicon). Los recursos estáticos, como imágenes, CSS, JavaScript, etcétera, sitúan en la carpeta /src/main/resources/static. Se accede a ellos a partir de la url raíz de la aplicación. Por ejemplo, /src/main/resources/static/favicon.png estará en /favicon.ico.

Ya estamos en condiciones de ejecutar la aplicación. El hecho de que sea de tipo web no es problema alguno, pues podemos lanzarla con su clase Main ( SpringBootJspApplication#main). La aplicación es autoejecutable porque Spring Boot la empaqueta junto a un servidor Tomcat. La encontramos en la url raíz del servidor en el puerto 8080.

Es posible cambiar esta configuración con las siguientes propiedades.

server.servlet.context-path=/spring-boot-demo
server.port=9090

Código de ejemplo

El código de ejemplo se encuentra en GitHub. Para más información sobre cómo utilizar GitHub, consultar este artículo.

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.