Forem

Zar Li Hnin for Rey Tech Inc.

Posted on • Edited on

7 1

Using WebJars in Spring Boot

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>


Enter fullscreen mode Exit fullscreen mode

You can also use other populated web client libraries in your project.

Step 2. Check Maven Dependencies

Alt Text

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>


Enter fullscreen mode Exit fullscreen mode

Alt Text

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>


Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode




Step 4. Let’s run our application

  1. Let’s go to localhost:8080/form and we will see the following form. Alt Text
  2. Let’s submit some error data and then we can see error messages. Alt Text
  3. Let’s submit the right data. Alt Text
  4. Now we can see the result in localhost:8080/form/result. Alt Text

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay