Thymeleaf

https://www.thymeleaf.org/doc/tutorials/3.1/
Admin
Thymeleaf is a modern server-side Java template engine that seamlessly integrates with Spring...
Tokens:13,539
Snippets:142
Trust Score:9.5
Update:3 months ago
Show doc for...
Tokens:
Raw
### HTML Fragment with th:fragment Attribute

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

An example of an HTML structure where a specific div is marked with `th:fragment="content"`. This fragment will be rendered when selected.

```html
<!DOCTYPE html>
<html>
  ...
  <body>
    ...
    <div th:fragment="content">
      Only this div will be rendered!
    </div>
    ...
  </body>
</html>
```

--------------------------------

### HTML Fragment with ID Attribute

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

An example of an HTML structure where a specific div has an `id="content"`. This element can be selected as a fragment using its ID.

```html
<!DOCTYPE html>
<html>
  ...
  <body>
    ...
    <div id="content">
      Only this div will be rendered!
    </div>
    ...
  </body>
</html>
```

--------------------------------

### Apply Conversion Service with Double-Brace Syntax

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use `${{...}}` for variable expressions and `*{{...}}` for selection expressions to apply the Conversion Service for object-to-string conversion.

```html
<p th:text="${val}">...</p>
<p th:text="${{val}}">...</p>
```

--------------------------------

### Manual Conversion with #conversions Utility Object

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Manually execute the Conversion Service using the `#conversions.convert()` method. The target class can be specified as a `Class` object or a String.

```html
<p th:text="${'Val: ' + #conversions.convert(val,'String')}">...</p>
```

--------------------------------

### Configure Conversion Service with Formatters

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Implement WebMvcConfigurer to add custom formatters for Date and Variety objects to the Spring ConversionService.

```java
@Override
public void addFormatters(final FormatterRegistry registry) {
    super.addFormatters(registry);
    registry.addFormatter(varietyFormatter());
    registry.addFormatter(dateFormatter());
}

@Bean
public VarietyFormatter varietyFormatter() {
    return new VarietyFormatter();
}

@Bean
public DateFormatter dateFormatter() {
    return new DateFormatter();
}
```

--------------------------------

### SeedStarterService for STSM

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Provides business methods for managing SeedStarter entities. It uses SeedStarterRepository for data access.

```java
@Service
public class SeedStarterService {

    @Autowired
    private SeedStarterRepository seedstarterRepository; 

    public List<SeedStarter> findAll() {
        return this.seedstarterRepository.findAll();
    }

    public void add(final SeedStarter seedStarter) {
        this.seedstarterRepository.add(seedStarter);
    }

}
```

--------------------------------

### Displaying Seed Starter List with Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Renders a table of seed starters, conditionally displayed if the list is not empty. It uses internationalized messages for headers and data.

```html
<div class="seedstarterlist" th:unless="${#lists.isEmpty(allSeedStarters)}">
    
  <h2 th:text="#{title.list}">List of Seed Starters</h2>
  
  <table>
    <thead>
      <tr>
        <th th:text="#{seedstarter.datePlanted}">Date Planted</th>
        <th th:text="#{seedstarter.covered}">Covered</th>
        <th th:text="#{seedstarter.type}">Type</th>
        <th th:text="#{seedstarter.features}">Features</th>
        <th th:text="#{seedstarter.rows}">Rows</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="sb : ${allSeedStarters}">
        <td th:text="${{sb.datePlanted}}">13/01/2011</td>
        <td th:text="#{|bool.${sb.covered}|}">yes</td>
        <td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td>
        <td th:text="${#strings.arrayJoin(
                           #messages.arrayMsg(
                               #strings.arrayPrepend(sb.features,'seedstarter.feature.')),
                           ', ')}">Electric Heating, Turf</td>
        <td>
          <table>
            <tbody>
              <tr th:each="row,rowStat : ${sb.rows}">
                <td th:text="${rowStat.count}">1</td>
                <td th:text="${row.variety.name}">Thymus Thymi</td>
                <td th:text="${row.seedsPerCell}">12</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>
```

--------------------------------

### Display All Form Errors with Convenience Methods

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Uses the convenience methods `#fields.hasAnyErrors()` and `#fields.allErrors()` for checking and iterating over all form errors. This provides an alternative syntax to `*`.

```html
<div th:if="${#fields.hasAnyErrors()}">
  <p th:each="err : ${#fields.allErrors()}" th:text="${err}">...</p>
</div>
```

--------------------------------

### VarietyService for STSM

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Provides business methods for managing Variety entities. It uses VarietyRepository for data access.

```java
@Service
public class VarietyService {

    @Autowired
    private VarietyRepository varietyRepository; 

    public List<Variety> findAll() {
        return this.varietyRepository.findAll();
    }

    public Variety findById(final Integer id) {
        return this.varietyRepository.findById(id);
    }

}
```

--------------------------------

### Display Global Errors with Convenience Methods

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Employs the convenience methods `#fields.hasGlobalErrors()` and `#fields.globalErrors()` to check for and display global errors. This offers a more readable alternative.

```html
<div th:if="${#fields.hasGlobalErrors()}">
  <p th:each="err : ${#fields.globalErrors()}" th:text="${err}">...</p>
</div>
```

--------------------------------

### Spring Controller Mapped Methods

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Implements mapped methods for handling HTTP requests. Includes a method to display the form page and another to save new SeedStarter objects.

```java
@RequestMapping({"/","/seedstartermng"})
public String showSeedstarters(final SeedStarter seedStarter) {
    seedStarter.setDatePlanted(Calendar.getInstance().getTime());
    return "seedstartermng";
}

@RequestMapping(value="/seedstartermng", params={"save"})
public String saveSeedstarter(
        final SeedStarter seedStarter, final BindingResult bindingResult, final ModelMap model) {
    if (bindingResult.hasErrors()) {
        return "seedstartermng";
    }
    this.seedStarterService.add(seedStarter);
    model.clear();
    return "redirect:/seedstartermng";
}
```

--------------------------------

### Build URI to Controller Method

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use the #mvc.url expression to build URIs to controller methods by specifying the controller class initial and method name. This is useful for creating links from views without hardcoding URIs.

```html
<a th:href="${(#mvc.url('EC#getData')).build()}">Get Data Param</a>
```

```html
<a th:href="${(#mvc.url('EC#getDataParam').arg(0,'internal')).build()}">Get Data Param</a>
```

--------------------------------

### XML Configuration for Template Engine

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures SpringTemplateEngine using XML, applying SpringStandardDialect and enabling Spring's message resolution. It sets the template resolver and optionally enables the SpringEL compiler.

```xml
<!-- SpringTemplateEngine automatically applies SpringStandardDialect and      -->
<!-- enables Spring's own MessageSource message resolution mechanisms.         -->
<bean id="templateEngine"
      class="org.thymeleaf.spring6.SpringTemplateEngine">
  <property name="templateResolver" ref="templateResolver" />
  <!-- Enabling the SpringEL compiler can speed up execution in most           -->
  <!-- scenarios, but might be incompatible with specific cases when           -->
  <!-- expressions in one template are reused across different data types, so  -->
  <!-- this flag is "false" by default for safer backwards compatibility.      -->
  <property name="enableSpringELCompiler" value="true" />
</bean>
```

--------------------------------

### Basic Spring Controller Structure

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Defines a Spring MVC controller class with autowired services. This is the foundational structure for handling server interactions.

```java
@Controller
public class SeedStarterMngController {

    @Autowired
    private VarietyService varietyService;
    
    @Autowired
    private SeedStarterService seedStarterService;

    ...

}
```

--------------------------------

### Controller Methods for Dynamic Rows

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

These methods handle adding a new row object to the SeedStarter bean and removing an existing row based on request parameters.

```java
@RequestMapping(value="/seedstartermng", params={"addRow"})
public String addRow(final SeedStarter seedStarter, final BindingResult bindingResult) {
    seedStarter.getRows().add(new Row());
    return "seedstartermng";
}

@RequestMapping(value="/seedstartermng", params={"removeRow"})
public String removeRow(
        final SeedStarter seedStarter, final BindingResult bindingResult, 
        final HttpServletRequest req) {
    final Integer rowId = Integer.valueOf(req.getParameter("removeRow"));
    seedStarter.getRows().remove(rowId.intValue());
    return "seedstartermng";
}
```

--------------------------------

### Controller Returning Fragment with Parameterized Selector

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

A controller method returning a fragment expression that includes a parameter for the DOM selector. This allows dynamic selection of fragments based on input.

```java
@RequestMapping("/showContentPart")
public String showContentPart() {
    ...
    return "index :: #content ('myvalue')";
}
```

--------------------------------

### VarietyFormatter Implementation

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Custom Formatter for Variety objects that converts between Variety entities and their ID values for form usage.

```java
public class VarietyFormatter implements Formatter<Variety> {

    @Autowired
    private VarietyService varietyService;


    public VarietyFormatter() {
        super();
    }

    public Variety parse(final String text, final Locale locale) throws ParseException {
        final Integer varietyId = Integer.valueOf(text);
        return this.varietyService.findById(varietyId);
    }


    public String print(final Variety object, final Locale locale) {
        return (object != null ? object.getId().toString() : "");
    }

}
```

--------------------------------

### Display All Form Errors in a Simple List

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

A more concise way to display all form errors using `#fields.errors('*')` within a `li` tag.

```html
<ul>
  <li th:each="err : ${#fields.errors('*')}" th:text="${err}" />
</ul>
```

--------------------------------

### Generated HTML for Multi-valued Checkboxes

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

This shows the resulting HTML for multi-valued checkboxes, illustrating sequential ID suffixes and the presence of hidden inputs for submission.

```html
<ul>
  <li>
    <input id="features1" name="features" type="checkbox" value="SEEDSTARTER_SPECIFIC_SUBSTRATE" />
    <input name="_features" type="hidden" value="on" />
    <label for="features1">Seed starter-specific substrate</label>
  </li>
  <li>
    <input id="features2" name="features" type="checkbox" value="FERTILIZER" />
    <input name="_features" type="hidden" value="on" />
    <label for="features2">Fertilizer used</label>
  </li>
  <li>
    <input id="features3" name="features" type="checkbox" value="PH_CORRECTOR" />
    <input name="_features" type="hidden" value="on" />
    <label for="features3">PH Corrector used</label>
  </li>
</ul>
```

--------------------------------

### XML Configuration for Template Resolver

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures SpringResourceTemplateResolver using XML, integrating with Spring's resource resolution. It defines the prefix, suffix, template mode, and cacheability.

```xml
<!-- SpringResourceTemplateResolver automatically integrates with Spring's own -->
<!-- resource resolution infrastructure, which is highly recommended.          -->
<bean id="templateResolver"
       class="org.thymeleaf.spring6.templateresolver.SpringResourceTemplateResolver">
  <property name="prefix" value="/WEB-INF/templates/" />
  <property name="suffix" value=".html" />
  <!-- HTML is the default value, added here for the sake of clarity.          -->
  <property name="templateMode" value="HTML" />
  <!-- Template cache is true by default. Set to false if you want             -->
  <!-- templates to be automatically updated when modified.                    -->
  <property name="cacheable" value="true" />
</bean>
```

--------------------------------

### Spring MVC and Thymeleaf Configuration

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

This class configures Spring MVC and integrates Thymeleaf as the view technology. It sets up resource handlers, message sources, formatters, and defines beans for TemplateResolver, TemplateEngine, and ThymeleafViewResolver.

```java
import org.springframework.beans.BeansException;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.context.MessageSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ResourceBundleMessageSource;
import org.springframework.format.FormatterRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.thymeleaf.TemplateMode;
import org.thymeleaf.spring6.SpringTemplateEngine;
import org.thymeleaf.spring6.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring6.view.ThymeleafViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan
public class SpringWebConfig
        implements WebMvcConfigurer, ApplicationContextAware {

    private ApplicationContext applicationContext;


    public SpringWebConfig() {
        super();
    }


    public void setApplicationContext(final ApplicationContext applicationContext)
            throws BeansException {
        this.applicationContext = applicationContext;
    }



    /* ******************************************************************* */
    /*  GENERAL CONFIGURATION ARTIFACTS                                    */
    /*  Static Resources, i18n Messages, Formatters (Conversion Service)   */
    /* ******************************************************************* */

    @Override
    public void addResourceHandlers(final ResourceHandlerRegistry registry) {
        super.addResourceHandlers(registry);
        registry.addResourceHandler("/images/**").addResourceLocations("/images/");
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
    }

    @Bean
    public MessageSource messageSource() {
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        messageSource.setBasename("Messages");
        return messageSource;
    }

    @Override
    public void addFormatters(final FormatterRegistry registry) {
        super.addFormatters(registry);
        registry.addFormatter(varietyFormatter());
        registry.addFormatter(dateFormatter());
    }

    @Bean
    public VarietyFormatter varietyFormatter() {
        return new VarietyFormatter();
    }

    @Bean
    public DateFormatter dateFormatter() {
        return new DateFormatter();
    }



    /* **************************************************************** */
    /*  THYMELEAF-SPECIFIC ARTIFACTS                                    */
    /*  TemplateResolver <- TemplateEngine <- ViewResolver              */
    /* **************************************************************** */

    @Bean
    public SpringResourceTemplateResolver templateResolver(){
        // SpringResourceTemplateResolver automatically integrates with Spring's own
        // resource resolution infrastructure, which is highly recommended.
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(this.applicationContext);
        templateResolver.setPrefix("/WEB-INF/templates/");
        templateResolver.setSuffix(".html");
        // HTML is the default value, added here for the sake of clarity.
        templateResolver.setTemplateMode(TemplateMode.HTML);
        // Template cache is true by default. Set to false if you want
        // templates to be automatically updated when modified.
        templateResolver.setCacheable(true);
        return templateResolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine(){
        // SpringTemplateEngine automatically applies SpringStandardDialect and
        // enables Spring's own MessageSource message resolution mechanisms.
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        // Enabling the SpringEL compiler can speed up execution in most
        // scenarios, but might be incompatible with specific cases when
        // expressions in one template are reused across different data
        // types, so this flag is "false" by default for safer backwards
        // compatibility.
        templateEngine.setEnableSpringELCompiler(true);
        return templateEngine;
    }

    @Bean
    public ThymeleafViewResolver viewResolver(){
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        return viewResolver;
    }

}

```

--------------------------------

### DateFormatter Implementation

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Custom Formatter for Date objects that uses a message key for the date format string and setsSimpleDateFormat to non-lenient.

```java
public class DateFormatter implements Formatter<Date> {

    @Autowired
    private MessageSource messageSource;


    public DateFormatter() {
        super();
    }

    public Date parse(final String text, final Locale locale) throws ParseException {
        final SimpleDateFormat dateFormat = createDateFormat(locale);
        return dateFormat.parse(text);
    }

    public String print(final Date object, final Locale locale) {
        final SimpleDateFormat dateFormat = createDateFormat(locale);
        return dateFormat.format(object);
    }

    private SimpleDateFormat createDateFormat(final Locale locale) {
        final String format = this.messageSource.getMessage("date.format", null, locale);
        final SimpleDateFormat dateFormat = new SimpleDateFormat(format);
        dateFormat.setLenient(false);
        return dateFormat;
    }

}
```

--------------------------------

### ThymeleafViewResolver Configuration (XML)

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures a ThymeleafViewResolver using XML. References the template engine and optionally sets the order and view names.

```xml
<bean class="org.thymeleaf.spring6.view.ThymeleafViewResolver">
  <property name="templateEngine" ref="templateEngine" />
  <!-- NOTE 'order' and 'viewNames' are optional -->
  <property name="order" value="1" />
  <property name="viewNames" value="*.html,*.xhtml" />
</bean>
```

--------------------------------

### ThymeleafViewResolver Configuration (Java)

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures a ThymeleafViewResolver using Java configuration. Sets the template engine, order, and view names for resolving HTML and XHTML views.

```java
@Bean
public ThymeleafViewResolver viewResolver(){
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(templateEngine());
    // NOTE 'order' and 'viewNames' are optional
    viewResolver.setOrder(1);
    viewResolver.setViewNames(new String[] {'.html', '.xhtml'});
    return viewResolver;
}
```

--------------------------------

### Thymeleaf Preprocessing for Array Indexing

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Illustrates the use of Thymeleaf's preprocessing expressions (`__${...}__`) to correctly evaluate array indices within Spring EL expressions for dynamic form fields.

```html
<select th:field="*{rows[__${rowStat.index}__].variety}">

    ...

</select>
```

--------------------------------

### Thymeleaf Dropdown/List Selector

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Implement dropdowns by placing th:field on the <select> tag and using th:each and th:value on the <option> tags to populate and bind values.

```html
<select th:field="*{type}">
  <option th:each="type : ${allTypes}" 
          th:value="${type}" 
          th:text="#{${'seedstarter.type.' + type}}">Wireframe</option>
</select>
```

--------------------------------

### Including Spring JavaScript Libraries

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Include necessary Spring JavaScript libraries for AJAX functionality in a Thymeleaf template.

```html
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring-Dojo.js}"></script>
```

--------------------------------

### Display Global Errors in a List

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Checks for and displays global errors using `#fields.hasErrors('global')` and `#fields.errors('global')`. Global errors are not tied to specific fields.

```html
<ul th:if="${#fields.hasErrors('global')}">
  <li th:each="err : ${#fields.errors('global')}" th:text="${err}">Input is incorrect</li>
</ul>
```

--------------------------------

### Spring WebFlow View State Configuration

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Specify a Thymeleaf template for a view-state in Spring WebFlow.

```xml
<view-state id="detail" view="bookingDetail">
    ...
</view-state>
```

--------------------------------

### Spring WebFlow AJAX Render Fragment

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Define a transition in Spring WebFlow to render specific Thymeleaf fragments via AJAX.

```xml
<view-state id="detail" view="bookingDetail">
    <transition on="updateData">
        <render fragments="hoteldata"/>
    </transition>
</view-state>
```

--------------------------------

### Spring WebFlow AJAX Render using DOM Selectors

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use DOM selectors within the `<render>` tag in Spring WebFlow to target fragments for AJAX updates, eliminating the need for `th:fragment`.

```xml
<view-state id="detail" view="bookingDetail">
    <transition on="updateData">
        <render fragments="[//div[@id='data']]"/>
    </transition>
</view-state>
```

--------------------------------

### Dynamic Table Structure in Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

This HTML snippet demonstrates a dynamic table using Thymeleaf, enabling users to add or remove rows of form fields.

```html
<table>
  <thead>
    <tr>
      <th th:text="#{seedstarter.rows.head.rownum}">Row</th>
      <th th:text="#{seedstarter.rows.head.variety}">Variety</th>
      <th th:text="#{seedstarter.rows.head.seedsPerCell}">Seeds per cell</th>
      <th>
        <button type="submit" name="addRow" th:text="#{seedstarter.row.add}">Add row</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="row,rowStat : *{rows}">
      <td th:text="${rowStat.count}">1</td>
      <td>
        <select th:field="*{rows[__${rowStat.index}__].variety}">
          <option th:each="var : ${allVarieties}" 
                  th:value="${var.id}" 
                  th:text="${var.name}">Thymus Thymi</option>
        </select>
      </td>
      <td>
        <input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" />
      </td>
      <td>
        <button type="submit" name="removeRow" 
                th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
      </td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### ThymeleafView Bean with Static Variables (Java)

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Defines a prototype ThymeleafView bean with static variables. This allows specific views to be selected by their bean name and have predefined static data.

```java
@Bean
@Scope("prototype")
public ThymeleafView mainView() {
    ThymeleafView view = new ThymeleafView("main"); // templateName = 'main'
    view.setStaticVariables(
        Collections.singletonMap("footer", "The ACME Fruit Company"));
    return view;
}
```

--------------------------------

### JSP/JSTL ViewResolver Configuration (XML)

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures a JSP/JSTL ViewResolver in Spring MVC using XML. Specifies the view class, prefix, suffix, order, and view names.

```xml
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
  <property name="prefix" value="/WEB-INF/jsps/" />
  <property name="suffix" value=".jsp" />
  <property name="order" value="2" />
  <property name="viewNames" value="*jsp" />
</bean>
```

--------------------------------

### Automatic Conversion Service with th:field

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

The `th:field` attribute automatically applies the Conversion Service, equivalent to using `*{{...}}`.

```html
<input type="text" th:field="*{datePlanted}" />
```

```html
<input type="text" th:field="*{{datePlanted}}" />
```

--------------------------------

### Display All Form Errors in a List

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use `#fields.hasErrors('*')` and `#fields.errors('*')` to check for and iterate over all form errors. This is useful for displaying a list of all validation messages.

```html
<ul th:if="${#fields.hasErrors('*')}">
  <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
</ul>
```

--------------------------------

### Accessing Rich Error Objects

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Utilize the `#fields.detailedErrors()` utility to access detailed error information, including field name, message, and whether the error is global. This provides more granular control over error display.

```html
<ul>
    <li th:each="e : ${#fields.detailedErrors()}" th:class="${e.global}? globalerr : fielderr">
        <span th:text="${e.global}? '*' : ${e.fieldName}">The field name</span> |
        <span th:text="${e.message}">The error message</span>
    </li>
</ul>
```

--------------------------------

### Controller Returning Fragment by ID Selector

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

A controller method returning a fragment expression using a DOM selector to target an element by its ID. This allows selecting fragments without explicit `th:fragment` attributes.

```java
@RequestMapping("/showContentPart")
public String showContentPart() {
    ...
    return "index :: #content";
}
```

--------------------------------

### Spring JavaScript AJAX Event Decoration

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configure Spring JavaScript to trigger a Spring WebFlow transition via AJAX on a form submission.

```javascript
Spring.addDecoration(
    new Spring.AjaxEventDecoration({
        formId:'triggerform',
        elementId:'doUpdate',
        event:'onclick'
    })
);
```

--------------------------------

### Spring Bean Configuration for Template Engine

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures SpringTemplateEngine, which automatically applies SpringStandardDialect and enables Spring's message resolution. It sets the template resolver and optionally enables the SpringEL compiler for performance.

```java
@Bean
public SpringTemplateEngine templateEngine(){
    // SpringTemplateEngine automatically applies SpringStandardDialect and
    // enables Spring's own MessageSource message resolution mechanisms.
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    // Enabling the SpringEL compiler can speed up execution in most
    // scenarios, but might be incompatible with specific cases when
    // expressions in one template are reused across different data
    // types, so this flag is "false" by default for safer backwards
    // compatibility.
    templateEngine.setEnableSpringELCompiler(true);
    return templateEngine;
}
```

--------------------------------

### Controller Returning a View Bean Name

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

A controller method that returns the name of a pre-configured ThymeleafView bean. Thymeleaf will then render the fragment specified by the bean's markup selector.

```java
@RequestMapping("/showContentPart")
public String showContentPart() {
    ...
    return "content-part";
}
```

--------------------------------

### Single Checkbox Input with th:field

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use this snippet for a simple boolean checkbox. It demonstrates externalized labels and dynamic ID generation using #ids.next().

```html
<div>
  <label th:for="${#ids.next('covered')}" th:text="#{seedstarter.covered}">Covered</label>
  <input type="checkbox" th:field="*{covered}" />
</div>
```

--------------------------------

### Displaying Enum Arrays with Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

This snippet demonstrates how to display an array of enum values, separated by commas, by externalizing and joining them. It prepends a prefix, retrieves messages, and joins them with a comma.

```html
<td th:text="${#strings.arrayJoin(
                   #messages.arrayMsg(
                       #strings.arrayPrepend(sb.features,'seedstarter.feature.')),
                   ', ')}">Electric Heating, Turf</td>
```

--------------------------------

### Define Thymeleaf View Bean for Fragment Rendering

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configure a ThymeleafView bean to render a specific fragment from a template using a markup selector. This is useful for AJAX responses.

```java
@Bean(name="content-part")
@Scope("prototype")
public ThymeleafView someViewBean() {
    ThymeleafView view = new ThymeleafView("index"); // templateName = 'index'
    view.setMarkupSelector("content");
    return view;
}
```

--------------------------------

### Multi-valued Checkbox Input with th:field

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use this snippet for checkboxes representing an array of values. It includes th:value for mapping, and relies on #ids.prev() for ID retrieval.

```html
<ul>
  <li th:each="feat : ${allFeatures}">
    <input type="checkbox" th:field="*{features}" th:value="${feat}" />
    <label th:for="${#ids.prev('features')}" 
           th:text="#{${'seedstarter.feature.' + feat}}">Heating</label>
  </li>
</ul>
```

--------------------------------

### Iterate and Display Field Errors

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Retrieves all validation errors for a specific field ('datePlanted') and displays each error as a list item. Uses the #fields.errors() function.

```HTML
<ul>
  <li th:each="err : ${#fields.errors('datePlanted')}" th:text="${err}" />
</ul>
```

--------------------------------

### HTML Form for AJAX Event Trigger

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

An HTML form with a submit input designed to trigger a Spring WebFlow AJAX event.

```html
<form id="triggerform" method="post" action="">
    <input type="submit" id="doUpdate" name="_eventId_updateData" value="Update now!" />
</form>
```

--------------------------------

### Internationalized Headers with Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Displays internationalized text for table headers using Thymeleaf's message resolution syntax (`#{...}`).

```html
<h2 th:text="#{title.list}">List of Seed Starters</h2>
```

```html
<table>
  <thead>
    <tr>
      <th th:text="#{seedstarter.datePlanted}">Date Planted</th>
      <th th:text="#{seedstarter.covered}">Covered</th>
      <th th:text="#{seedstarter.type}">Type</th>
      <th th:text="#{seedstarter.features}">Features</th>
      <th th:text="#{seedstarter.rows}">Rows</th>
      ...
```

--------------------------------

### Form Handling with th:object in Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

This snippet illustrates how to bind a form to a command object using the `th:object` attribute in Thymeleaf. The command object models the form's fields and is used by Spring MVC for data binding.

```html
<form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post">
    ...
</form>
```

--------------------------------

### Spring Bean Configuration for Template Resolver

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures SpringResourceTemplateResolver for Thymeleaf, integrating with Spring's resource resolution. It sets the prefix, suffix, template mode, and cacheability.

```java
@Bean
public SpringResourceTemplateResolver templateResolver(){
    // SpringResourceTemplateResolver automatically integrates with Spring's own
    // resource resolution infrastructure, which is highly recommended.
    SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
    templateResolver.setApplicationContext(this.applicationContext);
    templateResolver.setPrefix("/WEB-INF/templates/");
    templateResolver.setSuffix(".html");
    // HTML is the default value, added here for the sake of clarity.
    templateResolver.setTemplateMode(TemplateMode.HTML);
    // Template cache is true by default. Set to false if you want
    // templates to be automatically updated when modified.
    templateResolver.setCacheable(true);
    return templateResolver;
}
```

--------------------------------

### Controller Returning Fragment Expression (Template :: Fragment)

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

A controller method returning a fragment expression string. This tells Thymeleaf to render a specific fragment named 'content' from the 'index' template.

```java
@RequestMapping("/showContentPart")
public String showContentPart() {
    ...
    return "index :: content";
}
```

--------------------------------

### Display All Form Errors with th:errors

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Utilizes `th:errors="*{all}"` to display all errors associated with the current object, typically within a form context. Requires a `th:object` attribute in scope.

```html
<p th:if="${#fields.hasErrors('all')}" th:errors="*{all}">Incorrect date</p>
```

--------------------------------

### Display Global Errors with th:errors

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Uses `th:errors="*{global}"` to display global errors. This requires a `th:object` attribute to be in scope.

```html
<p th:if="${#fields.hasErrors('global')}" th:errors="*{global}">Incorrect date</p>
```

--------------------------------

### Spring MessageSource Configuration

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configures a Spring `ResourceBundleMessageSource` bean to manage externalized messages, specifying the base name for property files.

```java
@Bean
public ResourceBundleMessageSource messageSource() {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    messageSource.setBasename("Messages");
    return messageSource;
}
```

--------------------------------

### Configure RequestDataValueProcessor Bean

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configure a custom implementation of RequestDataValueProcessor as a Spring bean. Thymeleaf will automatically use this bean for processing URLs and form fields.

```java
@Bean
public RequestDataValueProcessor requestDataValueProcessor() {
  return new MyRequestDataValueProcessor();
}
```

--------------------------------

### Internationalized Boolean Display with Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Displays a boolean property ('covered') as an internationalized string ('yes' or 'no') by using a literal substitution expression to look up messages.

```html
<td th:text="#{|bool.${sb.covered}|}">yes</td>
```

--------------------------------

### HTML Element for AJAX Render without th:fragment

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

An HTML element with an 'id' attribute that can be targeted by DOM selectors for AJAX rendering in Spring WebFlow.

```html
<div id="data">
    This is a content to be changed
</div>
```

--------------------------------

### Basic Input Field with th:field

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use th:field to bind an input element to a property of the form-backing bean. This attribute handles the heavy lifting of data binding and formatting.

```html
<input type="text" th:field="*{datePlanted}" />
```

--------------------------------

### Displaying Form Errors Outside Forms

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use variable expressions prefixed with the form-backing bean name to display errors outside of form tags. This allows for custom error display logic.

```html
<div th:errors="${myForm}">...</div>
<div th:errors="${myForm.date}">...</div>
<div th:errors="${myForm.*}">...</div>

<div th:if="${#fields.hasErrors('${myForm}')}">...</div>
<div th:if="${#fields.hasErrors('${myForm.date}')}">...</div>
<div th:if="${#fields.hasErrors('${myForm.*}')}">...</div>

<form th:object="${myForm}">
    ...
</form>
```

--------------------------------

### Spring WebFlow ViewResolver Configuration

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configure Thymeleaf's ViewResolver for AJAX requests in Spring WebFlow. Requires Spring WebFlow 3.0+ for Spring 6 or 2.5 for Spring 5.

```java
@Bean
public FlowDefinitionRegistry flowRegistry() {
    // NOTE: Additional configuration might be needed in your app
    return getFlowDefinitionRegistryBuilder()
            .addFlowLocation("...")
            .setFlowBuilderServices(flowBuilderServices())
            .build();
}

@Bean
public FlowExecutor flowExecutor() {
    // NOTE: Additional configuration might be needed in your app
    return getFlowExecutorBuilder(flowRegistry()).build();
}

@Bean
public FlowBuilderServices flowBuilderServices() {
    // NOTE: Additional configuration might be needed in your app
    return getFlowBuilderServicesBuilder()
            .setViewFactoryCreator(viewFactoryCreator())
            .build();
}

@Bean
public ViewFactoryCreator viewFactoryCreator() {
    MvcViewFactoryCreator factoryCreator = new MvcViewFactoryCreator();
    factoryCreator.setViewResolvers(
            Collections.singletonList(thymeleafViewResolver()));
    factoryCreator.setUseSpringBeanBinding(true);
    return factoryCreator;
}

@Bean
public ViewResolver thymeleafViewResolver() {
    AjaxThymeleafViewResolver viewResolver = new AjaxThymeleafViewResolver();
    // We need to set a special ThymeleafView implementation: FlowAjaxThymeleafView
    viewResolver.setViewClass(FlowAjaxThymeleafView.class);
    viewResolver.setTemplateEngine(templateEngine());
    return viewResolver;
}
```

--------------------------------

### Conditional Display with Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Conditionally renders a div element only if the 'allSeedStarters' model attribute is not empty, using the `#lists.isEmpty()` utility function.

```html
<div class="seedstarterlist" th:unless="${#lists.isEmpty(allSeedStarters)}">
```

--------------------------------

### Formatted Date Display with Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Displays a date property ('datePlanted') formatted according to the Spring Conversion Service, which includes a registered `DateFormatter`.

```html
<td th:text="${{sb.datePlanted}}">13/01/2011</td>
```

--------------------------------

### Resulting HTML after Adding Rows

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

This HTML fragment shows the rendered table body after dynamically adding rows, demonstrating how Thymeleaf and Spring MVC bind form elements with indexed names.

```html
<tbody>
  <tr>
    <td>1</td>
    <td>
      <select id="rows0.variety" name="rows[0].variety">
        <option selected="selected" value="1">Thymus vulgaris</option>
        <option value="2">Thymus x citriodorus</option>
        <option value="3">Thymus herba-barona</option>
        <option value="4">Thymus pseudolaginosus</option>
        <option value="5">Thymus serpyllum</option>
      </select>
    </td>
    <td>
      <input id="rows0.seedsPerCell" name="rows[0].seedsPerCell" type="text" value="" />
    </td>
    <td>
      <button name="removeRow" type="submit" value="0">Remove row</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <select id="rows1.variety" name="rows[1].variety">
        <option selected="selected" value="1">Thymus vulgaris</option>
        <option value="2">Thymus x citriodorus</option>
        <option value="3">Thymus herba-barona</option>
        <option value="4">Thymus pseudolaginosus</option>
        <option value="5">Thymus serpyllum</option>
      </select>
    </td>
    <td>
      <input id="rows1.seedsPerCell" name="rows[1].seedsPerCell" type="text" value="" />
    </td>
    <td>
      <button name="removeRow" type="submit" value="1">Remove row</button>
    </td>
  </tr>
</tbody>
```

--------------------------------

### Display Field Errors with th:errors Attribute

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Displays validation errors for a field using the th:errors attribute. It shows a default message 'Incorrect date' if there are no errors, and lists the errors if present.

```HTML
<input type="text" th:field="*{datePlanted}" />
<p th:if="${#fields.hasErrors('datePlanted')}" th:errors="*{datePlanted}">Incorrect date</p>
```

--------------------------------

### Thymeleaf Fragment with ID for AJAX

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Define a Thymeleaf fragment with an 'id' attribute for AJAX rendering in Spring WebFlow.

```html
<div id="data" th:fragment="hoteldata">
    This is a content to be changed
</div>
```

--------------------------------

### View Bean Using ID Selector for Fragment

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Configure a ThymeleafView bean to render a fragment based on an HTML element's ID using a DOM selector. This avoids the need for `th:fragment` attributes.

```java
@Bean(name="content-part")
@Scope("prototype")
public ThymeleafView someViewBean() {
    ThymeleafView view = new ThymeleafView("index"); // templateName = 'index'
    view.setMarkupSelector("#content");
    return view;
}
```

--------------------------------

### Internationalized Enum Type Display with Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Displays an enum type property ('type') as an internationalized string by prefixing the enum value with 'seedstarter.type.' to form the message key.

```html
<td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td>
```

--------------------------------

### Spring Controller Model Attributes

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Adds model attributes to the controller that will be available in the Thymeleaf view. These methods are annotated with @ModelAttribute.

```java
@ModelAttribute("allTypes")
public List<Type> populateTypes() {
    return Arrays.asList(Type.ALL);
}
    
@ModelAttribute("allFeatures")
public List<Feature> populateFeatures() {
    return Arrays.asList(Feature.ALL);
}
    
@ModelAttribute("allVarieties")
public List<Variety> populateVarieties() {
    return this.varietyService.findAll();
}
    
@ModelAttribute("allSeedStarters")
public List<SeedStarter> populateSeedStarters() {
    return this.seedStarterService.findAll();
}
```

--------------------------------

### Thymeleaf Radio Button Group

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Use th:field to bind to the model attribute and th:value for each radio button's distinct value. The th:each attribute iterates over a collection to generate the options.

```html
<ul>
  <li th:each="ty : ${allTypes}">
    <input type="radio" th:field="*{type}" th:value="${ty}" />
    <label th:for="${#ids.prev('type')}" th:text="#{${'seedstarter.type.' + ty}}">Wireframe</label>
  </li>
</ul>
```

--------------------------------

### Simplify Error-Based CSS Styling with th:errorclass

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Applies a CSS class 'fieldError' to an input field if it has validation errors. This attribute simplifies the conditional styling process compared to using #fields.hasErrors() directly in th:class.

```HTML
<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />
```

--------------------------------

### Conditionally Apply CSS Class for Field Errors

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Applies a CSS class 'fieldError' to an input field if it has validation errors. Uses the #fields.hasErrors() function to check for errors.

```HTML
<input type="text" th:field="*{datePlanted}" 
                   th:class="${#fields.hasErrors('datePlanted')}? fieldError" />
```

--------------------------------

### Nested Table for Row Data in Thymeleaf

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

This snippet shows how to display nested table data within a Thymeleaf template. It iterates over rows and displays count, variety name, and seeds per cell.

```html
<td>
  <table>
    <tbody>
      <tr th:each="row,rowStat : ${sb.rows}">
        <td th:text="${rowStat.count}">1</td>
        <td th:text="${row.variety.name}">Thymus Thymi</td>
        <td th:text="${row.seedsPerCell}">12</td>
      </tr>
    </tbody>
  </table>
</td>
```

--------------------------------

### th:field Behavior for Text Input

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

The th:field attribute on a text input generates 'id', 'name', and 'th:value' attributes, ensuring proper Spring MVC integration and data formatting.

```html
<input type="text" id="datePlanted" name="datePlanted" th:value="*{datePlanted}" />
```
Tokens:
Raw