Now that you understand how Thymeleaf templating works, the next step is to enhance your HTML templates with JavaScript and CSS. Thymeleaf templates not only allow for dynamic HTML content generation, but also offers support for integrating client-side technologies like JavaScript and CSS. This integration is crucial for adding interactivity, style, and functionality to your web applications.
Example Location:com.codingnomads.springmvc.thymleafjsandcss
Resource Management in Spring Boot
In Spring MVC projects, the organization and management of static resources and templates is essential. To help with this, it is important to know that Spring Boot automatically serves web resources located within any of these directories in the classpath:
/resources/static/public/META-INF/resources
Static Resources
During this course, you'll primarily use the /static directory inside src/main/resources. This directory is intended for storing static resources like CSS, JavaScript, and image files. Organizing static content in subdirectories (/static/css, /static/js, /static/images) helps maintain a clean and manageable project structure.
Resources in the static directory are accessible from the web server's root. For example, a CSS file at /resources/static/css/style.css can be referenced as /css/style.css.
Thymeleaf Templates
The /resources/templates directory is designated for storing Thymeleaf HTML templates. As you have learned, templates are HTML files processed by the server to dynamically generate the final rendered HTML sent to the client. Spring Boot automatically resolves views to the templates in /resources/templates when using Thymeleaf as the templating engine.
Exploring the Lab Package
You can browse these folders inside your lab package now and inspect the following files, they are used as part of the example accompanying this lesson.
main.css
h2 {
font-family: sans-serif;
font-size: 1.5em;
text-transform: uppercase;
}
strong {
font-weight: 700;
background-color: darkgoldenrod;
}
p {
font-family: sans-serif;
}
hello.js
function greeting() {
alert("Hello Spring Developer!!");
}
Using JavaScript Files
You can include JavaScript files in a Thymeleaf template like this:
<script type="text/javascript" th:src="proxy.php?url=https%3A%2F%2Fcodingnomads.com%2F%40%7B%2Fjs%2Fhello.js%7D"></script>
th:src targets the HTML src tag, and parses the provided link in a context-relative way to match your web applications root. To call a function defined in this JavaScript file, add it to an actionable HTML element like so:
<button type="button" th:onclick="greeting()">Click Me!!</button>
When you click the button, the greeting() function is called and an alert will be shown!
Using CSS Files
You can include CSS files in a Thymeleaf template like this:
<link rel="stylesheet" th:href="proxy.php?url=https%3A%2F%2Fcodingnomads.com%2F%40%7B%2Fcss%2Fmain.css%7D"/>
It's pretty simple, and you can import both local and remotely hosted files.
<link rel="stylesheet" th:href="proxy.php?url=https%3A%2F%2Fcodingnomads.com%2F%40%7B%2Fcss%2Fmain.css%7D"/>
<link rel="stylesheet"
th:href="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.1.1%2Fdist%2Fcss%2Fbootstrap.min.css">
The second CSS referenced here is Bootstrap. If you are not familiar, Bootstrap is the world’s most popular frontend open-source toolkit. Read about it here.
Thymeleaf Example
To round out this example, here is the IndexController class:
@Controller
public class IndexController {
@GetMapping(value = "/")
public String index() {
// your return references the HTML template defined below
return "thymeleaf_include_js_css";
}
}
Now the content of your completed thymeleaf_include_js_css.html template:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Add CSS and JS to Thymeleaf</title>
<!--
Here is where you add JavaScript and CSS to your HTML file
-->
<script type="text/javascript" th:src="proxy.php?url=https%3A%2F%2Fcodingnomads.com%2F%40%7B%2Fjs%2Fhello.js%7D" defer></script>
<link th:href="proxy.php?url=https%3A%2F%2Fcodingnomads.com%2F%40%7B%2Fcss%2Fmain.css%7D" rel="stylesheet"/>
</head>
<body>
<div align="center">
<h2>Styled Heading</h2>
<p>
This is text on which we want to apply <strong>very
special</strong> styling.
</p>
<!--
Here is how you reference the JavaScript function to see the output
-->
<button type="button" th:onclick="greeting()">Click Me!!</button>
</div>
</body>
</html>
Learn by Doing
Package: com.codingnomads.springmvc.thymleafjsandcss
- Please run ThymeleafJSAndCssDemo and hit the endpoint. Things should look a little better than before, and that alert is pretty cool, right??
- To help a with your confidence in CSS and JavaScript, add at least two new styles to your
main.cssfile, and add at least two new functions to yourhello.jsfile. - Add elements to your
thymeleaf_include_js_css.htmltemplate that utilize the new styles and execute your new functions. Great job!
Please be sure to push your work to GitHub when you're done.
Summary: Leveraging HTML, CSS and JS in Thymeleaf Templates
Spring Boot will automatically scan for static web resources located within any of the following directories:
/resources,/static,/public,/META-INF/resources
During this Spring Framework course, you will focus on the following:
- The static directory will contain your CSS, JavaScript, and image files in subdirectories:
/static/css,/static/js - The templates directory will contain your HTML templates.