Démarrer avec Thymeleaf cours PDF avec exemples


Télécharger Démarrer avec Thymeleaf cours PDF avec exemples

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :



 

Table des matières

À propos                                                                                                                                                           1

Chapitre 1: Démarrer avec thymeleaf                                                                                                          2

Remarques                                                                                                                                                        2

Versions                                                                                                                                                             2

Examples                                                                                                                                                           2

         Configuration                                                                                                                                                 2

         Utiliser des cases à cocher                                                                                                                             3

         Ajax avec Jquery                                                                                                                                            4

         Remplacer des fragments par ajax                                                                                                                  5

         Soumission de formulaire                                                                                                                               7

Chapitre 2: Externalisation du texte dans Thymeleaf                                                                               9

Examples                                                                                                                                                           9

         Localisation                                                                                                                                                   9

         Messages de localisation avec paramètres                                                                                                      9

Chapitre 3: Objets utilitaires d'expression                                                                                                11

Examples                                                                                                                                                         11

   

Date de format

11

Longueur de chaine

11

La chaîne contient

11

Date d'analyse

11

Format décimal

12

Chapitre 4: Spring Security et Thymeleaf

13

Examples

13

Sécurisez votre WebApp avec Login et Logout

13

Dépendances Maven

13

Créez votre WebApp

13

Sécurisez votre WebApp

14

Créer la page de connexion

14

Accéder aux propriétés de l'utilisateur

Affichage de quelque chose pour les utilisateurs authentifiés uniquement

15

16

Afficher le nom d'utilisateur

16

Afficher un contenu différent pour différents rôles

16

Chapitre 5: Utilisation des listes avec Thymeleaf

17

Examples

17

En utilisant la liste dans select

17

Tableau de forme

17

Crédits                                                                                                                                                            18


 

À propos

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: thymeleaf

It is an unofficial and free thymeleaf ebook created for educational purposes. All the content is extracted from , which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official thymeleaf.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to

 

Chapitre 1: Démarrer avec thymeleaf

Remarques

Thymeleaf est un moteur de template, une bibliothèque écrite en JAVA. Il permet à un développeur de définir un modèle de page HTML, XHTML ou HTML5 et de le remplir ultérieurement de données pour générer la page finale. Par conséquent, il réalise une partie Model-View d'un modèle Model-View-Controller .

Le principe de conception important de Thymeleaf est qu'un modèle lui-même doit être correctement écrit (X) HTML.

Versions

Version

Rendez-vous amoureux

Dernière version

Rendez-vous amoureux

3.xx

2016-05-08

3.0.6

2017-05-07

2.xx

2012-02-09

2.1.5

2016-07-11

Examples

Configuration

Pour commencer avec Thymeleaf, visitez la .

Dépendance de Maven

<dependency>

  <groupId>org.thymeleaf</groupId>

  <artifactId>thymeleaf</artifactId>

  <version>3.0.1.RELEASE</version>

</dependency>

Gradle dépendance

compile group: 'org.thymeleaf', name: 'thymeleaf', version: '3.0.1.RELEASE'

Exemple de configuration

À partir de la version 3.0, Thymeleaf ne prend en charge que la configuration Java.

public ViewResolver viewResolver() {

    ThymeleafViewResolver resolver = new ThymeleafViewResolver();     resolver.setTemplateEngine(templateEngine()); resolver.setCharacterEncoding("UTF-8"); resolver.setContentType("text/html; charset=UTF-8");     return resolver; }

Dans la méthode viewResolver() , vous pouvez configurer, par exemple, le codage et le type de contenu pour les vues. Plus d'information

public TemplateEngine templateEngine() {

    SpringTemplateEngine engine = new SpringTemplateEngine();     engine.setTemplateResolver(templateResolver()); return engine; }

Dans templateEngine() , vous pouvez ajouter des dialectes personnalisés. Par exemple, pour ajouter un dialecte de sécurité Spring, vous pouvez le faire comme ceci engine.addDialect(new

SpringSecurityDialect());

public ITemplateResolver templateResolver() {

    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver(); resolver.setApplicationContext(applicationContext); resolver.setPrefix("/views/"); resolver.setSuffix(".html"); resolver.setTemplateMode();     resolver.setCharacterEncoding("UTF-8"); return resolver; }

Regardez le setter pour le préfixe et le suffixe dans la méthode templateResolver() . Il indique à Thymeleaf que chaque fois que le contrôleur renverra la vue, Thymeleaf regardera ces noms html dans webapp/views/ directory et ajoutera le suffixe .html pour vous.

Exemple

@RequestMapping(value = "/") public String homePage() {     return "foo/my-index"; }

Thymeleaf recherchera le HTML nommé dans le webapp/views/foo/ . Selon l'exemple de configuration ci-dessus.

Utiliser des cases à cocher

Exemple de méthode dans le contrôleur

@RequestMapping(value = "/test") public String showCheckbox(Model model) {     boolean myBooleanVariable = false; model.addAttribute("myBooleanVariable", myBooleanVariable); return "sample-checkbox";

}

Voir:

<input       type="checkbox" name="myBooleanVariable"       th:checked="${myBooleanVariable}"/>

Ne pas utiliser th:name for checboxes, juste name

Ajax avec Jquery

Pour soumettre le formulaire via Ajax avec Jquery:

<div id="yourPanel" th:fragment="yourFragment">

        <form id="yourForm" method="POST" th:action="@{/actions/postForm}" th:object="${yourFormBean}">

<div class="form-group">

<label for="param1"></label>

<input class="form-component" type="text" th:field="*{param1}" />



</div>

<div class="form-group">

<label for="param2"></label>

<input class="form-component" type="text" th:field="*{param2}" />

</div>

<div class="form-group">

            <label for="param3"></label>

<input class="form-component" type="checkbox" th:field="*{param3}" />

</div>

<button type="submit" class="btn btn-success">Save</button>

<a href='#' class="btn btn-default">Cancel</a>

</form>

</div>

<script th:inline="javascript">

/*<![CDATA[*/

$(document).ready(function () {

/*[+

         var postUrl = [[@{/actions/postForm( additionalParam=${#httpServletRequest.getParameter('additionalParam')}

)}]];

+]*/

$("#yourForm").submit(function (e) {

e.preventDefault();

$.post(postUrl,

$(this).serialize(),                     function (response) {                         var isErr = 'hasError';

                        // when there are an error then show error                         if (response.indexOf(isErr) > -1) {                             $("#yourPanel").html(response);

} else {

                            var formData = $("#yourForm").serializeArray(), len = formData.length,                                     urlEnd = '';                             for (i = 0; i < len; i++) {                 urlEnd += formData[i].name + '=' +

encodeURIComponent(formData[i].value) + '&';

                            }

                            /*[+

                             var urlReplacement = [[@{/another/page(

additionalParam=${#httpServletRequest.getParameter('additionalParam')}

                             )}]] + urlEnd;

                             +]*/

window.location.replace(urlReplacement);

                        }

                    }

            );

            return false;

        });

    });

    /*]]>*/

</script>

Classe YourFormBean:

@lombok.Getter

@lombok.Setter

@lombok.NoArgsConstructor public class YourFormBean {     private String param1;     private String param2;     private boolean param3; }

Code du contrôleur:

@RequestMapping(value = "/actions/postForm", method = ) public String saveForm(Model model,

@RequestParam("additionalParam") Integer additionalParam,

@Valid @ModelAttribute("yourFormBean") YourFormBean yourFormBean,

BindingResult bindingResult,

        RedirectAttributes redirectAttributes) { if (bindingResult.hasErrors()) { model.addAttribute("hasError", true);         return "your/template :: yourFragment";

}

redirectAttributes.addAttribute("additionalParam", additionalParam);

return "redirect:/another/page";

}

Remplacer des fragments par ajax

Si vous souhaitez remplacer des parties de votre site Web, ajax est un moyen facile de le faire.

Le site où vous souhaitez remplacer le contenu en fonction de la valeur sélectionnée:

<!DOCTYPE html>

<html xmlns=";

xmlns:th="">

<head>

<title>Index</title>

</head>

<body>

<select id="selection">

<option>Content 1</option>

<option>Content 2</option>

        </select>

<div id="replace_div">

Content goes here

</div>

<!-- JQury from Google CDN -->

<script

src=""></script>

<script>

$(document).ready(function () {

                //call function when page is loaded                 getContent();

//set on change listener

$('#selection').change(getContent);

function getContent() {

                    //create url to request fragment                     var url = /content/;                     if ($('#selection').val() === "Content 1") { url = url + "content1";

} else {

url = url + "content2";

}

//load fragment and replace content

$('#replace_div').load(url);

}

})

</script>

</body>

</html>

Et le avec les fragments que vous voulez inclure en fonction de la valeur sélectionnée:

<!DOCTYPE html>

<html xmlns="; xmlns:th="">

    <head>

    </head>

    <body>

        <div th:fragment="content1">

            This is Content 1

        </div>

        <div th:fragment="content2">

            This is Content 2

         </div>

    </body>

</html>

Last but not least le Spring MVC :

@Controller

@RequestMapping("content") public class ContentController {

    @RequestMapping("")     public String loadContent() {         return "website";

}

    @RequestMapping("content1")     public String getContent1() {         return "content :: content1";

}

    @RequestMapping("content2")     public String getContent2() {         return "content :: content2";

}

}

Soumission de formulaire

Objet de formulaire

package formSubmission;

public class Person {

    private String name;     private int age;

    public String getName() {         return name;

}

    public void setName(String name) { = name;

}

    public int getAge() {         return age;

}

    public void setAge(int age) {         = age;

}

}

Manette

package formSubmission;

import org.springframework.stereotype.Controller; import .Model; import .annotation.GetMapping; import .annotation.ModelAttribute; import .annotation.PostMapping;

@Controller

public class FriendsController {

@GetMapping("/friends")

    public String friendForm(Model model) { model.addAttribute("personForm", new Person());         return "friendsForm";

}

@PostMapping("/friends")

    public String submissionResult(@ModelAttribute("personForm") Person person) {     return "result";

}

}

<!DOCTYPE HTML>

<html xmlns:th="">

<head>

    <title>Friend form</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

    <h1>Friend Form</h1>

    <form th:action="@{/friends}" th:object="${personForm}" method="post">

        <p>Name: <input type="text" th:field="*{name}"/></p>

        <p>Age: <input type="number" th:field="*{age}"/></p>

        <p><input type="submit" value="Submit"/></p>

    </form>

</body>

</html>

<!DOCTYPE HTML>

<html xmlns:th="">

<head>

    <title>Submission result</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

    <h1>th:text="'My friend ' + ${} + ' is ' + ${} + ' years old'"</h1>

</body>

</html>

Lire Démarrer avec thymeleaf en ligne:


Chapitre 2: Externalisation du texte dans Thymeleaf

Examples

Localisation

1.  Créer des fichiers pour vos messages

 messages.properties  messages_en.properties messages_fr.properties 

2.  Ecrire des messages dans ces fichiers comme ceci header.label.title=Title

3.  Configurez le chemin d'accès à ces fichiers (dans ce cas, dans le dossier D: / project / messages) dans des propriétés d'application telles que:

=D:/project/messages/messages

4.  Configurer MessageSource

@Value("${}") private String messagesBasename;

@Bean

public MessageSource messageSource() {

ReloadableResourceBundleMessageSource messageSource = new

ReloadableResourceBundleMessageSource();

messageSource.setFallbackToSystemLocale(false); messageSource.setBasenames("file:" + messagesBasename); return messageSource;

   }

5.  Utiliser les messages sur les pages

<p th:text="#{header.label.title}">Title</p>

Messages de localisation avec paramètres

Ecrire un message dans messages.properties

welcome.message=Hello, {0}!

Remplacez {0} par le nom d'utilisateur dans la balise thymeleaf

<h3 th:text="#{welcome.message(${some.variable})}">Hello, Placeholder</h3>

Lire Externalisation du texte dans Thymeleaf en ligne:


Chapitre 3: Objets utilitaires d'expression

Examples

Date de format

<p>

  Today: <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">30 May 2017</span>

</p>

Longueur de chaine

<div th:if="*{userMessage!=null and #strings.length(userMessage)>0}">

     <label th:text = "*{userMessage}"/>

</div>

La chaîne contient

<div th:if="${#strings.contains(#httpServletRequest.requestURI, 'email')}">

    <div th:replace="fragments/email::welcome">

</div>

Date d'analyse

Obtenez l'année à partir de la date

<p>

  Year: <span th:text="${(today)}">2017</span>

</p>

Obtenez le mois

<p>

  Month number: <span th:text="${#dates.month(today)}">8</span>

  Month: <span th:text="${#dates.monthName(today)}">August</span>

  Month short name: <span th:text="${#dates.monthNameShort(today)}">Aug</span>

</p>

Obtenez le jour

<p>

  Day: <span th:text="${(today)}">26</span>

</p>

Obtenez le jour de la semaine

<p>

    Day: <span th:text="${#dates.dayOfWeek(today)}">1</span>

    Day: <span th:text="${#dates.dayOfWeekName(today)}">Monday</span> Day: <span th:text="${#dates.dayOfWeekNameShort(today)}">Mo</span>

</p>

Obtenir du temps

<p>

    Hour: <span th:text="${(today)}">10</span>

    Minute: <span th:text="${#dates.minute(today)}">50</span>



    Second: <span th:text="${#dates.second(today)}">48</span>

    Millisecond: <span th:text="${#dates.millisecond(today)}">48</span>

<p>

Format décimal

<p>

    Order sum: <span th:text="${#numbers.formatDecimal(orderSum, 0, 'COMMA', 2,

'POINT')}">1,145,000.52</span>

</p>

Lire Objets utilitaires d'expression en ligne:

Chapitre 4: Spring Security et Thymeleaf

Examples

Sécurisez votre WebApp avec Login et Logout

Cet exemple est une application Spring Boot très simple.

 

Dépendances Maven

Ajoutez d'abord les dépendances suivantes à votre projet. est recommandé lorsque vous créez un nouveau projet.

<parent>

<groupId></groupId>

<artifactId>spring-boot-starter-parent</artifactId>

    <version>1.5.1.RELEASE</version>

    <relativePath/>

</parent>

<dependencies>

    <dependency>

<groupId></groupId>

<artifactId>spring-boot-starter-web</artifactId>

    </dependency>

    <dependency>

<groupId></groupId>

        <artifactId>spring-boot-starter-security</artifactId>

    </dependency>

    <dependency>

<groupId></groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

    </dependency>

    <dependency>

        <groupId>org.thymeleaf.extras</groupId>

<artifactId>thymeleaf-extras-springsecurity4</artifactId>

    </dependency>

</dependencies>

 

Créez votre WebApp

Créez une application Web avec des sites Web et un contrôleur. Par exemple, cette très petite application Web avec une seule page () et une entrée pour la page de connexion.

@Configuration

public class MvcConfig extends WebMvcConfigurerAdapter{

    @Override

    public void addViewControllers(ViewControllerRegistry registry) { registry.addRedirectViewController("/", "index"); registry.addViewController("/index").setViewName("index"); registry.addViewController("/login").setViewName("login");

    }

}

 

Sécurisez votre WebApp

Configurez Spring Security pour sécuriser votre application Web. Par exemple. autoriser toute demande par les utilisateurs authentifiés uniquement. Autorise les ressources statiques comme js et css, sinon elles ne seront pas chargées pour les utilisateurs non authentifiés. Exclure la page de connexion et de déconnexion de cette règle et créer un utilisateur de test:

@Configuration

@EnableWebSecurity

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override

    protected void configure(HttpSecurity http) throws Exception {         http.authorizeRequests()

                .antMatchers("/css/*.css", "/js/*.js").permitAll()

                .anyRequest().authenticated()

                .and()

                .formLogin()

                .loginPage("/login")

                .permitAll()

                .and()

                .logout()

                .permitAll();

    }

    @Autowired

    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { auth.inMemoryAuthentication()

.withUser("user").password("password").roles("USER");

    }

}

 

Créer la page de connexion

La page de connexion doit avoir un formulaire qui envoie une demande de publication à "/ login":

<!DOCTYPE html>

<html xmlns="; xmlns:th="">

<head>

<title>Login</title>

<link th:href="@{}" rel="stylesheet" type="text/css"/>

<script type="text/javascript" th:src="@{}"></script>

</head>

<body>

        <!-- show notification on error -->


        <div th:if="${param.error}">             Invalid username or password.

</div>

<!-- show notification of logout -->

        <div th:if="${param.logout}">             You have been logged out.

</div>

<!-- login form -->

<div>

<form th:action="@{/login}" method="post">

 <h2 >Please sign in</h2>

<label >User Name</label>

                <input type="text" name="username" th:required="required" th:autofocus="autofocus"/>

<br/>

<label>Password</label>

<input type="password" name="password" th:required="required" />

<br/>

<input type="submit" value="Sign In"/>

</form>

</div>

</body>

</html>

Lorsque l'utilisateur entre le mauvais nom d'utilisateur / mot de passe, le paramètre d'erreur est défini. Lorsque l'utilisateur se déconnecte, le paramètre de déconnexion est défini. Ceci est utilisé pour afficher les messages correspondants.

 

Accéder aux propriétés de l'utilisateur

Après une connexion réussie, l'utilisateur est dirigé vers le fichier . Le Spring Security Dialect nous permet d'accéder aux propriétés de l'utilisateur comme son nom d'utilisateur:

<!DOCTYPE html>

<html xmlns="; xmlns:th="">

    <head>

        <title>Index</title>

    </head>

    <body>

        <div>

            <h3>Welcome <span th:text="${}"/></h3>

            <form th:action="@{/logout}" method="post">

                <input type="submit" value="Logout"/>

            </form>

        </div>

    </body>

</html>

Une déconnexion est réalisée via post request to "/ logout"

Affichage de quelque chose pour les utilisateurs authentifiés uniquement

<div sec:authorize="isAuthenticated()">     This text is displayed for authenticated users.

</div>

Afficher le nom d'utilisateur

Vous pouvez afficher le nom d'utilisateur pour les utilisateurs authentifiés

<div sec:authorize="isAuthenticated()">

    Welcome, <span sec:authentication="name">Username</span>

</div>

Afficher un contenu différent pour différents rôles

L'attribut sec: authorize affiche son contenu lorsque l'expression d'attribut est évaluée à true

<div sec:authorize="hasRole('ROLE_ADMIN')">

    Content for administrators

</div>

<div sec:authorize="hasRole('ROLE_USER')">

    Content for users

</div>

L'attribut sec: authentication est utilisé pour imprimer les rôles d'utilisateur journalisés:

Roles: <span sec:authentication="principal.authorities">ROLE_USER, ROLE_ADMIN</span>

Lire Spring Security et Thymeleaf en ligne:

Chapitre 5: Utilisation des listes avec Thymeleaf

Examples

En utilisant la liste dans select

Vous pouvez utiliser la variable de liste pour former des éléments <select>

 <select th:field="*{countries}">

     <option th:each="country: ${countries}"              th:value="${}" th:text="#{${'selected.label.' + }}"/> </select>

Tableau de forme

<table id="countryList">

    <thead>

        <tr>

            <th th:text="#{}"> Country </th>

            <th th:text="#{country.label.capital}"> Capital </th>

            <th th:text="#{country.label.square}"> Square </th>

        </tr>

    </thead>

    <tbody>

        <tr th:each="country : ${countryList}">

            <td th:text="${}"></td>

            <td th:text="${country.capital}"></td>

            <td th:text="${country.square}"></td>

        </tr>

    </tbody>

</table>

Lire Utilisation des listes avec Thymeleaf en ligne:

Crédits

S.

No

Chapitres

Contributeurs

1

Démarrer avec thymeleaf

Aboodz, Alexander, Community, guille11, Jakub Pomyka?a,

Maciek ?ozi?ski, ppeterka, Prabhat, Rob Streeter, sanluck

2

Externalisation du texte dans Thymeleaf

Elizabeth

3

Objets utilitaires d'expression

Elizabeth

4

Spring Security et

Thymeleaf

Alexander, Elizabeth, Sébastien Temprado

5

Utilisation des listes avec Thymeleaf

Elizabeth

 



7