2. Get start with Spring: Defining Template View & Static View on SpringBoot

2023-01-13 spring-study

Intro

This blog article aims to summarize or organize information that I’ve learned from Inflearn Lecture

Lecture does explain about SpringBoot using JAVA, but I am trying to organize information with my knowledge, especially comparing with ASP.NET Core(since ASP.NET Core is framework that I’m really familiar of.) and using Kotlin.

Key points of this article.

Welcome Page!(Static View)
Template && View Controller

Welcome Page

Brief Intro.

Spring Boot supports both static and templated welcome pages. It first looks for an index.html file in the configured static content locations. If one is not found, it then looks for an index template. If either is found, it is automatically used as the welcome page of the application.

So, that means spring does search index.html from Static Content Location($ROOT/src/main/resources/static), and search for index template if static content does not exists.(Search order is defined below.)

$ROOT/src/main/resources/static/index.html
$ROOT/src/main/resources/templates/index

Let’s write Welcome Page

Write code snippet on $ROOT/src/main/resources/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello, World!
<a href="/hello">Go to Hello Page</a>
</body>
</html>

Run Result

Template && View Controller

Brief Intro

Actually those lecture does defiend views using Thymeleaf engine templates. It looks really similar when we look at the overall architecture/code, comparing to Razor View Page. Just like server(Actually, View Controller) pushes data to view. Commonly, ‘Template’ engine replaces the data contained in the server according to each template language and displays it to the user.

Personally, I bet Razor Pages are little bit more comfortable though; We can write view code with backend language(a.k.a C#) but, really - Thymeleaf has their own template engine language..

Anyway, we can divide big two components in this section, just like two bullet points below.

Controller that returns data.
View(HTML + Template Engine) page.

Writing Template View

Write code on $ROOT/src/main/resources/templates/hello.html

The ${data} part of the code below is the data sent from the server (View Controller). In the example below, it is a simple String value.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="'Hello ' + ${data}">Hello!</p>
</body>
</html>

Defining Controller(controllers/HelloController.kt)

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

@Controller // 1. Yup, this class is the controller class.
class HelloController {
    @GetMapping("hello") // 2. When an HTTP GET request with "$HOST/hello" request comes in, the function is executed.
    fun hello(model: Model): String {
        model.addAttribute("data", "KangDroid") // 3. Put "KangDroid" to 'data'
        return "hello" // 4. resources/templates/hello.html
    }
}