S02L02 - La plantilla y los archivos externos

html

Integrando Plantillas con Spring Boot: Una Guía Integral
Tabla de Contenidos

Introducción ................................................................. 1
Comprendiendo la Estructura del Proyecto ............ 2
Añadiendo Plantillas y Recursos Estáticos ........ 4
Configurando el Controller de Spring Boot ............. 6
Ejecutando y Probando la Aplicación .......... 8
Introducción al Motor de Plantillas Thymeleaf ... 10
Conclusión ................................................................. 12


Introducción
En el ámbito del desarrollo web, integrar plantillas con frameworks backend es fundamental para crear aplicaciones dinámicas y responsivas. Spring Boot, reconocido por su simplicidad y potentes características, ofrece un enfoque simplificado para construir aplicaciones web basadas en Java. Esta guía profundiza en el proceso de integración de plantillas con una aplicación de Spring Boot, enfatizando las mejores prácticas, estructuras de carpetas y la utilización del motor de plantillas Thymeleaf.
Puntos Clave:

Comprender la estructura del proyecto de Spring Boot.
Integrar plantillas HTML y recursos estáticos.
Configurar controllers para servir plantillas.
Aprovechar Thymeleaf para capacidades mejoradas de plantillas.

Pros:

Simplifica el desarrollo de aplicaciones web.
Ofrece una configuración rápida con configuraciones mínimas.
Mejora la mantenibilidad a través de estructuras organizadas.

Contras:

Curva de aprendizaje más pronunciada para principiantes no familiarizados con Spring Boot.
Flexibilidad limitada sin una comprensión adecuada de los conceptos subyacentes.





		
		
			
			
Java
			
			<table border=1 style='width:100%; text-align:center;'>
    <tr>
        <th>Característica</th>
        <th>Spring Framework</th>
        <th>Spring Boot</th>
    </tr>
    <tr>
        <td>Configuración</td>
        <td>Extensiva</td>
        <td>Mínima</td>
    </tr>
    <tr>
        <td>Tiempo de Configuración</td>
        <td>Más Largo</td>
        <td>Más Rápido</td>
    </tr>
    <tr>
        <td>Valores por Defecto Opinados</td>
        <td>No</td>
        <td>Sí</td>
    </tr>
    <tr>
        <td>Flexibilidad</td>
        <td>Alta</td>
        <td>Moderada</td>
    </tr>
</table>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						<table border=1 style='width:100%; text-align:center;'>
    <tr>
        <th>Característica</th>
        <th>Spring Framework</th>
        <th>Spring Boot</th>
    </tr>
    <tr>
        <td>Configuración</td>
        <td>Extensiva</td>
        <td>Mínima</td>
    </tr>
    <tr>
        <td>Tiempo de Configuración</td>
        <td>Más Largo</td>
        <td>Más Rápido</td>
    </tr>
    <tr>
        <td>Valores por Defecto Opinados</td>
        <td>No</td>
        <td>Sí</td>
    </tr>
    <tr>
        <td>Flexibilidad</td>
        <td>Alta</td>
        <td>Moderada</td>
    </tr>
</table>
					
				
			
		


Cuándo Usar:

Spring Boot es ideal para desarrolladores que buscan crear aplicaciones basadas en Spring, independientes y de grado de producción, con un esfuerzo mínimo. Es particularmente útil para arquitectura de microservicios y ciclos de desarrollo rápidos.

Comprendiendo la Estructura del Proyecto
Una estructura de proyecto bien organizada es fundamental para mantener y escalar aplicaciones. A continuación se presenta un desglose de la jerarquía típica de carpetas en un proyecto de Spring Boot integrado con plantillas.
Descripción General de la Jerarquía del Proyecto




		
		
			
			
Java
			
			SpringStarter
│
├── src
│   ├── main
│   │   ├── java
│   │   │   └── org.studyeasy.SpringStarter
│   │   │       ├── SpringStarterApplication.java
│   │   │       └── Controller
│   │   │           └── HomeController.java
│   │   └── resources
│   │       ├── static
│   │       │   ├── css
│   │       │   ├── fonts
│   │       │   ├── images
│   │       │   └── js
│   │       └── templates
│   │           ├── about.html
│   │           ├── book.html
│   │           └── home.html
│   └── test
│       └── java
│           └── org.studyeasy.SpringStarter
│               └── SpringStarterApplicationTests.java
├── pom.xml
└── mvnw
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						SpringStarter
│
├── src
│   ├── main
│   │   ├── java
│   │   │   └── org.studyeasy.SpringStarter
│   │   │       ├── SpringStarterApplication.java
│   │   │       └── Controller
│   │   │           └── HomeController.java
│   │   └── resources
│   │       ├── static
│   │       │   ├── css
│   │       │   ├── fonts
│   │       │   ├── images
│   │       │   └── js
│   │       └── templates
│   │           ├── about.html
│   │           ├── book.html
│   │           └── home.html
│   └── test
│       └── java
│           └── org.studyeasy.SpringStarter
│               └── SpringStarterApplicationTests.java
├── pom.xml
└── mvnw
					
				
			
		


Componentes Clave:

src/main/java: Contiene el código fuente Java.
src/main/resources/static: Alberga recursos estáticos como CSS, JS, fuentes e imágenes.
src/main/resources/templates: Almacena archivos de plantillas HTML renderizados por la aplicación.
pom.xml: Archivo de configuración de Maven que gestiona las dependencias del proyecto.


Añadiendo Plantillas y Recursos Estáticos
Integrar plantillas y recursos estáticos es crucial para el aspecto frontend de tu aplicación. Esta sección detalla los pasos para añadir y organizar estos recursos de manera efectiva.
Paso 1: Organizando Recursos Estáticos
Spring Boot sirve automáticamente contenido estático desde directorios específicos. Asegúrate de que tus archivos estáticos estén colocados bajo src/main/resources/static.
Estructura de Carpetas:




		
		
			
			
Java
			
			static
├── css
│   ├── bootstrap.css
│   ├── font-awesome.min.css
│   ├── responsive.css
│   ├── style.css
│   └── style.scss
├── fonts
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── images
│   ├── about-img.png
│   ├── client1.jpg
│   ├── hero-bg.jpg
│   └── favicon.png
└── js
    ├── bootstrap.js
    ├── custom.js
    └── jquery-3.4.1.min.js
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						static
├── css
│   ├── bootstrap.css
│   ├── font-awesome.min.css
│   ├── responsive.css
│   ├── style.css
│   └── style.scss
├── fonts
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── images
│   ├── about-img.png
│   ├── client1.jpg
│   ├── hero-bg.jpg
│   └── favicon.png
└── js
    ├── bootstrap.js
    ├── custom.js
    └── jquery-3.4.1.min.js
					
				
			
		


Paso 2: Añadiendo Plantillas HTML
Coloca tus archivos HTML bajo el directorio src/main/resources/templates.
Archivos HTML:

home.html: La página de inicio.
about.html: Información sobre la aplicación o la empresa.
book.html: Un formulario para entradas o envíos de usuarios.

Paso 3: Plantilla de Ejemplo (home.html)




		
		
			
			
Java
			
			&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Página de Inicio&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/bootstrap.css}&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/style.css}&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;¡Bienvenido a Nuestra Aplicación Spring Boot!&lt;/h1&gt;
        &lt;p&gt;Esta es la página de inicio.&lt;/p&gt;
        &lt;a th:href=&quot;@{/about}&quot; class=&quot;btn btn-primary&quot;&gt;Sobre Nosotros&lt;/a&gt;
    &lt;/div&gt;
    &lt;script th:src=&quot;@{/js/jquery-3.4.1.min.js}&quot;&gt;&lt;/script&gt;
    &lt;script th:src=&quot;@{/js/bootstrap.js}&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Página de Inicio&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/bootstrap.css}&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; th:href=&quot;@{/css/style.css}&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;¡Bienvenido a Nuestra Aplicación Spring Boot!&lt;/h1&gt;
        &lt;p&gt;Esta es la página de inicio.&lt;/p&gt;
        &lt;a th:href=&quot;@{/about}&quot; class=&quot;btn btn-primary&quot;&gt;Sobre Nosotros&lt;/a&gt;
    &lt;/div&gt;
    &lt;script th:src=&quot;@{/js/jquery-3.4.1.min.js}&quot;&gt;&lt;/script&gt;
    &lt;script th:src=&quot;@{/js/bootstrap.js}&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
 
					
				
			
		


Explicación:

Namespace XML: El atributo xmlns:th habilita el procesamiento de Thymeleaf.
Enlace de Recursos: Los atributos th:href y th:src aseguran el enlace adecuado a recursos estáticos.


Configurando el Controller de Spring Boot
Los controllers en Spring Boot manejan las solicitudes HTTP entrantes y retornan respuestas apropiadas, típicamente renderizando plantillas HTML.
Paso 1: Creando HomeController.java




		
		
			
			
Java
			
			package org.studyeasy.SpringStarter.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home"; // Renderiza home.html
    }

    @GetMapping("/about")
    public String about() {
        return "about"; // Renderiza about.html
    }

    @GetMapping("/book")
    public String book() {
        return "book"; // Renderiza book.html
    }
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						package org.studyeasy.SpringStarter.Controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class HomeController {
 
    @GetMapping("/")
    public String home() {
        return "home"; // Renderiza home.html
    }
 
    @GetMapping("/about")
    public String about() {
        return "about"; // Renderiza about.html
    }
 
    @GetMapping("/book")
    public String book() {
        return "book"; // Renderiza book.html
    }
}
 
					
				
			
		


Explicación:

@Controller Annotation: Indica que esta clase sirve como un controller web.
@GetMapping: Mapea solicitudes HTTP GET a métodos específicos manejadores.
Valores de Retorno: La cadena retornada corresponde al nombre de la plantilla HTML sin la extensión .html.

Paso 2: Configurando SpringStarterApplication.java




		
		
			
			
Java
			
			package org.studyeasy.SpringStarter;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringStarterApplication {

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

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						package org.studyeasy.SpringStarter;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
@SpringBootApplication
public class SpringStarterApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(SpringStarterApplication.class, args);
    }
}
 
					
				
			
		


Explicación:

@SpringBootApplication: Combina tres anotaciones:

@EnableAutoConfiguration
@ComponentScan
@Configuration


método main: Inicializa la aplicación.

Paso 3: Dependencias de Maven (pom.xml)
Asegúrate de que la dependencia de Thymeleaf esté incluida en tu pom.xml para habilitar el renderizado de plantillas.




		
		
			
			
Java
			
			&lt;dependencies&gt;
    &lt;!-- Spring Boot Starter Web --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Thymeleaf Template Engine --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Otras dependencias --&gt;
    &lt;!-- ... --&gt;
&lt;/dependencies&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
				
						&lt;dependencies&gt;
    &lt;!-- Spring Boot Starter Web --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Thymeleaf Template Engine --&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt;
    &lt;/dependency&gt;
    
    &lt;!-- Otras dependencias --&gt;
    &lt;!-- ... --&gt;
&lt;/dependencies&gt;
 
					
				
			
		


Explicación:

spring-boot-starter-web: Facilita la construcción de aplicaciones web.
spring-boot-starter-thymeleaf: Integra Thymeleaf como el motor de plantillas.


Ejecutando y Probando la Aplicación
Con la estructura del proyecto y los controllers configurados, es momento de ejecutar y probar la aplicación.
Paso 1: Iniciando la Aplicación
Navega al directorio raíz del proyecto y ejecuta el siguiente comando en la terminal:




		
		
			
			
Java
			
			./mvnw spring-boot:run
			
				
					
				
					1
				
						./mvnw spring-boot:run
					
				
			
		


Explicación:

./mvnw: Script de Maven Wrapper para sistemas basados en Unix.
spring-boot:run: Objetivo de Maven para ejecutar la aplicación Spring Boot.

Paso 2: Accediendo a la Aplicación
Una vez que la aplicación inicia, abre tu navegador web y navega a:

Página de Inicio: http://localhost:8080/
Página Sobre: http://localhost:8080/about
Página de Reserva: http://localhost:8080/book

Paso 3: Verificando la Salida
Al acceder a estas URLs, deberías ver las respectivas páginas HTML renderizadas correctamente con recursos estáticos vinculados como archivos CSS y JS.
Salida de Ejemplo:




		
		
			
			
Java
			
			&lt;img src="static/images/home-screenshot.png" alt="Captura de Pantalla de la Página de Inicio"&gt;
			
				
					
				
					1
				
						&lt;img src="static/images/home-screenshot.png" alt="Captura de Pantalla de la Página de Inicio"&gt;
					
				
			
		


Nota: Reemplaza con capturas de pantalla reales de las páginas renderizadas.
Ver Fuente:

Inspeccionar la fuente de la página (Ctrl + U o Cmd + U) revela que todos los enlaces a archivos CSS y JS están correctamente resueltos, asegurando el estilo y la funcionalidad adecuados.

Introducción al Motor de Plantillas Thymeleaf
Thymeleaf es un moderno motor de plantillas Java del lado del servidor para entornos web y autónomos. Ofrece un enfoque de plantillas natural, permitiendo a los desarrolladores crear plantillas que pueden abrirse directamente en navegadores sin modificaciones.
Características Clave de Thymeleaf:

Plantilla Natural: Las plantillas pueden renderizarse como prototipos estáticos sin requerir un servidor en ejecución.
Integración con Spring MVC: Funciona de manera fluida con los controllers de Spring Boot.
Soporte Rico de Atributos: Ofrece una variedad de atributos para el renderizado dinámico de contenido.

Mejorando Plantillas con Thymeleaf
Renderizado Dinámico de Contenido:




		
		
			
			
Java
			
			&lt;h1 th:text="${title}"&gt;Título Predeterminado&lt;/h1&gt;
&lt;p th:text="${description}"&gt;Descripción Predeterminada&lt;/p&gt;

			
				
					
				
					1
2
3
				
						&lt;h1 th:text="${title}"&gt;Título Predeterminado&lt;/h1&gt;
&lt;p th:text="${description}"&gt;Descripción Predeterminada&lt;/p&gt;
 
					
				
			
		


Explicación:

th:text: Reemplaza el contenido con el valor de la variable especificada.
${title}: Expresión para obtener el atributo title del modelo.

Pasando Datos del Controller a la Plantilla
Modificación del Controller:




		
		
			
			
Java
			
			@GetMapping("/book")
public String book(Model model) {
    model.addAttribute("title", "Página de Reserva");
    model.addAttribute("description", "Esta es la página de reserva.");
    return "book";
}

			
				
					
				
					1
2
3
4
5
6
7
				
						@GetMapping("/book")
public String book(Model model) {
    model.addAttribute("title", "Página de Reserva");
    model.addAttribute("description", "Esta es la página de reserva.");
    return "book";
}
 
					
				
			
		


Explicación:

Model: Una interfaz que define un contenedor para atributos del modelo.
addAttribute: Añade atributos al modelo para ser accedidos en la plantilla.

Plantilla Actualizada (book.html):




		
		
			
			
Java
			
			&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title th:text="${title}"&gt;Página de Reserva&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1 th:text="${title}"&gt;Página de Reserva&lt;/h1&gt;
        &lt;p th:text="${description}"&gt;Esta es la página de reserva.&lt;/p&gt;
        &lt;form&gt;
            &lt;!-- Campos del Formulario --&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
				
						&lt;!DOCTYPE html&gt;
&lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title th:text="${title}"&gt;Página de Reserva&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1 th:text="${title}"&gt;Página de Reserva&lt;/h1&gt;
        &lt;p th:text="${description}"&gt;Esta es la página de reserva.&lt;/p&gt;
        &lt;form&gt;
            &lt;!-- Campos del Formulario --&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
 
					
				
			
		


Renderizado Condicional e Iteración
Renderizado Condicional:




		
		
			
			
Java
			
			&lt;div th:if="${user != null}"&gt;
    &lt;p&gt;¡Bienvenido, &lt;span th:text="${user.name}"&gt;Usuario&lt;/span&gt;!&lt;/p&gt;
&lt;/div&gt;
&lt;div th:unless="${user != null}"&gt;
    &lt;p&gt;Por favor, inicia sesión.&lt;/p&gt;
&lt;/div&gt;

			
				
					
				
					1
2
3
4
5
6
7
				
						&lt;div th:if="${user != null}"&gt;
    &lt;p&gt;¡Bienvenido, &lt;span th:text="${user.name}"&gt;Usuario&lt;/span&gt;!&lt;/p&gt;
&lt;/div&gt;
&lt;div th:unless="${user != null}"&gt;
    &lt;p&gt;Por favor, inicia sesión.&lt;/p&gt;
&lt;/div&gt;
 
					
				
			
		


Iteración sobre Colecciones:




		
		
			
			
Java
			
			&lt;ul&gt;
    &lt;li th:each="book : ${books}" th:text="${book.title}"&gt;Título del Libro&lt;/li&gt;
&lt;/ul&gt;

			
				
					
				
					1
2
3
4
				
						&lt;ul&gt;
    &lt;li th:each="book : ${books}" th:text="${book.title}"&gt;Título del Libro&lt;/li&gt;
&lt;/ul&gt;
 
					
				
			
		


Explicación:

th:if / th:unless: Renderiza condicionalmente contenido basado en la expresión.
th:each: Itera sobre una colección, permitiendo el renderizado repetitivo de elementos.


Conclusión
Integrar plantillas con Spring Boot mejora el desarrollo de aplicaciones web dinámicas y amigables para el usuario. Al comprender la estructura del proyecto, gestionar efectivamente los recursos estáticos, configurar controllers y aprovechar el motor de plantillas Thymeleaf, los desarrolladores pueden construir aplicaciones robustas y mantenibles con facilidad.
Principales Conclusiones:

Una organización adecuada del proyecto es esencial para la escalabilidad.
Las convenciones de Spring Boot reducen la sobrecarga de configuración.
Thymeleaf ofrece una forma poderosa e intuitiva de renderizar contenido dinámico.

Emprende tu viaje con Spring Boot implementando estas prácticas y desbloquea el pleno potencial del desarrollo moderno de aplicaciones web.
Palabras Clave SEO: tutorial de Spring Boot, integrando plantillas con Spring Boot, Thymeleaf Spring Boot, estructura de proyecto Spring Boot, recursos estáticos Spring Boot, configuración de controller Spring Boot, plantillas Thymeleaf, aplicación web Spring Boot, plantillas HTML Spring Boot, guía Spring Boot y Thymeleaf
Nota: Este artículo es generado por IA.
S02L02 – La plantilla y los archivos externos

Integrando Plantillas con Spring Boot: Una Guía Integral

Tabla de Contenidos

Introducción

Comprendiendo la Estructura del Proyecto

Descripción General de la Jerarquía del Proyecto

Componentes Clave:

Añadiendo Plantillas y Recursos Estáticos

Paso 1: Organizando Recursos Estáticos

Paso 2: Añadiendo Plantillas HTML

Paso 3: Plantilla de Ejemplo (`home.html`)

Configurando el Controller de Spring Boot

Paso 1: Creando `HomeController.java`

Paso 2: Configurando `SpringStarterApplication.java`

Paso 3: Dependencias de Maven (`pom.xml`)

Ejecutando y Probando la Aplicación

Paso 1: Iniciando la Aplicación

Paso 2: Accediendo a la Aplicación

Paso 3: Verificando la Salida

Introducción al Motor de Plantillas Thymeleaf

Características Clave de Thymeleaf:

Mejorando Plantillas con Thymeleaf

Pasando Datos del Controller a la Plantilla

Renderizado Condicional e Iteración

Conclusión
