Sign in Subscribe
By Thisara Priyamal in Spring Boot —

Spring Boot Thymeleaf එකට | Server-Side Rendering SC Guide

Spring Boot Thymeleaf එකට | Server-Side Rendering SC Guide

ආයුබෝවන්! කොහොමද යාලුවනේ? අද අපි කතා කරන්න යන්නේ මේ දවස්වල Software Engineering ලෝකේ හරිම ජනප්‍රිය වෙලා තියෙන දෙයක් ගැන – ඒ තමයි Spring Boot එක්ක Thymeleaf පාවිච්චි කරලා කොහොමද සුපිරි Web Application එකක් හදාගන්නේ කියලා. Spring Boot කියන්නේ Java developersලාට Backend APIs හදන්න තියෙන ටොප්ම Framework එකක්නේ. ඒත් Web App එකක් කියන්නේ Frontend එකකුත් තියෙන්න එපැයි. අන්න එතනට තමයි Thymeleaf එන්නේ. මේක Server-Side Rendering (SSR) කරන Template Engine එකක්. ඒ කියන්නේ, අපේ Backend එකෙන්ම HTML pages හදලා Browser එකට යවනවා. මේ දෙක එකතු උනාම වැඩේ කොච්චර ලේසි වෙනවද, වේගවත් වෙනවද කියලා අපි බලමු. ඔයාලත් මේ දේවල් ඉගෙනගන්න ආසාවෙන් ඇති කියලා මම හිතනවා. එහෙනම් වැඩේට බහිමු!

Thymeleaf කියන්නේ මොකක්ද?

Thymeleaf කියන්නේ Java applications වලට specially නිර්මාණය කරපු Server-Side Template Engine එකක්. ඒ කියන්නේ, මේකෙන් අපිට පුළුවන් Java code එකෙන් එන data පාවිච්චි කරලා HTML, XML, JavaScript, CSS, නැත්නම් text files generate කරන්න. JavaScript Frameworks (React, Angular, Vue) එන්න කලින් ගොඩක් අය මේ වගේ Server-Side Rendering engines තමයි පාවිච්චි කළේ. අදටත් SSR වලට මේක හරිම සුදුසුයි.

Thymeleaf වල තියෙන විශේෂත්වය තමයි "Natural Templating". ඒ කියන්නේ, ඔයා හදන Thymeleaf templates Browser එකේ Directly open කරලා බලන්න පුළුවන්. මොකද මේවා සාමාන්‍ය HTML files වගේමයි. ඒකෙන් Designersලටයි Developersලටයි එකට වැඩ කරන්න හරිම ලේසියි. Code එකක් run නොකරම Design එක බලන්න පුළුවන්.

තව දෙයක්, Thymeleaf කියන්නේ Spring Framework එකත් එක්ක හරිම හොඳට ගැලපෙන විදිහට හදලා තියෙන දෙයක්. Security, validation, internationalization වගේ දේවල් වලට හොඳ Support එකක් තියෙනවා.

Spring Boot Project එකක් Set කරගමු

මුලින්ම අපි Spring Boot Project එකක් හදාගමු. මේක හරිම ලේසියි Spring Initializr (start.spring.io) පාවිච්චි කරලා.

  1. Web Browser එක Open කරලා start.spring.io වලට යන්න.
  2. Project කියන තැන Maven Project තෝරන්න.
  3. Language එක Java තෝරන්න.
  4. Spring Boot Version එක 3.x (නවතම Stable Version එක) තෝරන්න.
  5. Project Metadata:
    • Group: com.example
    • Artifact: thymeleaf-demo (ඔයාට කැමති නමක් දෙන්න පුළුවන්)
    • Name: thymeleaf-demo
    • Description: Demo project for Spring Boot with Thymeleaf
    • Package Name: com.example.thymeleafdemo
    • Packaging: Jar
    • Java: 17 (නැත්නම් ඔයාගේ පරිගණකයේ Install කරලා තියෙන Version එක)
  6. Dependencies Add කරන්න. මේක තමයි වැදගත්ම කොටස:
    • Spring Web: Web applications හදන්න ඕන කරන Core dependencies මේකෙන් ලැබෙනවා.
    • Thymeleaf: අපේ Template Engine එක.
    • Spring Boot DevTools (Optional): මේකෙන් code change කරපු ගමන් application එක restart වෙනවා, ඒක නිසා development වලදි හරිම ලේසියි.
  7. "Generate" බොත්තම ක්ලික් කරන්න.
  8. Zip file එක Download කරලා, ඔයාගේ preferred IDE එක (IntelliJ IDEA, VS Code, Eclipse) එකේ Open කරගන්න.

ඔයාගේ pom.xml file එකේ මේ Dependencies තියෙනවද කියලා චෙක් කරගන්න:

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
        <optional>true</optional>
    </dependency>
    <!-- Test dependencies are also important but omitted for brevity -->
</dependencies>

Thymeleaf Controller එකක් හදමු

දැන් අපි Controller එකක් හදමු. මේක තමයි Request එකක් ආවම ඒකට අදාළ Thymeleaf Template එක Load කරන්නේ. src/main/java/com/example/thymeleafdemo කියන folder එක ඇතුළේ HomeController.java කියලා file එකක් හදාගන්න.

package com.example.thymeleafdemo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Arrays;
import java.util.List;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "නවතම Software Development Trends!");
        model.addAttribute("welcomeMessage", "Spring Boot සහ Thymeleaf සමඟින් Web Development ඉගෙන ගනිමු!");

        List<String> features = Arrays.asList(
            "Spring Boot Setup",
            "Thymeleaf Integration",
            "Server-Side Rendering",
            "Dynamic Content Generation",
            "Error Handling"
        );
        model.addAttribute("features", features);

        return "index"; // This refers to src/main/resources/templates/index.html
    }

    @GetMapping("/about")
    public String about(Model model) {
        model.addAttribute("appName", "Thymeleaf Demo App");
        model.addAttribute("version", "1.0.0");
        return "about"; // This refers to src/main/resources/templates/about.html
    }
}

මෙහිදී, @Controller annotation එකෙන් කියන්නේ මේ class එක Spring MVC Controller එකක් කියලා. @GetMapping("/") කියන්නේ Root URL (/) එකට Request එකක් ආවම home() method එක execute වෙනවා කියලා. Model object එකෙන් අපිට පුළුවන් Backend එකෙන් Frontend (Thymeleaf template) එකට data pass කරන්න. return "index"; කියන එකෙන් කියන්නේ src/main/resources/templates/index.html කියන Template එක Render කරන්න කියලා.

අපේ පළමු Thymeleaf Template එක

දැන් අපි index.html කියන Thymeleaf Template එක හදමු. මේක හදන්න ඕනේ src/main/resources/templates කියන folder එක ඇතුළේ. මේ folder එක නැත්නම් හදාගන්න.

<!DOCTYPE html>
<html lang="si" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${welcomeMessage}"></title>
    <style>
        body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; color: #333; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { color: #0056b3; }
        p { line-height: 1.6; }
        ul { list-style-type: none; padding: 0; }
        li { background-color: #e9ecef; margin-bottom: 8px; padding: 10px 15px; border-radius: 5px; }
        a { color: #007bff; text-decoration: none; }
        a:hover { text-decoration: underline; }
        .footer { margin-top: 30px; text-align: center; color: #666; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="container">
        <h1 th:text="${welcomeMessage}"></h1>
        <p>
            <span th:text="${message}"></span>
            Thymeleaf කියන්නේ කොච්චර සුපිරි Template Engine එකක්ද කියලා මේකෙන් ඔයාලට තේරෙයි.
            අපේ Server-Side Rendering concept එක පටන්ගමු.
        </p>

        <h2>අද අපි කතා කරන දේවල්</h2>
        <ul>
            <li th:text="${'1. Spring Boot Project එකක් හදාගැනීම'}"></li>
            <li th:text="${'2. Thymeleaf Dependency එක එකතු කිරීම'}"></li>
            <li th:text="${'3. Controller එකක් හරහා Data Template එකට යැවීම'}"></li>
            <li th:text="${'4. Thymeleaf Syntax පාවිච්චි කිරීම'}"></li>
        </ul>

        <h3>අපේ App එකේ Features</h3>
        <ul>
            <li th:each="feature : ${features}" th:text="${feature}"></li>
        </ul>

        <h3>වැඩි විස්තර:</h3>
        <p>
            Thymeleaf වල තියෙන තවත් ලස්සනම දෙයක් තමයි මේක සාමාන්‍ය HTML වලට හරිම කිට්ටුයි.
            ඒ නිසා ඔයාලට Design කරන එක කිසි අමාරුවක් වෙන්නේ නෑ.
            ඕනෙම Browser එකක මේ HTML file එක Directly Open කරලා බලන්න පුළුවන්.
        </p>

        <a th:href="@{/about}">About Us</a>

        <div class="footer">
            <p>&copy; 2024 SC Guide. All rights reserved.</p>
        </div>
    </div>
</body>
</html>

xmlns:th="http://www.thymeleaf.org" කියන Namespace එක add කරන එක වැදගත්. මේකෙන් තමයි Thymeleaf syntax recognize කරන්නේ. th:text="${welcomeMessage}" වගේ expressions වලින් කියන්නේ Controller එකෙන් එන welcomeMessage කියන variable එකේ Value එක මේ Element එක ඇතුළට දාන්න කියලා. th:href="@{/about}" වගේ Url expressions වලින් Thymeleaf වලට පුළුවන් Application context එකට අනුව URL එක හදන්න.

Data Pass කරමු

අපි උඩ Controller එකේදි Model object එක පාවිච්චි කරලා data pass කළානේ.

model.addAttribute("message", "නවතම Software Development Trends!");
model.addAttribute("welcomeMessage", "Spring Boot සහ Thymeleaf සමඟින් Web Development ඉගෙන ගනිමු!");

මේකෙන් වෙන්නේ, message කියන Key එකට "නවතම Software Development Trends!" කියන Value එකත්, welcomeMessage කියන Key එකට "Spring Boot සහ Thymeleaf සමඟින් Web Development ඉගෙන ගනිමු!" කියන Value එකත් Controller එකේ ඉඳන් Thymeleaf Template එකට යවන එක. Thymeleaf Template එකේදී අපි ඒ values th:text="${message}" වගේ Syntax එකකින් ගන්නවා. $ ምልክණයෙන් කියන්නේ variable එකක් කියලා.

දැන් අපි තව පොඩි දෙයක් බලමු. List එකක් template එකට යවන හැටි. අපි ඒකත් Controller එකේ අලුතින් add කළා.

List<String> features = Arrays.asList(
    "Spring Boot Setup",
    "Thymeleaf Integration",
    "Server-Side Rendering",
    "Dynamic Content Generation",
    "Error Handling"
);
model.addAttribute("features", features);

th:each="feature : ${features}" කියන එකෙන් කියන්නේ features කියන List එකේ හැම Element එකක්ම feature කියන variable එකට assign කරලා ඒ හැම එකකටම අලුත් <li> Element එකක් හදන්න කියලා. ඊට පස්සේ th:text="${feature}" වලින් ඒ <li> Element එක ඇතුලට feature එකේ value එක දානවා. මේක Collection එකක් Iterate කරන්න හරිම ලේසි ක්‍රමයක්.

අපි /about URL එකට අදාළ about.html template එකත් හදාගමු. මේකත් src/main/resources/templates එකේම හදන්න.

<!DOCTYPE html>
<html lang="si" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${appName} + ' - About Us'"></title>
    <style>
        body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; color: #333; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { color: #0056b3; }
        p { line-height: 1.6; }
        a { color: #007bff; text-decoration: none; }
        a:hover { text-decoration: underline; }
        .footer { margin-top: 30px; text-align: center; color: #666; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="container">
        <h1 th:text="${appName}"></h1>
        <p>
            මේක Spring Boot සහ Thymeleaf පාවිච්චි කරලා හදපු සරල Web Application එකක Demo එකක්.
            අපේ අරමුණ තමයි Developersලාට Server-Side Rendering වල පහසුව තේරුම් කරලා දෙන එක.
        </p>
        <p>Application Version: <span th:text="${version}"></span></p>

        <a th:href="@{/}">Go to Home</a>

        <div class="footer">
            <p>&copy; 2024 SC Guide. All rights reserved.</p>
        </div>
    </div>
</body>
</html>

Application එක Run කරමු

දැන් ඔක්කොම හරි. ඔයාගේ IDE එකෙන් Main Application class එක Run කරන්න. නැත්නම් Terminal එකේදී Project folder එකට ගිහින් මේ command එක Run කරන්න:

./mvnw spring-boot:run   # Linux/macOS
mvnw spring-boot:run     # Windows

Application එක Start උනාට පස්සේ, ඔයාගේ Web Browser එක Open කරලා http://localhost:8080 කියන URL එකට යන්න. එතකොට ඔයාට අපේ index.html Template එක Controller එකෙන් ආපු Data එක්ක පෙනෙයි. http://localhost:8080/about වලට ගියාම about.html එකත් බලන්න පුළුවන්.

අවසානය

ඉතින් යාලුවනේ, අද අපි Spring Boot එක්ක Thymeleaf පාවිච්චි කරලා කොහොමද Server-Side Rendered Web Application එකක් හදාගන්නේ කියලා ඉගෙනගත්තා. Thymeleaf වල "Natural Templating" පහසුව, Spring Framework එකත් එක්ක තියෙන සුපිරි Integration එක, වගේම Dynamic content generate කරන හැටි ගැන ඔයාලට අදහසක් එන්න ඇති කියලා මම හිතනවා.

මේක ඉතාම සරල උදාහරණයක් වුනත්, මේ Concepts ටික හරියට තේරුම් ගත්තොත් ඔයාලට ඕනම Complex Web App එකක් Thymeleaf වලින් හදන්න පුළුවන්. Database එකක් Connect කරලා, Form Submissions Handle කරලා, User Management Systems වුනත් මේ විදිහට හදන්න පුළුවන්.

මතක තියාගන්න, Practice කරන එක තමයි වැදගත්ම දේ. මේ Post එකේ තියෙන code ටික ඔයාලගේම IDE එකක ට්‍රයි කරලා බලන්න. පොඩි පොඩි Changes කරලා බලන්න. එතකොට තමයි හොඳටම ඉගෙනගන්න පුළුවන්.

මේ Post එක ගැන ඔයාලගේ අදහස්, ප්‍රශ්න පහලින් Comment section එකේ දාන්න. අපිට පුළුවන් උදව් කරන්න අපි කැමතියි. එහෙනම් තවත් අලුත් දෙයක් එක්ක ඉක්මනින්ම හම්බවෙමු! ජය වේවා!

Previous

Java Development Setup | JDK Install | IDE Setup | Sinhala Guide | ආරම්භකයාට

 Next

Thymeleaf Forms Sinhala Guide | ඔබේ Web App වලට Forms හදන්න - Sri Lanka

You might also like...