Débuter rapidement avec Thymeleaf

Débuter rapidement avec Thymeleaf

Thymeleaf est un moteur de template côté serveur. Tel que JSP, JSF, les pages sont généré sur le serveur. Ce moteur est entièrement supporté par Spring Boot.

 Il est majoritairement utilisé dans des applications, mais il peut être utilisé dans la construction de page pdf ou bien de courriel.

Thymeleaf utilise des pages html auquel des marqueurs (commande) sont ajouté pour aider le moteur à faire certain traitement.

Les exemples utilisés sont basé sur un projet en spring boot 2.2

public class User {

 private String firstname;

 public User(){
   
  public String getFirstname() {

        return firstname;

    }

    public void setFirstname(String firstname) {

        this.firstname = firstname;

    }

}

@Controller
public class UserController {

    private final UserService userService;
   
    public UserController(final UserService userService){
        this.userService=userService;
    }
   

    @GetMapping(value="/userlist")
    public String userList(Model model) {

        List<User> usersList = userService.findAll();

        model.addAttribute("users", usersList);

        return "userList";
    }
}

Le fichier html

<!DOCTYPE html>
<html>
    <head>
        <title>User list</title>
    </head>
    <body>
        <table>
            <tr th:each="user : ${users}">
                <td th:text="#{firstname}"></td>
                <td th:text="${user.firstname}"></td>
            </tr>
        </table>
    </body>
</html>


th:each  et th:text sont des marqueurs. Le premier permet de boucler sur la listes de users alors que le second permet d'afficher.

Au niveau du contrôleur, la variable usersList est mise dans le modèle avec le nom users.
Dans le fichier html, on y accède en bouclant sur la même variable avec la syntaxe ${nom de ma variable}.

L'usage #{...} permet d'avoir accès au fichier d'internalisation.

Dans le répertoire resources les fichiers

• messages.properties
• messages_en.properties

permettent de passer d'une langue à une autre.

Dans le fichier messages.properties

firstname=Prénom

et dans le fichier messages_en.properties

firstname=Firstname.

Condition

L'opérateur Elvis est disponible avec la même notation.

Condition ? true : false

Si la valeur du firstname est Paul alors son fond de couleur sera blanc.

Afin que ça puisse fonctionner, il faut utiliser le marqueur th:style.

<!DOCTYPE html>
<html>
    <head>
        <title>User list</title>
    </head>
    <body>
        <table>
            <tr th:each="user : ${users}">
                <td th:text="#{firstname}"></td>
                <td th:text="${user.firstname}" th:style="${user.firstname=='Paul'} ? 'background: #ffffff' : ''"></td>
            </tr>
        </table>
    </body>
</html>

Un projet basique est disponible.