Overview of This Lesson

Refresh this page because I am probably still making changes to it.

In the previous lesson you learned how to make data accessible in the response by using Model attributes. This allows you to dynamically add data to the response so that it's sent back to the client. For example, you can configure an HTML page to show a collection of book data retrieved on the server, and that book data is embedded in the HTML page and sent back to the client in the response.

Recall that Thymeleaf is a template engine. We can create an HTML page and include Thmeleaf code to format how dynamic data appears and even include expressions and calculations. This is exactly what the /templates directory of your /resources directory is for!

Thymeleaf is coded by adding special thymeleaf expressions inside Thymeleaf attributes (such as th:text) added to HTML elements. All Thymeleaf attributes are prefixed with th:, so they're part of the Thymeleaf namespace. That way, they won't get confused with the existing HTML attributes.

Let's begin by learning the syntax of Thymeleaf expressions and the different attributes you can use (tip: you already know all the attributes!)

Pre-Requisites

For this lesson, it's important that you've already learned how to use Model Attributes from the Introduction to Thymeleaf lesson.

Helpful Resources

• Thymeleaf Documentation
• Thymeleaf Tutorial
• Launchcode Thymeleaf Tutorial - a very quick tutorial with a few basics to get you started
• Java Guides: Thymeleaf Tutorial

Basic Variable Expressions and Operators

The ${ } part of the expression you learned in the previous lesson is a variable expression. Inside the curly braces you can put any object variable or object property, a model attribute, an implicit object, etc.

Variable expressions can contain operators. For example, all the basic mathematical operations are supported:

Some variable expressions can also evaluate to a boolean value, so the standard relational operations are supported. Note however, that you can't place a < or > symbol inside an HTML attribute value, so you'll have to use character entities such as &lt; and &gt; or use the alternative operators lt and gt (more of these are outlined further down).

String operations are also supported.

Concatenation is done with the + operator.

You can perform literal substitution using the | (pipe, vertical line) symbol. For example:

<span th:style="|background-color:${cat.colorCode}|">blue siamese</span>

can also be written as

<span th:style="'background-color:'+ ${cat.colorCode}">blue siamese</span>

Alternatives to Standard Operators

Most of the operators discussed above have alternative symbolism that uses letters. As mentioned earlier, you can't use certain operators such as < and > inside an HTML attribute, so many developers use the alternatives, isntead. The table below outlines the different operators and their symbols and alternatives:

Unescaped Text

Normally when you use th:text, any special HTML characters are escaped. So if you had a model attribute called "output" with the content "<span class='foo'>Foo!</span>" and you then wrote the Thymeleaf code:

<p th:text="${output}"></p>

The value assigned to th:text would be parsed and sent back in the response body as

<p>&lt;span class='foo'&gt;Foo!&lt;/span&gt;</p>

So that would actually render on the page as a paragraph element containing the content

<span class='foo'>Foo!</span>

Try it in your own program and you'll see what I mean!

If you want to display text that has any HTML code in it, and you want that code to be treated like actual HTML code (where the special characters aren't escaped and the HTML code is actually rendered as pure HTML) you should use th:utext instead. The th:utext attribute will not escape any special HTML characters such as <, >, &, etc.

Give it a try, add a model attribute in your handler method with some HTML, such as:

model.addAttribute("test", "How does <strong>this</strong> display?");

Display the attribute on your output page using a paragraph or div with th:text and a different paragraph/div using th:utext.

Check the source after you reload your page.

<p>Example 1</p>
<p th:text="${attrib1} + ' ' + ${attrib2} + ' ' 
    + ${attrib3}">example 1</p>
<p>Example 2</p>
<p th:text="|${attrib1} ${attrib2} ${attrib3}|">example 2</p>
<p>Example 3</p>
<p><span th:text="${attrib1}">a1</span> 
  <span th:text="${attrib2}">a2</span>
  <span th:text="${attrib3}">a3</span></p>

Referencing CSS and Images

When referencing external resources, you have to use a URL expression instead of a variable expression. A URL expression uses @{ }. Inside the curly braces, you put the location of the resource. If the resource is a file, make sure it starts with the forward-slash / if you're referencing it from the context path.

Recall that all web resources such as images, scripts, and CSS files are stored in the /static directory. Always reference the /static directory in a URL expression with a forward slash, followed by the file or sub-directory that resides inside /static. For example, assuming you have an image file "picture.jpg" inside /static/images, your URL expression would be

@{/images/picture.jpg}

Therefore, adding such an image to an HTML page using Thymeleaf would be something like:

<img src="../static/images/mypicture.jpg" alt="accessible description here"
th:src="@{/images/mypicture.jpg}">

Note that we should still include the static image src attribute as a fallback!

You can do something similar with an external CSS file: assuming you follow the industry standard and have a /css or /styles directory in your /static directory, you can link to a CSS file from any static page normally. From a /templates page, you would use a link tag such as:

<link rel="stylesheet" type="text/css" media="all"
href="../static/css/main.css" th:href="@{/css/main.css}">
            

Once again, notice that you should include the regular href attribute as fallback code.

Thymeleaf Attributes

What else can you do with Thymeleaf? To be honest, there is just SO MUCH you can do that we are unable to cover it all in this course, so make sure you take some time later to go over the Thymeleaf tutorial, and make note of the Thymeleaf documentation in case you ever want to search for how to do something specific.

Attribute Modifiers

Attribute modifiers are Thymeleaf versions of existing HTML attributes. Most of the HTML5 attributes have a Thymeleaf version, such as th:class, th:name, th:id, th:action, th:alt, th:for, th:href, th:pattern, th:placeholder, th:src, th:style, th:target, th:title, and th:value. There are several others: obviously listing them all here is not practical.

All of these types of attributes can be used with Thymeleaf expressions. For example:

<input type="text" name="itemname"
  value="Item Name" th:value="${inv.itemName}">

In this example, an input element is using th:value to assign a dynamic value to the input field, which in this case is whatever is inside inv.itemName.

Notice we are also including value="Item Name" as a fallback: if for some reason Thymeleaf isn't working, the input field's value will be "Item Name".