• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

How To Set Attributes in Thymeleaf Template using th:attr?

November 27, 2013 //  by Krishna Srinivasan//  Leave a Comment

In my previous articles I have explained about the hello world example and the expression language. This tutorial explains how to set the attribute to the template at the time of processing. This feature is very useful for creating the templates. Thymeleaf provides very easy syntax for just adding the attributes dynamically from the properties files or context variables.

1. Set Up Thymeleaf Application

To demonstrate using the attribute values, I am using our previous hello world example.Use the same example and replace our code snippet below.

2. Create Template with th:attr

If you look at the below example, the tamplate has the th:attr which is replaced with the dynamic values by the template engine. Note that there are number of attributes and many other features are supported for setting the attribute values. Here I am explaining with a very simple example.

attributes.html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>How to set Attribute Values!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p><b>Use th:attr</b></p>
  <fieldset>
    <input type="text" name="email" th:attr="class=#{input.class}"/>
    <input type="submit" value="Subscribe me!" th:attr="value=#{input.submit}"/>
  </fieldset>
  <a href="register.html" th:attr="href=@{/LoginRegister.html}">Register Here</a>
<p><b>Use Specific Attributes</b></p>
  <fieldset>
    <input type="text" name="email" th:class="#{input.class}"/>
    <input type="submit" value="Subscribe me!" th:value="#{input.submit}"/>
  </fieldset>
  <a href="register.html" th:href="@{/LoginRegister.html}">Register Here</a>
<p><b>Append Using th:attrappend</b></p>
  <fieldset>
    <input type="text" name="email" class="input" th:attrappend="class=' ' + #{input.class}"/>
    <input type="submit" value="Subscribe me!" th:attr="value=#{input.submit}"/>
  </fieldset>
  <a href="register.html" th:attr="href=@{/LoginRegister.html}">Register Here</a>

</body>
</html>

3. Create Servlet with Thymeleaf Context and Attach Template

ThymeleafSetAttributeExample.java

package javabeat.net.thymeleaf;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.TreeSet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.WebContext;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

public class ThymeleafSetAttributeExample extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
    	ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
        // XHTML is the default mode, but we will set it anyway for better understanding of code
        templateResolver.setTemplateMode("XHTML");
        templateResolver.setPrefix("/WEB-INF/");
        templateResolver.setSuffix(".html");
        templateResolver.setCacheTTLMs(3600000L);
        TemplateEngine templateEngine = new TemplateEngine();
        templateEngine.setTemplateResolver(templateResolver);
        WebContext ctx = new WebContext(req, resp, getServletConfig().getServletContext(), req.getLocale());

        // This will be prefixed with /WEB-INF/ and suffixed with .html
        templateEngine.process("attribute", ctx, resp.getWriter());
        resp.setContentType("text/html;charset=UTF-8");
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", 1000);
	}
}

4. Create Property File

attributes_en.properties/strong>

input.class=inputstyle
input.submit=Form Submit
input.href=LoginRegister.html

5. Run The Thymeleaf Application

If you execute the above code, you would see the below screen.

set-attribute-thymeleaf

If you look at the view source, the above template converted as below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to set Attribute Values!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p><b>Use th:attr</b></p>
  <fieldset>
    <input type="text" name="email" class="inputstyle" />
    <input type="submit" value="Form Submit" />
  </fieldset>
  <a href="/Thymeleaf/LoginRegister.html" shape="rect">Register Here</a>
<p><b>Use Specific Attributes</b></p>
  <fieldset>
    <input type="text" name="email" class="inputstyle" />
    <input type="submit" value="Form Submit" />
  </fieldset>
  <a href="/Thymeleaf/LoginRegister.html" shape="rect">Register Here</a>
<p><b>Append Using th:attrappend</b></p>
  <fieldset>
    <input type="text" name="email" class="input inputstyle" />
    <input type="submit" value="Form Submit" />
  </fieldset>
  <a href="/Thymeleaf/LoginRegister.html" shape="rect">Register Here</a>

</body>
</html>

Category: Web FrameworksTag: template engine, Thymeleaf

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Get URL Content using Java
Next Post: How To Use th:each For Iteration In Thymeleaf Template? »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact