Capa vista de un proyecto Spring Boot

Capa vista de un proyecto Spring Boot

Este artículo continua la serie iniciada en el primer artículo.

En este artículo vamos a presentar la implementación de la capa vista de la aplicación. Entendemos como vista aquellos elementos visuales de la aplicación, es decir, la interfaz gráfica de la web.
La parte más interesante del código de esta sección está en la carpeta templates.

Thymeleaf

Thymeleaf es un motor de plantillas que utilizaremos para renderizar las vistas. A partir de los elementos dados por el controlador, este potente sistema es capaz de devolver una vista.
Por poner un ejemplo práctico y concreto, veámoslo con una página sencilla que muestra la versión de la aplicación. Esta página está, por defecto, accesible desde /version. A esta petición del navegador atiende el controlador WebPublicController en su método:

@GetMapping(WebURL.VERSION)
public String version(Model model) {
  log.debug("web version");
  model.addAttribute("version", this.commonProperties.getVersion());
  WebControllerUtils.activeView(model, 
  WebControllerUtils.CSS_CLASS_NAME_VERSION);
  return "pages/version";
}

En este método, vemos:

  1. La URL a la que responde está definida en la anotación @GetMapping
  2. Con model.addAttribute añadimos un atributo a la vista, cuyo nombre sera version
  3. El método devuelve la página a renderizar, version.html

A su vez, si observamos la página version.html, vemos que, en esencia, lo que hace es devolver un elemento HTML div que hace referencia a través del atributo version añadido por el controlador:

<html:div class="alert alert-primary" role="alert">Version</html:div>

Thymeleaf nos da, además, muchas herramientas que hacen las tareas de vista mucho más sencillas. Algunas de ellas son:

  • Internacionalización
  • Bucles
  • Utilidades con números, fechas, strings, …
  • Integración con spring security
  • Plantillas

Plantillas

Como la mayoría de páginas de la web tienen una estructura definida y similar, resulta cómodo y prácticamente obligatorio implementar un sistema de plantillas (templating). Este sistema nos lo da el mismo Thymeleaf y Spring, y podemos ver un ejemplo en la misma página anterior de version.html. En ella, vemos cosas como:

<html:head th:replace="~{header :: head(#{version.title})}"></html:head>

y

<html:div th:insert="~{footer :: footer}"></html:div>

que sirven para intrucir en la vista elementos de otros ficheros, en nuestro caso, del header y del footer respectivamente.

Formularios

Una de las características de cualquier aplicación web es la presencia de formularios donde un usuario cubre cierta información (formulario), dispara un evento (presiona un botón) y se realiza una acción.
Podemos ver un ejemplo de creación de formulario en login. En esta página vemos cómo definimos el formulario y la acción que desencadena:

<html:form method="post"></html:form>

además de las entradas a cubrir por el usuario:

<html:input id="username" class="form-control" name="username" type="text"></html:input>
<html:input id="password" class="form-control" name="password" type="password"></html:input>

Así como el evento disparador de la acción:

<html:input type="submit" class="btn btn-primary" th:value="#{login.submit}"></html:input>

Redirecciones

Otra acción común a realizar en el controlador es la redirección a otra página diferente. Vemos un ejemplo WebController, en donde, en base al rol del usuario autenticado, se redirige a una página u otra:

return "redirect:"+WebURL.ADMIN+WebURL.USERS;

Imagen principal: Photo by Sam Trotman on Unsplash

Publicado en junio 17, 2020

,

,

,

,

Un comentario en Capa vista de un proyecto Spring Boot

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

« »