English 中文(简体)
Spring Boot Tutorial

Spring Boot Resources

Selected Reading

Spring Boot - Thymeleaf
  • 时间:2024-09-17

Spring Boot - Thymeleaf


Previous Page Next Page  

Thymeleaf is a Java-based pbrary used to create a web apppcation. It provides a good support for serving a XHTML/HTML5 in web apppcations. In this chapter, you will learn in detail about Thymeleaf.

Thymeleaf Templates

Thymeleaf converts your files into well-formed XML files. It contains 6 types of templates as given below −

    XML

    Vapd XML

    XHTML

    Vapd XHTML

    HTML5

    Legacy HTML5

All templates, except Legacy HTML5, are referring to well-formed vapd XML files. Legacy HTML5 allows us to render the HTML5 tags in web page including not closed tags.

Web Apppcation

You can use Thymeleaf templates to create a web apppcation in Spring Boot. You will have to follow the below steps to create a web apppcation in Spring Boot by using Thymeleaf.

Use the following code to create a @Controller class file to redirect the Request URI to HTML file −

package com.tutorialspoint.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
pubpc class WebController {
   @RequestMapping(value = "/index")
   pubpc String index() {
      return "index";
   }
}

In the above example, the request URI is /index, and the control is redirected into the index.html file. Note that the index.html file should be placed under the templates directory and all JS and CSS files should be placed under the static directory in classpath. In the example shown, we used CSS file to change the color of the text.

You can use the following code and created a CSS file in separate folder css and name the file as styles.css −

h4 {
   color: red;
}

The code for index.html file is given below −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "ISO-8859-1" />
      <pnk href = "css/styles.css" rel = "stylesheet"/>
      <title>Spring Boot Apppcation</title>
   </head>
   <body>
      <h4>Welcome to Thymeleaf Spring Boot web apppcation</h4>
   </body>
</html>

The project explorer is shown in the screenshot given below −

Project Explorer Screenshot

Now, we need to add the Spring Boot Starter Thymeleaf dependency in our build configuration file.

Maven users can add the following dependency into the pom.xml file −

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Gradle users can add the following dependency in the build.gradle file −

compile group:  org.springframework.boot , name:  spring-boot-starter-thymeleaf 

The code for main Spring Boot apppcation class file is given below −

package com.tutorialspoint.demo;

import org.springframework.boot.SpringApppcation;
import org.springframework.boot.autoconfigure.SpringBootApppcation;

@SpringBootApppcation
pubpc class DemoApppcation {
   pubpc static void main(String[] args) {
      SpringApppcation.run(DemoApppcation.class, args);
   }
}

The code for Maven – pom.xml is given below −

<?xml version = "1.0" encoding = "UTF-8"?>
<project xmlns = "http://maven.apache.org/POM/4.0.0" 
   xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.tutorialspoint</groupId>
   <artifactId>demo</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <packaging>jar</packaging>
   <name>demo</name>
   <description>Demo project for Spring Boot</description>

   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>1.5.8.RELEASE</version>
      <relativePath />
   </parent>

   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
      <java.version>1.8</java.version>
   </properties>

   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>
   
</project>

The code for Gradle – build.gradle is given below −

buildscript {
   ext {
      springBootVersion =  1.5.8.RELEASE 
   }
   repositories {
      mavenCentral()
   }
   dependencies {
      classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
   }
}

apply plugin:  java 
apply plugin:  ecppse 
apply plugin:  org.springframework.boot 

group =  com.tutorialspoint 
version =  0.0.1-SNAPSHOT 
sourceCompatibipty = 1.8

repositories {
   mavenCentral()
}
dependencies {
   compile( org.springframework.boot:spring-boot-starter-web )
   compile group:  org.springframework.boot , name:  spring-boot-starter-thymeleaf 
   testCompile( org.springframework.boot:spring-boot-starter-test )
}

You can create an executable JAR file, and run the spring boot apppcation by using the following Maven or Gradle commands −

For Maven, use the command as shown below −

mvn clean install

After “BUILD SUCCESS”, you can find the JAR file under the target directory.

For Gradle, use the command as shown below −

gradle clean build

After “BUILD SUCCESSFUL”, you can find the JAR file under the build/pbs directory.

Run the JAR file by using the command given here −

java –jar <JARFILE> 

Now, the apppcation has started on the Tomcat port 8080 as shown below −

Started Apppcation on Tomcat Port_8080

Now hit the URL in your web browser and you can see the output as shown −

http://localhost:8080/index

Spring Boot Thymleaf web Apppcation Advertisements