จัด UI Layout กับ Thymeleaf

จัด Layout ด้วย Thymeleaf-layout-dialect

  • ถ้าใครเคยเรียน Design Pattern มาสิ่งที่ thymeleaf ทำ คือ View แต่ละอันทำหน้าที่ของตัวเองพอ แสดง Content ในส่วนที่รับผิดชอบ ส่วนการจัดการพวกเมนู และอื่นๆ จะถูกเพิ่มความสามารถ(Declorate) เข้าไปจากตัว Layout ครับ
  • ตัว Design Pattern ที่ผมหมายถึง คือ Decorator pattern ครับ

มาดูโจทย์กันก่อน

  • เว็บปกติจะมีจุดที่มันมี Code ซ้ำ จะ Reuse ยังไง
  • ผมแยก 2 ส่วนนะครับ Header, Content และเพิ่ม Footer ตามรูปครับ

สิ่งที่ต้องมี

  • Spring Boot+Thymeleaf project
  • ตรวจสอบ Dependency ให้ดีต้องมี
    • thymeleaf
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
    • thymeleaf-layout-dialect
      <dependency>
         <groupId>nz.net.ultraq.thymeleaf</groupId>
         <artifactId>thymeleaf-layout-dialect</artifactId>
      </dependency>

Let’s Refactoring

  • สร้างโพลเดอร์ layouts ใน template ก่อนครับ วางโครงสร้างไว้ก่อน เช่น แยก Layout ของหน้าจอ User กับ Admin ครับ
  • สร้างไฟล์ในโพลเดอร์ layouts ชื่อ mainLayout.html  ครับ
    <!DOCTYPE html>
    
    <html xmlns:th="http://www.thymeleaf.org" 
          xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    
    <head th:replace="fragments/header :: header">
    <title>Header</title>
    </head>
    
    <body>
      <div class="container" id="mainContent">
        <div layout:fragment="content"></div>
      </div>
    
      <div th:replace="fragments/footer :: footer"></div>
    
    </body>
    
    </html>
    • สังเกตุดีๆครับ ว่าในแท๊ก <html>  ต้องมีการอ้างถึง xmlns:layout=”http://www.ultraq.net.nz/web/thymeleaf/layout”  ครับ เพื่อให้ Engine ของ Thymeleaf รู้ครับ
    • ตรงแท๊ก <head>  มีกำหนด header ไว้ครับ โดยจะอ้างอิงไฟล์ใน fragments/header  ครับ
    • ส่วนแท๊ก <div layout:fragment=”content”> เป็นช่องว่างๆครับ เอาไว้นำ html จากหน้าจออื่นๆ เช่น มาเสียบแทนครับ
    • ตรงแท๊ก <div>  มีกำหนด footer ไว้ครับ โดยจะอ้างอิงไฟล์ใน fragments/footer  ครับ
  • โครงสร้าง ณ ตอนนี้ครับ
    resources
    -> static 
       -> css - พวก CSS จะเก็บในนี้
          -> bootstrap.xxx.css ใส่ไฟล์เกี่ยวกับ bootstrap      
          -> person.css
       -> js - พวก javascript จะเก็บไว้ในนี้   
          -> bootstrap.xxx.js ใส่ไฟล์เกี่ยวกับ bootstrap
    -> templates
       -> fragments 
          -> header.html 
          -> footer.hmtl
       -> layouts
          -> mainLayout.html (เพิ่มเข้ามาใหม่)
       -> person
          -> persons.html
          -> editPerson.html
          -> viewPerson.html
       -> owner.html
    -> index.html
  • มาแก้ไขไฟล์อื่นๆครับ ยกตัวอย่างเฉพาะของ
    • header อันนี้มีการเพิ่ม th:fragment=”header”  เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์ mainLayout.html ครับ ในส่วน header
    • footer อันนี้มีการเพิ่ม th:fragment=”footer”  เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์ mainLayout.html ครับ ในส่วน footer
    • editPerson มีการเพิ่ม layout:fragment=”content”  เพื่อบอก Script ภายใต้แท๊กที่สนใจถูกเอาไปแทนในไฟล์ mainLayout.html ครับ ในส่วน content

CREDIT: https://naiwaen.debuggingsoft.com/2018/09/spring-%E0%B8%A1%E0%B8%B2%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%94-layout-%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%81%E0%B8%B1%E0%B8%9A-ui-thymeleaf-%E0%B8%84%E0%B8%A3%E0%B8%B1%E0%B8%9A/