What is WebJars?
WebJars are client-side web libraries which contain libraries such as jQuery, jQuery UI, Bootstrap, etc. by packaging jar (Java Archive) files.
You can add the necessary dependencies for WebJars by using Maven or Gradle.
IDE
In this tutorial, we will use Eclipse.
Source Code
You can refer to the source code below.
https://github.com/ZarLiHninn/Form-Submitting-Lombok-WebJars
Let’s start WebJars
We will show you how to use WebJars in our previous project which is Form Submitting with Spring Boot Validation.
Step 1. Add the following dependencies
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0-2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.7.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.11.1</version>
</dependency>
You can also use other populated web client libraries in your project.
Step 2. Check Maven Dependencies
Step 3. Use Webjars for bootstrap in HTML view
You can use the @{/webjars/bootstrap/… path for static contents, served from Webjars. For example, use the following paths for bootstrap theme and JavaScript’s.
<!--Bootstrap CSS-->
<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}" />
<!--Bootstrap JS-->
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
Let’s complete the code!
form.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Form_Registration</title>
<link th:rel="stylesheet"
th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css}" />
<link th:rel="stylesheet"
th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css}" />
<link th:rel="stylesheet"
th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}" />
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat : "yy-mm-dd"
});
});
</script>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>Form Registration</h1>
<form th:action="@{/form/result}" th:object="${student}" method="post">
<div class="form-group">
<label>Student Name</label>
<input class="form-control" type="text" th:field="*{name}" />
<span class="error" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</span>
</div>
<div class="form-group">
<label>Age</label>
<input class="form-control" type="text" th:field="*{age}" />
<span class="error" th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</span>
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" th:field="*{email}" />
<span class="error" th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email Error</span>
</div>
<div class="form-group">
<label>BirthDate</label>
<input class="form-control" type="text" id="datepicker" th:field="*{birthDate}">
<span class="error" th:if="${#fields.hasErrors('birthDate')}" th:errors="*{birthDate}">BirthDate Error</span>
</div>
<div>
<p>Subjects</p>
<span th:each="sub: ${subject_value}">
<input type="checkbox" th:field="*{subjects}" th:value="${sub}" />
<label th:text="${sub}">Subjects</label>
</span>
<p class="error" th:if="${#fields.hasErrors('subjects')}" th:errors="*{subjects}">Subject Error</p>
</div>
<div>
<p>Gender</p>
<span th:each="gen: ${gender_value}">
<input type="radio" th:field="*{gender}" th:value="${gen}" />
<label th:text="${gen}">Gender</label>
</span>
<p class="error" th:if="${#fields.hasErrors('gender')}" th:errors="*{gender}">Gender Error</p>
</div>
<input type="submit" value="Send" />
</form>
</div>
</body>
</html>
result.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Result</title>
<link th:rel="stylesheet"
th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css}" />
<link th:rel="stylesheet"
th:href="@{/webjars/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css}" />
<link th:rel="stylesheet"
th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}" />
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<div th:if="${result != null}" class="container">
<h1>Result</h1>
<table class="table table-bordered">
<tr>
<th>Title</th>
<th>Value</th>
</tr>
<tr>
<td>Student Name</td>
<td><span th:text="${result.name}"></span></td>
</tr>
<tr>
<td>Age</td>
<td><span th:text="${result.age}"></span></td>
</tr>
<tr>
<td>Email</td>
<td><span th:text="${result.email}"></span></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><span th:text="${result.birthDate}"></span></td>
</tr>
<tr>
<td>Subjects</td>
<td>
<ul>
<li th:each="sub : ${result.subjects}" th:text="${sub}"></li>
</ul>
</td>
</tr>
<tr>
<td>Gender</td>
<td><span th:text="${result.gender}"></span></td>
</tr>
</table>
</div>
<div class="container">
<a th:href="@{/back}">Back</a>
</div>
</body>
</html>
Step 4. Let’s run our application
- Let’s go to localhost:8080/form and we will see the following form.
- Let’s submit some error data and then we can see error messages.
- Let’s submit the right data.
- Now we can see the result in localhost:8080/form/result.
Top comments (0)