Skip to content

thymeleaf tutorial added #523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions docs/java/Thymeleaf-in-java/Iteration-and-evalution.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
id: Iteration and Evalution in Thymeleaf
title: Iteration and Evalution in Thymeleaf
sidebar_label: Iteration and Evalution in Thymeleaf
sidebar_position: 1
tags: [java, mvc,thymleaf, programming, java core, java spring, java web, AOP, aspect oriented]
description: in thi tutorial you will learn about Iteration and Evalution in Thymeleaf
---

### Introduction
In this guide, we'll explore Thymeleaf's iteration and conditional evaluation capabilities, focusing on the practical implementation within a web application. We'll cover iteration basics, keeping iteration status, lazy retrieval of data, and conditional evaluation.

### Iteration Basics
The product list page is essential for displaying a collection of products. We utilize Thymeleaf's `th:each` attribute to iterate over the products and generate HTML dynamically.

```html
<tr th:each="prod : ${prods}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
```

### Keeping Iteration Status
Thymeleaf provides a mechanism for keeping track of iteration status using the `iterStat` variable. This allows us to apply styling or logic based on the current iteration's properties.

```html
<tr th:each="prod, iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
```

### Lazy Retrieval of Data
To optimize data retrieval, Thymeleaf supports lazy loading of context variables. This ensures that data is retrieved only when needed, improving performance.

```java
context.setVariable(
"users",
new LazyContextVariable<List<User>>() {
@Override
protected List<User> loadValue() {
return databaseRepository.findAllUsers();
}
});
```

### Conditional Evaluation
Thymeleaf offers simple conditionals (`th:if` and `th:unless`) and switch statements (`th:switch` / `th:case`) for conditional rendering of HTML elements.

```html
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>
```

### Conclusion
By leveraging Thymeleaf's iteration and conditional evaluation features, we can create dynamic and responsive web pages that adapt to different data scenarios. This enhances user experience and improves the efficiency of our web application.
8 changes: 8 additions & 0 deletions docs/java/Thymeleaf-in-java/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "Thymeleaf in Java",
"position": 15,
"link": {
"type": "generated-index",
"description": "In this section, you will learn about Thymeleaf the web framework of java and also learn about MVC model from near"
}
}
161 changes: 161 additions & 0 deletions docs/java/Thymeleaf-in-java/introduction-to-thymeleaf.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
---
id: Introduction to Thymeleaf
title: Introduction to Thymeleaf
sidebar_label: Introduction to Thymeleaf
sidebar_position: 1
tags: [java, mvc,thymleaf, programming, java core, java spring, java web, AOP, aspect oriented]
description: in thi tutorial you will learn about introduction thymeleaf and basics of MVC
---
### What is Thymeleaf?
Thymeleaf is a modern server-side Java template engine designed for both web and standalone environments. It can process various types of content including HTML, XML, JavaScript, CSS, and plain text. The primary objective of Thymeleaf is to offer an elegant and highly maintainable approach to creating templates. It introduces the concept of Natural Templates, allowing logic injection without compromising the template's usability as a design prototype. Thymeleaf is built with web standards in mind, particularly HTML5, enabling the creation of fully validating templates.

### What kind of templates can Thymeleaf process?
Thymeleaf supports six template modes:
- HTML
- XML
- TEXT
- JAVASCRIPT
- CSS
- RAW

These modes encompass markup and textual templates, with HTML and XML modes accepting respective input types. Thymeleaf does not perform validation on HTML templates but enforces well-formedness rules for XML templates. The TEXT mode caters to non-markup templates, such as text emails or documentation.

### Dialects: The Standard Dialect
Thymeleaf is highly extensible, allowing detailed customization of template processing. It employs a concept called dialects, which consist of processors applying logic to template artifacts. Thymeleaf's core library includes the Standard Dialect, offering comprehensive functionality for most users.

### Using Texts
#### A multi-language welcome
Thymeleaf facilitates internationalization (i18n) through text externalization, enabling the extraction of template fragments into separate files. These fragments, called "messages," are identified by keys and can be easily replaced with equivalent texts in other languages. Thymeleaf employs the `#{...}` syntax to specify text corresponding to a specific message. The location of externalized text is configurable, typically residing in .properties files. By default, Thymeleaf uses the Standard Message Resolver, which expects messages in properties files corresponding to the template's name and locale.
Certainly!

In our example, let's consider a simple home page for a grocery site. The initial version includes a title and a welcome message:

```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
</head>
<body>
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
</body>
</html>
```

While this HTML code is valid and can be displayed by any browser, it's not strictly compliant with HTML5 standards due to the non-standard attributes such as `th:text`. Thymeleaf allows the use of these attributes for its functionalities.

The `th:text` attribute evaluates its value expression and sets the result as the body of the host tag. In this case, it replaces the default welcome message with the message identified by the key `home.welcome`.

Now, let's externalize this text for internationalization. We'll create a properties file for each supported language. For example, for Spanish:


```properties title="home.properties"
home.welcome=¡Bienvenido a nuestra tienda de comestibles!
```

This file contains the translated welcome message for Spanish-speaking users.

With Thymeleaf, this setup allows for easy management of text across different languages, enhancing the user experience of our grocery site.
Certainly, here's the content presented in the desired format:

---


```java title="HomeController.java"
public class HomeController implements IGTVGController {
public void process(final IWebExchange webExchange, final ITemplateEngine templateEngine, final Writer writer) throws Exception {
WebContext ctx = new WebContext(webExchange, webExchange.getLocale());
templateEngine.process("home", ctx, writer);
}
}
```

```java title="IContext.java"
public interface IContext {
public Locale getLocale();
public boolean containsVariable(final String name);
public Set<String> getVariableNames();
public Object getVariable(final String name);
}
```

```java title="IContext.java"
public interface IWebContext extends IContext {
public IWebExchange getExchange();
}
```

**Creating WebContext**
```java
WebContext ctx = new WebContext(webExchange, webExchange.getLocale());
```

**Processing Template**
```java
templateEngine.process("home", ctx, writer);
```

**Processed HTML with Spanish Locale**
```html
<!DOCTYPE html>
<html>
<head>
<title>Good Thymes Virtual Grocery</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="stylesheet" type="text/css" media="all" href="/gtvg/css/gtvg.css" />
</head>
<body>
<p>¡Bienvenido a nuestra tienda de comestibles!</p>
</body>
</html>
```

**Unescaped Text in Thymeleaf**
```html
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
```

**Adding Date Variable to Context**
```java
public void process(final IWebExchange webExchange, final ITemplateEngine templateEngine, final Writer writer) throws Exception {
SimpleDateFormat dateFormat = new SimpleDateFormat("dd MMMM yyyy");
Calendar cal = Calendar.getInstance();
WebContext ctx = new WebContext(webExchange, webExchange.getLocale());
ctx.setVariable("today", dateFormat.format(cal.getTime()));
templateEngine.process("home", ctx, writer);
}
```

**Displaying Date Variable in Template**
```html
<body>
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
<p>Today is: <span th:text="${today}">13 February 2011</span></p>
</body>
```

**Unescaped Text with HTML Tags**
```html
<p>Welcome to our <b>fantastic</b> grocery store!</p>
```

**Conclusion:**

Thymeleaf is a powerful server-side Java template engine designed for web and standalone environments. It offers extensive capabilities for processing various types of content including HTML, XML, JavaScript, CSS, and plain text.

Key concepts within Thymeleaf include:

1. **Contexts**: Thymeleaf contexts, represented by objects implementing the `IContext` interface, provide the necessary data for template execution, including variables and locale information. In web applications, the `IWebContext` interface extends `IContext` to provide additional functionality, such as access to HTTP request and response objects.

2. **Processing Templates**: Thymeleaf processes templates using the `ITemplateEngine` interface, where a context object containing the required data is passed along with the template name and an output writer.

3. **Internationalization**: Thymeleaf supports internationalization (i18n) through externalization of text fragments into properties files, allowing for easy translation of content into multiple languages. This is achieved using special syntax such as `#{...}` for message resolution.

4. **Unescaped Text**: Thymeleaf provides the `th:utext` attribute for displaying unescaped text, preserving HTML markup within the text content.

5. **Variables and Expressions**: Thymeleaf allows the use of variables and expressions within templates, enabling dynamic content generation. Variables are accessed using the `${...}` syntax, and expressions can range from simple variable references to complex object navigation using languages like OGNL (Object-Graph Navigation Language).

In conclusion, Thymeleaf offers a robust and flexible solution for template processing in Java web applications, providing developers with powerful tools for creating dynamic and internationalized web content.

Loading
Loading