Spring Boot Web 6/10 – Thymeleaf

317

En el tutorial anterior, revisamos cómo utilizar Controladores Web. En este tutorial, revisaremos cómo configurar Thymeleaf en Spring Boot. ?

Como lo mencionamos en el artículo inicial, el objetivo de esta serie de tutoriales es explicar cómo crear y configurar una aplicación web con Spring Boot, Webjars y autenticación OAUTH2 con Google. ?

Introducción

Thymeleaf es un sistema de templetes de HTML, nos permite desplegar información desde una aplicación web basada en Java sin necesidad de usar JSPs y de una forma muy sencilla. Provee de etiquetas para ello y los archivos que utiliza son de HTML puro.

Dependencias

Comenzaremos por agregar las dependencias necesarias de Thymeleaf, nota que la primera de ellas es un Starter de Spring Boot que agregamos con Spring Initializr. Las siguientes dos nos permitirán usar las capacidades de seguridad de Thymeleaf y Spring Boot.

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
        </dependency>
       	<dependency>
			<groupId>org.thymeleaf.extras</groupId>
			<artifactId>thymeleaf-extras-springsecurity4</artifactId>
		</dependency>

Layout

Para comenzar agregaremos un templete principal en el que incluiremos el header y footer del proyecto, así como un segmento de HTML para insertar cada una de las diferentes páginas.

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" lang="en">
    <head th:fragment="head-fragment">
	    <title>Tech Events Guadalajara</title>
	    <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>				                

        <title layout:title-pattern="$LAYOUT_TITLE | $CONTENT_TITLE">Tech Events Guadalajara</title>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #3f51b5;">
                <a class="navbar-brand" th:href="@{/}">Tech Events Guadalajara</a>
                <div class="navbar-nav mr-auto">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/event}">Events</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/talks}">Talks</a>
                        </li>
                    </ul>
                </div>
                <div class="navbar-nav">
                    <ul class="navbar-nav">
                        <li class="nav-item" sec:authorize="isAnonymous()">
                        	<button onclick="location.href='/login'" class="btn btn-success">Login</button>                            
                        </li>
                        <li class="nav-item" sec:authorize="isAuthenticated()">
                            <button onClick="logout()" class="btn btn-danger">Logout</button>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <main role="main">
            <div layout:fragment="content"></div>
        </main>
		
        <footer class="footer">
            <div class="container">
                <p class="text-center text-uppercase text-muted">Carlos Salazar, Codesolt 2018 &copy;</p>
                <p class="text-center text-muted">Contacto: <a href="mailto:carlos.salazar@codesolt.com" target="_blank">carlos.salazar@codesolt.com</a></p>
            </div>
        </footer>
    </body>
</html>

Es importante que veamos la etiqueta de main role, ya que dentro de esta etiqueta, se insertará el contenido de todas las páginas que ocupen este decorador.

Finalmente, observa como usamos el dialecto de seguridad para mostrar el botón de login si el usuario no está autenticado o mostrar el botón de logout si el usuario ya está autenticado. El tema de Logout lo veremos en próximos tutoriales.

Templates

A continuación se muestran un par de documentos HTML, que se insertan dentro del decorador revisado en el punto anterior, primeramente revisaremos el Index o página principal, en la cual únicamente mostramos un previo de la página y damos la bienvenida.

Para insertar nuestra vista en el decorador revisado en el punto anterior, solo incluiremos la propiedad layout:decorate=”~{layout.html}” dentro de nuestra etiqueta html. Nota como se usa el dialecto de seguridad para mostrar la bienvenida a un usuario autenticado o uno anónimo.

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout.html}" lang="en">
<head>
    <title>Tech Events Guadalajara</title>
    <meta charset="utf-8"/>
</head>
<body>
    <div layout:fragment="content">
        <div class="jumbotron main-content">
            <h1 class="mt-2">Tech Events Guadalajara</h1>
            <h2>Find tech events at the Mexican Silicon Valley</h2>
            <h3 sec:authorize="isAuthenticated()">Welcome <span th:text="${username}"></span>!</h3>
            <h3 sec:authorize="isAnonymous()">Login to see events!</h3>
        </div>
        <div class="container">
            <h4><a href="/event">See more...</a></h4>
        </div>
    </div>
</body>
</html>

El siguiente template que revisaremos es el de la página que muestra los eventos, en ella tenemos una tabla qu despliega una colección de datos.

Para lograr esto, creamos la estructura de la tabla en HTML y luego mediante un for each de Thymeleaf, desplegaremos la información recibida desde el controller como variable.

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}" lang="en">
<head>
    <title>Tech Events Guadalajara</title>
    <meta charset="utf-8"/>
</head>
<body>

<div layout:fragment="content">
    <div class="container main-content">
    	<br /><br />
        <div class="row mt-1">
            <div class="col-7">
                <h3 class="mt-2">Tech events at Guadalajara</h3>
            </div>
        </div>
        <table id="table" class="table table-striped table-sm">
            <thead>
                <th scope="col">Name</th>
                <th scope="col">Venue</th>
                <th scope="col">Topic</th>
                <th scope="col">Day</th>
                <th scope="col">Detais</th>
            </thead>
            <tbody>
                <tr th:each="event : ${events}">                    
                    <td th:text="${event.name}"></td>
                    <td th:text="${event.venue}"></td>
                    <td th:text="${event.topic}"></td>
                    <td th:text="${#dates.format(event.day, 'dd-MM-yyyy')}"></td>
                    <th scope="row"><a th:href="@{'/event/' + ${event.id}}">See talks...</a></th>                    
                </tr>
            </tbody>
        </table>
        <p><a href="/" th:href="@{/}">Back to home...</a></p>
    </div>
</div>
</body>
</html>

Continúa con el tutorial

Recuerda que estar serie cuenta con muchos tutoriales, puedes encontrar el siguiente sobre Webjars a continuación:

https://www.codesolt.com/tutoriales/spring-boot-web/spring-boot-web-webjars/

Repositorio de Github

Recuerda que puedes encontrar todo el código de esta aplicación en mi repositorio de Github (no olvides darle estrellita ?):

https://github.com/chuucks/Spring-Boot-Web-OAUTH2


Recuerda que el uso y configuración de Thymeleaf en Spring Boot mostrado en este proyecto tiene únicamente fines ilustrativos para la comunidad de Codesolt.

Comments

comments