Introduzione all'uso della foglia di timone in primavera

1. Introduzione

Thymeleaf è un motore di modelli Java per l'elaborazione e la creazione di HTML, XML, JavaScript, CSS e testo.

In questo articolo, discuteremo come usare Thymeleaf con Spring insieme ad alcuni casi d'uso di base nel livello di visualizzazione di un'applicazione Spring MVC.

La libreria è estremamente estensibile e la sua naturale capacità di creazione di modelli garantisce che i modelli possano essere prototipati senza back-end, il che rende lo sviluppo molto veloce rispetto ad altri popolari motori di modelli come JSP.

2. Integrare Thymeleaf con la primavera

Innanzitutto vediamo le configurazioni richieste per l'integrazione con Spring. La libreria timeleaf-primavera è richiesta per l'integrazione.

Aggiungi le seguenti dipendenze al tuo file POM Maven:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Nota che, per un progetto Spring 4, la libreria thymeleaf-spring4 deve essere utilizzata al posto di thymeleaf-spring5 .

La classe SpringTemplateEngine esegue tutti i passaggi di configurazione. È possibile configurare questa classe come un bean nel file di configurazione Java:

@Bean @Description("Thymeleaf Template Resolver") public ServletContextTemplateResolver templateResolver() { ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(); templateResolver.setPrefix("/WEB-INF/views/"); templateResolver.setSuffix(".html"); templateResolver.setTemplateMode("HTML5"); return templateResolver; } @Bean @Description("Thymeleaf Template Engine") public SpringTemplateEngine templateEngine() { SpringTemplateEngine templateEngine = new SpringTemplateEngine(); templateEngine.setTemplateResolver(templateResolver()); templateEngine.setTemplateEngineMessageSource(messageSource()); return templateEngine; }

Il prefisso e il suffisso delle proprietà del bean templateResolver indicano rispettivamente l'ubicazione delle pagine di visualizzazione all'interno della directory webapp e l'estensione del nome file.

L' interfaccia ViewResolver in Spring MVC mappa i nomi delle viste restituiti da un controller agli oggetti di visualizzazione effettivi. ThymeleafViewResolver implementa l' interfaccia ViewResolver e viene utilizzato per determinare quali visualizzazioni Thymeleaf eseguire il rendering, dato un nome di visualizzazione.

Il passaggio finale dell'integrazione consiste nell'aggiungere ThymeleafViewResolver come bean:

@Bean @Description("Thymeleaf View Resolver") public ThymeleafViewResolver viewResolver() { ThymeleafViewResolver viewResolver = new ThymeleafViewResolver(); viewResolver.setTemplateEngine(templateEngine()); viewResolver.setOrder(1); return viewResolver; }

3. Foglia di timone in Spring Boot

Spring Boot fornisce la configurazione automatica per Thymeleaf aggiungendo la dipendenza spring-boot-starter-thymeleaf :

 org.springframework.boot spring-boot-starter-thymeleaf 2.3.3.RELEASE  

Non è necessaria alcuna configurazione esplicita. Per impostazione predefinita, i file HTML devono essere inseriti nella posizione delle risorse / modelli .

4. Visualizzazione dei valori dall'origine del messaggio (file delle proprietà)

L' attributo tag th: text = "# {key}" può essere utilizzato per visualizzare i valori dai file delle proprietà. Perché funzioni, il file delle proprietà deve essere configurato come messageSource bean:

@Bean @Description("Spring Message Resolver") public ResourceBundleMessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasename("messages"); return messageSource; }

Ecco il codice HTML Thymeleaf per visualizzare il valore associato alla chiave welcome.message :

5. Visualizzazione degli attributi del modello

5.1. Attributi semplici

L' attributo tag th: text = "$ {attributename}" può essere utilizzato per visualizzare il valore degli attributi del modello. Aggiungiamo un attributo del modello con il nome serverTime nella classe controller:

model.addAttribute("serverTime", dateFormat.format(new Date()));

Il codice HTML per visualizzare il valore dell'attributo serverTime :

Current time is 

5.2. Attributi della raccolta

Se l'attributo del modello è una raccolta di oggetti, l' attributo th: each tag può essere utilizzato per iterare su di esso. Definiamo una classe modello Student con due campi, id e nome :

public class Student implements Serializable { private Integer id; private String name; // standard getters and setters }

Ora aggiungeremo un elenco di studenti come attributo modello nella classe controller:

List students = new ArrayList(); // logic to build student data model.addAttribute("students", students);

Infine, possiamo utilizzare il codice del modello Thymeleaf per scorrere l'elenco degli studenti e visualizzare tutti i valori dei campi:

6. Valutazione condizionale

6.1. se ea meno che

L' attributo th: if = "$ {condition}" viene utilizzato per visualizzare una sezione della vista se la condizione è soddisfatta. L' attributo th: less = "$ {condition}" viene utilizzato per visualizzare una sezione della vista se la condizione non è soddisfatta.

Add a gender field to the Student model:

public class Student implements Serializable { private Integer id; private String name; private Character gender; // standard getters and setters }

Suppose this field has two possible values (M or F) to indicate the student's gender. If we wish to display the words “Male” or “Female” instead of the single character, we could accomplish this by using the following Thymeleaf code:

6.2. switch and case

The th:switch and th:case attributes are used to display content conditionally using the switch statement structure.

The previous code could be rewritten using the th:switch and th:case attributes:

7. Handling User Input

Form input can be handled using the th:action=”@{url}” and th:object=”${object}” attributes. The th:action is used to provide the form action URL and th:object is used to specify an object to which the submitted form data will be bound. Individual fields are mapped using the th:field=”*{name}” attribute, where the name is the matching property of the object.

For the Student class, we can create an input form:


    

In the above code, /saveStudent is the form action URL and a student is the object that holds the form data submitted.

The StudentController class handles the form submission:

@Controller public class StudentController { @RequestMapping(value = "/saveStudent", method = RequestMethod.POST) public String saveStudent(@ModelAttribute Student student, BindingResult errors, Model model) { // logic to process input data } }

In the code above, the @RequestMapping annotation maps the controller method with URL provided in the form. The annotated method saveStudent() performs the required processing for the submitted form. The @ModelAttribute annotation binds the form fields to the student object.

8. Displaying Validation Errors

The #fields.hasErrors() function can be used to check if a field has any validation errors. The #fields.errors() function can be used to display errors for a particular field. The field name is the input parameter for both these functions.

HTML code to iterate and display the errors for each of the fields in the form:


    

Instead of field name the above functions accept the wild card character * or the constant all to indicate all fields. The th:each attribute is used to iterate the multiple errors that may be present for each of the fields.

The previous HTML code re-written using the wildcard *:


    

or using the constant all:


    

Similarly, global errors in Spring can be displayed using the global constant.

The HTML code to display global errors:


    

The th:errors attribute can also be used to display error messages. The previous code to display errors in the form can be re-written using th:errors attribute:


    

9. Using Conversions

The double bracket syntax {{}} is used to format data for display. This makes use of the formatters configured for that type of field in the conversionService bean of the context file.

The name field in the Student class is formatted:

The above code uses the NameFormatter class, configured by overriding the addFormatters() method from the WebMvcConfigurer interface. For this purpose, our @Configuration class overrides the WebMvcConfigurerAdapter class:

@Configuration public class WebMVCConfig extends WebMvcConfigurerAdapter { // ... @Override @Description("Custom Conversion Service") public void addFormatters(FormatterRegistry registry) { registry.addFormatter(new NameFormatter()); } }

The NameFormatter class implements the Spring Formatter interface.

L' utilità #conversions può essere utilizzata anche per convertire gli oggetti per la visualizzazione. La sintassi per la funzione di utilità è # conversions.convert (Object, Class) dove Object viene convertito in tipo Class .

Per visualizzare il campo della percentuale dell'oggetto studente con la parte frazionaria rimossa:

10. Conclusione

In questo tutorial, abbiamo visto come integrare e utilizzare Thymeleaf in un'applicazione Spring MVC.

Abbiamo anche visto esempi di come visualizzare i campi, accettare input, visualizzare errori di convalida e convertire i dati per la visualizzazione. Una versione funzionante del codice mostrato in questo articolo è disponibile in un repository GitHub.