Controller

The controller is responsible for handling requests and generating responses.

Spring Controller

The spring controller is a Java class annotated with @Controller and @RequestMapping (to map it to the correct url). Full documentation on the controller can be found here.

  @Controller
@RequestMapping(value = "/questionnaires")
public class QuestionnaireController {
    @Autowired // Dependency Injection
    private QuestionnaireRepository questionnaireRepository;

    @GetMapping // Map to GET requests
    public String findAll(Model model) {
        List<Questionnaire> questionnaires = questionnaireRepository.findAll();
        model.addAttribute("questionnaires", questionnaires);
        return "questionnaires/list";
    }

    @GetMapping(value = "/{id}") // Map to GET requests with a path variable
    public String findById(@PathVariable String id, Model model) {
        Optional<Questionnaire> questionnaire = questionnaireRepository.findById(id);
        if (questionnaire.isEmpty()) {
            return "404";
        }
        model.addAttribute("questionnaire", questionnaire.get());
        return "questionnaires/show";
    }
}

Model

The model is responsible for managing the data and the business logic. It is independent of the user interface.

Spring Model

The model is used to pass data to the view. It is passed as a parameter to the controller method.

Data is added with the addAttribute or mergeAttributes. Full documentation on the model can be found here.

  @GetMapping(params = {"form"})
public String getForm(Model model) {
    model.addAttribute("questionnaire", new Questionnaire()); // Add a new questionnaire to the model
    return "questionnaires/create";
}

@GetMapping(value = "/{id}", params = {"update-form"})
public String getUpdateForm(@PathVariable String id, Model model) {
    Optional<Questionnaire> questionnaire = questionnaireRepository.findById(id);
    if (questionnaire.isEmpty()) {
        return "404";
    }
    model.addAttribute("questionnaire", questionnaire.get()); // Add the questionnaire to the model
    return "questionnaires/update";
}

View

The view is responsible for displaying the data to the user and receive input from the user and forward it to the controller. It is the only component which is visible to the user.

Spring uses the ThymeLeaf template engine to render HTML pages.

  <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="maincontent(content)">
<head>
    <title>Flashcard App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>
<body>
    <div class="container-fluid">
        <!-- replace this part with the "header" fragment from header.html -->
        <div th:replace="~{header :: header}">Fake header</div>
        <!-- replace this part with the content passed with the 'content' variable -->
        <div th:replace="${content}">Fake content</div>
        <!-- replace this part with the "footer" fragment from footer.html -->
        <div th:replace="~{footer :: footer}">Fake footer</div>
    </div>
</body>
</html>
  
  <!DOCTYPE html>
<!-- pass maincontent to layout.html with content from <section> -->
<html th:replace="~{layout :: maincontent(~{::section})}">
<head>
    <title>flashcard</title>
</head>
<body>
<section>
    <a class="btn btn-success float-end" th:href="@{/questionnaires(form)}">
        <i class="bi bi-plus-circle-fill"></i> Add Questionnaire
    </a>
    <h3>Questionnaires</h3>
    <div th:if="${questionnaires.isEmpty()}">
        <h2 style="text-align: center">No Questionnaires found</h2>
    </div>
    <!-- More content... -->
</section>
</body>
</html>
  
  <!DOCTYPE html>
<html th:replace="~{layout :: maincontent(~{::section})}">
<head>
    <title>flashcard</title>
</head>
<body>
<section style="width: 60%; margin-left: 10em">
    <form th:object="${questionnaire}">
        <fieldset disabled>
            <div class="mb-3 row">
                <label class="col-md-2" th:for="title">Title:</label>
                <div class="col-md-10">
                    <input class="form-control" type="text" th:field="*{title}" th:errorclass="fieldError"/>
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-md-2" th:for="description">Description:</label>
                <div class="col-md-10">
                    <input class="form-control" type="text" th:field="*{description}" th:errorclass="fieldError"/>
                </div>
            </div>
        </fieldset>
        <div class="mb-3 row row-cols-auto">
            <a class="btn btn-light" th:href="@{/questionnaires}">Close</a>
        </div>
    </form>
</section>
</body>
</html>

ThymeLeaf

Views are returned by the controller as a string. The string is the name of the HTML file without the extension or a redirect.

For example, if the templates folder structure looks like the following:

  resources/
└── templates/
    ├── questionnaires/
    │   ├── create.html
    │   ├── list.html
    │   ├── show.html
    │   └── update.html
    ├── 404.html
    ├── error.html
    ├── footer.html
    ├── header.html
    └── layout.html
  • return "404" would return the 404.html file.
  • return "questionnaires/create" would return the create.html file in the questionnaires folder.
  • return "redirect:/questionnaires" would redirect to the /questionnaires web page.

The ThyemeLeaf template engine documentation can be found here.