Library5: ThymeLeaf Web Project

Welcome to the cifojava2022-3 wiki!

Spring Boot Projects: Library5

Base project

• Base project:

  • @Entity book and List<Book>
  • POM
  • ThymeLeaf dependency

• To work from base-project

  • DataBase H2: Library2
    • First-time CREATE DDL : First-time CREATE DDL option (after that UPDATE) in application.properties
  • Application.properties
  • Command Line Runner with methods to test
  • @Service, @CrudRepository JPA 2.0, @Component
  • @Test JUnit Jupiter

New tools

• ThymeLeaf Templates Engine

  • Most Thymeleaf attributes allow their values to be set as or containing expressions, which we will call Standard Expressions because of the dialects they are used in. These can be of five types:

     ${...} : Variable expressions.
     *{...} : Selection expressions.
     #{...} : Message (i18n) expressions.
     @{...} : Link (URL) expressions.
     ~{...} : Fragment expressions.
    

  • Attributes th:

    message: <p th:text="#{msg.welcome}">Welcome everyone!</p>
    list: <li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>
    link: <form th:action="@{/createOrder}">
    action: <input type="button" th:value**="#{form.submit}" />
    path: `<a th:href="@{/admin/users}">` 
    

  • How to write th:

    

Versions

• version 1.0 : basic project from library

• version 2.0 : evolving project with:

  • POM with new dependencies
  • H2-DB library5 with:
    • application.properities
    • @Entity
    • @CrudRepository
  • @Controller and @Service
  • new HTML: newBook
  • some basic refactoring
  • What exactly does Chrome render? And what does Thymeleaf do?

    • Chrome dev inspector

      

    • ThymeLeaf Inspector Google Renderized

      

• version 3.0 : Commit #2 : v3.0 read, create and delete with THYMELEAF and W3.CSS

  • Create, Read and Update

    

• version 3.1 : update (1/3)

• version 3.2 : update (2/3)

  • th:href = "@{updateBook(bookIdFromView=${book.bookId})}"

  • @RequestMapping("/updateBook") public String updateBook(@RequestParam("bookIdFromView") Long id, Model model) {}

    

  • return "updateBook.html";

  • <form action="#" th:action="@{replaceBook/{idFromView}(idFromView=${bookfromController.bookId})}" th:object="${bookfromController}" method="post">

    

• version 3.3 : update (3/3)

  • @PostMapping("/replaceBook/{idFromView}") public String replaceBook(@PathVariable("idFromView") Long id, Book book){ // Optional<Book> bookFound = bookService.findBookById(id); if (bookFound.isPresent()) { bookService.createBook(book); return "redirect:/library/books"; } else return "notfound.html";

    }

    

  • Most Thymeleaf attributes allow their values to be set as or containing expressions, which we will call Standard Expressions because of the dialects they are used in. These can be of five types:

    • ${...} : Variable expressions.

    • *{...} : Selection expressions.

    • #{...} : Message (i18n) expressions.

    • @{...} : Link (URL) expressions.

    • ~{...} : Fragment expressions.