Libellés

Exemple Java Spring avec template Thymeleaf et Bootstrap

POJO

package fr.ronanlefichant.mywebapp;

public class Contact {

  private String avatar;
  private String firstName;
  private String lastName;
  private String email;
  private String phone;

  public Contact(String avatar, String firstName, String lastName, String email, String phone) {
    this.avatar = avatar;
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
    this.phone = phone;
  }

  public String getAvatar() {
    return avatar;
  }

  public String getFirstName() {
    return firstName;
  }

  public String getLastName() {
    return lastName;
  }

  public String getEmail() {
    return email;
  }

  public String getPhone() {
    return phone;
  }

}

Controller Spring

package fr.ronanlefichant.thymeleafexample;

import java.util.Arrays;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ContactsController {

  @GetMapping("/contacts")
  public String contactsList(String name, Model model) {

    /* Création de la liste */
    List < Contact > contacts = Arrays.asList(
      new Contact("avatars/avatar1.png", "Jane", "Doe", "jane.doe@email.com", "0600000000"),
      new Contact(null, "John", "Doe", "john.doe@email.com", "0600000001"),
      new Contact("avatars/avatar2.png", "Sherlock", "Holmes", "sherlock.holmes@email.com", "0600000002"),
      new Contact("avatars/avatar3.png", "Betty", "Wayne", "betty.wayne@email.com", "0600000003"),
      new Contact("avatars/avatar4.png", "Mary", "Smith", "mary.smith@email.com", "0600000004"));

    /*
     * Ajoute un attribut contacts pour récupérer la liste des contacts avec
     * Thymeleaf
     */
    model.addAttribute("contacts", contacts);

    /* Retourne le nom du template (sans le .html)*/
    return "contacts";
  }
}

Template Thymeleaf

<!DOCTYPE html>
<html>
<head>
    <title>Mes contacts</title>
    <!-- CDN Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <!-- fichier style.css -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Mes contacts</h1>
      <div class="row">

        <!-- Pour chaque personne -->
        <th:block th:each="contact : ${contacts}">
          <div class="col-lg-4 col-md-6">
            <div class="card contact-card">
                <!-- Si avatar existe -->
                  <!-- On affiche l'avatar -->
                  <img th:if="${contact.getAvatar()} != null" class="card-img-top rounded-circle avatar" th:src="${ contact.getAvatar() }" alt="Avatar" />
                  <!-- Sinon on affiche l'avatar par défaut -->
                  <img th:if="${contact.getAvatar()} == null" class="card-img-top rounded-circle avatar" src="icons/default-avatar.png" alt="Default Avatar" />
              <div class="card-body">
              <!-- On affiche le prénom et le nom avec un espace -->
                <h5 class="card-title" th:text="${contact.getFirstName()} + ' ' + ${contact.getLastName()}"></h5>
                <!-- On affiche l'email -->
                <p class="card-text" th:text="${ contact.getEmail() }"></p>
                <!-- On affiche le téléphone -->
                <p class="card-text" th:text="${ contact.getPhone() }"></p>
              </div>
            </div>
          </div>
        </th:block>
        
      </div>
    </div>
  </body>
</html>
.contact-card {
    width: 18rem;
    margin-top: 50px;
    margin: 50px auto auto auto;
}

.avatar {
    width: 100px;
    margin: 0 auto;
}

RĂ©sultat

Arborescence des ressources du projet :

Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire