Spring boot w/ Thymeleaf, jQuery & jQuery UI, and Bootstrap

Spring boot w/ Thymeleaf, jQuery & jQuery UI, and Bootstrap

A more typical/modern setup would be to replace JSP with one of the template engines and JS and styling libraries:

Add Thymeleaf to Dependency

Add this to the project POM:

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

Installing files

jQuery

Copy into src/main/resources/static/js/ the downloaded jquery-a.b.c.js (or jquery-a.b.c.min.js)

jQuery UI

  • Copy into src/main/resources/static/js/ the downloaded jquery-ui.js (or jquery-ui.min.js)
  • Copy into src/main/resources/static/css/ the downloaded jquery-ui*.css
  • Copy into src/main/resources/static/css/ the images subdirectory itself (i.e. as src/main/resources/static/css/images)

Bootstrap

Copy into src/main/resources/static/ the three subdirectories from the Bootstrap distribution:

  • css
  • fonts
  • js

Include the files into templates

This can be done per-template, but probably easier to have a fragment that templates can call.

Start with a fragment file

Create fragment template such as src/main/resources/templates/fragments/js.html

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="bootstrap">
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <script src="/js/bootstrap.min.js"></script>
</div>
<div th:fragment="jquerys">
    <link rel="stylesheet" href="/css/jquery-ui.css"/>
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
</div>
</body>
</html>

NOTE the two jquery libraries are combined into one fragment “jquerys”. They can be broken up as needed.

Reference various fragments in templates as needed

E.g. from src/main/resources/templates/index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
...
<div th:include="fragments/js :: jquerys"></div>
<div th:include="fragments/js :: bootstrap"></div>
....
Tags: , , , ,

Leave a Reply