Using WebJars in Spring Boot
Tags: java, springframework, webjars, thymeleaf
Published: 2020-07-27 12:30:03

#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.](https://dev.to/reytech-lesson/form-submitting-with-spring-boot-validation-5clg)

##Step 1. Add the following dependencies
```xml
<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](https://dev.to/reytech-lesson/popular-web-client-libraries-in-webjars-phh) in your project.

##Step 2. Check Maven Dependencies
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m90hy75m0vbujb1ezrd8.png)

##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.
```html
<!--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>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ci3zp0n40xt4lnxnz4mk.png)

Let’s complete the code!
form.html
```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
```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
1. Let’s go to localhost:8080/form and we will see the following form.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/liquumr0oo454ijq2noo.png)
2. Let’s submit some error data and then we can see error messages.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c5fkku1fdz8hvhmhwowx.png)
3. Let’s submit the right data.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xj7h8f4lf90hoq8d17ot.png)
4. Now we can see the result in localhost:8080/form/result.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sjy9htjkir620tqpy2mz.png)