1. Introduction
In this article, we are going to present Thymeleaf Rating Stars component. Rating using stars is a common solution used on social websites or blogs.
If you need some more information about Thymeleaf and Forms check below links:
Thymeleaf configuration with Spring Boot
Working with Forms in Thymeleaf
2. Dependencies
2.1. Maven dependencies
The sample application use three main Maven dependencies:
2.2. Front-End libraries
- bootstrap - a frontend framework for creating responsive layouts.
- star-rating - a JavaScript library for building star rating components.
Maven pom.xml
file have the following structure:
3. Model, Controller, Service and Main Application class
The model layer contains a single object Rating
that holds the rating value in stars:
All GET and POST requests to the root context are handled by IndexController
class that has the following structure:
The Application
is the main class that starts the Spring Boot application server:
4. Templates
In the presentation layer we use two Thymeleaf templates:
- index.html - template where the rating stars component is placed,
- saved.html - template for presenting submitted rating.
The index.html
template has the following structure:
The saved.html
view simple presents submitted rating:
5. The output
The running application is available under http://locahost:8080
URL and presents the following functionality:
6. Conclusion
In this article, we presented how to create Thymeleaf Rating Stars component.
As usual, the code used in this article is available under our GitHub repository.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}