Show Hello World by Thymeleaf in Spring

#java #springboot #intellij #thymeleaf

Introduction

Thymeleaf is a template engine for java web development.
In this article, you'll be able to start up your Spring Boot application and show a message on your browser.

IDE

You can use either IntelliJ, Eclipse, or STS.

Source Code

You can refer to the source code below.
It used Maven as a project management tool.
https://github.com/yoshi-koyama/introduction-to-thymeleaf

Initialize the project.

You can create your project by using your IDE.
You can also generate your project on the following website.
https://start.spring.io/

You can download a zip file.

Dependencies

pom.xml (Maven) dependencies look like this.

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  <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>
    <exclusions>
      <exclusion>
        <groupId>org.junit.vintage</groupId>
        <artifactId>junit-vintage-engine</artifactId>
      </exclusion>
    </exclusions>
  </dependency>
</dependencies>

build.gradle (Gradle) dependencies look like this.

dependencies {
  implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
  implementation 'org.springframework.boot:spring-boot-starter-web'
  testImplementation('org.springframework.boot:spring-boot-starter-test') {
    exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
    }
}

Create controller

Open the project by your IDE.
And fine the base package com.example.demo.
Under the demo package, please create a controller package and HomeController.

Edit HomeController like this.

package com.example.demo.controller;

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

@Controller
public class HomeController {

    @GetMapping("/")
    public String hello(){
        return "hello";
    }
}

Create HTML file

Under src/main/resources directory, you can find templates directory.

Create hello.html under templates directory.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Demo Project</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Run server

Just run the server and navigate to http://localhost:8080/

You can see this on your browser!

Set the message on the controller

The th:text=”${attributename}” tag attribute is used to display the value of model attributes.

Please add message() method in HomeController like this.

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String hello(){
        return "hello";
    }

    @GetMapping("/message")
    public String message(Model model) {
        model.addAttribute("message", "This is a custom message");
        return "message";
    }
}

And you also need to create a new HTML file named message.html.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Demo Project</title>
</head>
<body>
    <h1 th:text="${message}"></h1>
</body>
</html>