Làm việc với Thymeleaf trong lập trình Spring Boot Trong bài viết này, Stanford sẽ hướng dẫn bạn làm việc với những kiến thức quan trọng trong Thymeleaf sử dụng để trình bày giao diện trong dự án Spring Boot dành cho các bạn học lập trình java web. Trước khi làm việc với các thành phần trong Thymeleaf chúng ta cần tìm hiểu Thymeleaf là gì và có những ưu điểm gì so với những framework sử dụng để trình bày giao diện trong lập trình java web. Thymeleaf là gì ? Thymeleaf là một Java XML/XHTML/HTML5 Template Engine nó có thể làm việc với cả hai môi trường Web và môi trường không phải Web. Nó phù hợp hơn khi được sử dụng để phục vụ XHTML/HTML5 trên tầng View (View Layer) của ứng dụng Web dựa trên kiến trúc MVC. Nó có thể xử lý bất kỳ một file XML nào, thậm trí trên các môi trường offline (Không trực tuyến). Nó hỗ trợ đầy đủ để tương tác với Spring Framework. Mục tiêu chính của thymeleaf là mang lại các template tự nhiên, đồng nhất, đơn giản cho công việc phát triển. Các file mẫu (Template file) của Thymeleaf bản chất chỉ là một file văn bản thông thường, có định dạng XML/XHTML/HTML5. Thymeleaf Engine (Bộ máy Thymeleaf) sẽ đọc một file mẫu (template file) và kết hợp với các đối tượng Java để tạo ra (generate) một tài liệu khác. Thymeleaf có thể sử dụng để thay thế cho JSP trên tầng View (View Layer) của ứng dụng Web MVC. Thymeleaf là phần mềm mã nguồn mở, được cấp phép theo giấy phép Apache 2.0. Một số ưu điểm của Thymeleaf Với thymeleaf, ta chỉ cần sử dụng file HTML là có thể hiển thị tất cả mọi thứ (không cần jsp …). Thymealeaf sẽ tham gia vào renderd các file HTML dưới dạng các thuộc tính trong các thẻ HTML –> do đó ta không cần phải thêm bất kỳ thẻ non-HTML nào. Bản chất Thymeleaf là HTML nên ta có thể xem các file view mà không cần khởi chạy server. Thymeleaf hỗ trợ cơ chế cache, do đó ta có thể cache dữ liệu hoặc custom để hiển thị view khi có thay đổi mà không cần restart server. Tạo dự án Spring Boot sử dụng Thymeleaf Trước khi làm việc với các thành phần trong Thymeleaf trong lập trình Spring boot, bạn cần tạo dự án và khai báo sử dụng Thymeleaf như sau: - Bước 1: Tạo dự án Spring Boot sử dụng bộ máy hiển thị dùng Thymeleaf trong Intellij IDEA. Chọn menu File => New Project => Chọn tab Spring Boot và điền các thông tin như hình dưới: Nhấn nút Next để tiếp tục thực hiện công việc tạo dự án. Bạn chọn các mục: Spring Boot DevTools, Spring Web, Thymeleaf như hình dưới: Nhấn nút Create để hoàn thành việc tạo dự án Spring Boot sử dụng với Thymeleaf. - Bước 2: Kiểm tra hoặc Khai báo thư viện Thymeleaf trong file gradle để sử dụng trong dự án đã có thư viện thymeleaf như sau không: dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' developmentOnly 'org.springframework.boot:spring-boot-devtools' testImplementation 'org.springframework.boot:spring-boot-starter-test' testRuntimeOnly 'org.junit.platform:junit-platform-launcher' } - Bước 3: Tạo một trang web định dạng html và khai báo cú pháp như sau để sử dụng Thymeleaf trên trang web đó như sau: Làm việc với các thành phần Thymeleaf cơ bản 1. Biến trong thymeleaf: Cho phép hiển thị 1 thuộc tính của model hoặc thuộc tính của đối tượng HttpServletRequest chính là biến trong Thymeleaf. - th:text: Sử dụng để hiển thị nội dung text thuần túy - th:utext: Sử dụng hiển thị nội dung text, hỗ trợ dạng html Ví dụ: Chúng ta cần hiển thị 2 biến dữ liệu như nội dung trong hàm sau: @RequestMapping(value = "/thymeleafbasic", method = RequestMethod.GET) public String lamViecThymeleafBaic(Model model) { model.addAttribute("gioiThieu", "Chào mừng bạn đến với Thymeleaf !"); model.addAttribute("congTy", "Stanford - Dạy lập trình"); return "LamViecVoiThymeleaf"; } Khi đó trên giao diện sử dụng Thymeleaf để hiển thị thông tin 2 biến trên ta sử dụng cú pháp ${tên biến} như sau: Khi đó chạy chương trình sẽ được nội dung hiển thị trên trang web như sau: 2. Vòng lặp: Sử dụng để hiển thị dạng danh sách trong Thymeleaf. th:block là một thẻ ảo trong thymeleaf, không tương ứng với bất kỳ thẻ nào trong html. Sử dụng với each khi muốn tạo ra dạng danh sách. Ví dụ: Hiển thị danh sách sinh viên như sau: List<String> lstSinhVien = new ArrayList<String>(); lstSinhVien= Arrays.asList(new String[]{"Nam", "Hà", "Hưng", "Dũng", "Hưng", "Tuyết"}); Sử dụng Biến trạng thái (state) trong vòng lặp có các thuộc tính sau: index: Chỉ số hiện tại của phép lặp (iteration), bắt đầu với số 0. count: Số phần tử đã được xử lý cho tới hiện tại. size: Tổng số phần tử trong danh sách. even/odd: Kiểm tra xem chỉ số (index) hiện tại của phép lặp (iteration) là chẵn hay lẻ. first, last: Kiểm tra xem lần lặp đầu tiên hay cuối cùng. Hiển thị danh sách sinh viên ở trên với số thứ tự chúng ta sử dụng cú pháp sau: 3. Cấu trúc th:if, th:unless: Trong Thymeleaf, một biến hoặc một biểu thức nào đó được đánh giá là false (Sai) nếu giá trị của nó là null, false, 0, "false", "off", "no". Các trường hợp khác được đánh giá là true (Đúng). th:unless là phủ định của th:if Ví dụ: Đoạn code xử lý dưới đây sẽ thực hiện hiển thị danh sách sinh viên nếu có và hiển thị thông báo không có dữ liệu nếu danh sách rỗng 4. Sử dụng liên kết, tài nguyên js, css Trong thymeleaf để khai báo sử dụng file tài nguyên javascript và css bạn có thể sử dụng thẻ th: href và th: src như sau: <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/> <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script> <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script> Liên kết đến một trang web bên ngoài hoặc trong cùng hệ thống: <a th:href="@{/admin/sach/danhsach}" class="btn btn-primary">Trở về</a> 6. Sử dụng lớp css Để áp dụng lớp css định nghĩa trong trang web sử dụng thymeleaf bạn có thể sử dụng thẻ th: class, ví dụ như sau: <p th:class="moTa">Làm việc với Thymeleaf cơ bản trong Spring Boot</p> Trong đó moTa là một lớp css bạn định nghĩa trong trang web 6. Predefined Objects: Trong Thymeleaf có một vài đối tượng được định nghĩa sẵn. Có thể sử dụng chúng mọi nơi trong Thymeleaf Template, về cơ bản có 2 loại đối tượng như vậy đó là Các đối tượng cơ bản (Basic Objects), và các đối tượng tiện ích (Utility Objects): Các đối tượng được định nghĩa trước này sẽ được tham chiếu (reference) theo tiêu chuẩn OGNL, bắt đầu với ký hiệu ( # ). Basic Objects: #locale: Đối tượng #locale (java.util.Locale) cho bạn thông tin về môi trường mà ứng dụng đang hoạt động, chẳng hạn như khu vực địa lý, ngôn ngữ, văn hóa, kiểu định dạng số, kiểu định dạng ngày tháng và thời gian,... <h3>#locale.locale</h3> <span th:utext="${#locale.country}"></span> <h3>#locale.language</h3> <span th:utext="${#locale.language}"></span> #session: Sử dụng để lấy thông tin lưu trữ từ session trong ứng dụng web của bạn, ví dụ thông tin được lưu vào session như sau: @RequestMapping(value = "/thymeleafbasic", method = RequestMethod.GET) public String lamViecThymeleafBaic(Model model, HttpServletRequest request) { HttpSession session = request.getSession(true); session.setAttribute("userOnline", "stanfordpro"); return "LamViecVoiThymeleaf"; } Để lấy thông tin trên trang sử dụng session, bạn sử dụng cú pháp như sau: <span th:utext="${#session.getAttribute('userOnline ')}"></span> hoặc <h3 th:utext="${session.userOnline}"></h3> Utility Objects: #dates: Cung cấp các phương thức để định dạng đối tượng java.util.Date, hoặc lấy các thông tin liên quan như ngày, tháng, năm,.. <th:block th:with="now = ${#dates.createNow()}"> <span th:utext="${now}"></span> <span th:utext="${#dates.format( now , 'yyyy-MM-dd HH:mm:ss')}">Date String</span> <span th:utext="${#dates.year(now)}">Year</span> <span th:utext="${#dates.month(now)}">Month</span> </th:block> #numbers: Cung cấp các phương thức để định dạng các đối tượng số (Number). <th:block th:with="num = 1059834.98568"> <span th:utext="${num}">Number</span> <h4>${#numbers.formatInteger(num,3)}</h4> <span th:utext="${#numbers.formatInteger(num,3)}">Number</span> <h4>${#numbers.formatInteger(num,3,'POINT')}</h4> <span th:utext="${#numbers.formatInteger(num,3,'POINT')}">Number</span> <h4>${#numbers.formatDecimal(num,3,'POINT',2,'COMMA')}</h4> <span th:utext="${#numbers.formatDecimal(num,3,'POINT',2,'COMMA')}">Number</span> </th:block> Trong đó: - formatInteger(num,3): Hiển thị tối thiểu 3 số nguyên - POINT: Định dạng sau bao nhiêu số nguyên, ví dụ 3 số ngăn cách bằng dấu . hoặc , tùy theo khu vực - COMMA: Số lượng số sau dấu phẩy Các đối tượng khác: #strings: Sử dụng để làm việc với các hàm chuỗi trong java #arrays: Sử dụng để làm việc với các hàm trong mảng ##lists: Để làm việc với các hàm trong danh sách Hy vọng qua bài viết này sẽ giúp các bạn hiểu rõ hơn về thymeleaf để làm gì và làm quen với những cú pháp cơ bản trong thymeleaf được sử dụng trong lập trình java web với công nghệ Spring Boot. Bên cạnh đó nếu bạn đang muốn được đào tạo bài bản từ cơ bản đến nâng cao có thể tham gia ngay khóa học lập trình java fullstack cùng chuyên gia giàu kinh nghiệm Stanford tại đây: http://bit.ly/2SLPYFF và nhận ưu đãi hấp dẫn của Stanford trong thời gian này. Bạn có thể gọi theo hotline: 0963 723 236 - 0866 586 366 để được gọi lại tư vấn trực tiếp nhé. ============================= ☎ STANFORD – ĐÀO TẠO VÀ PHÁT TRIỂN CÔNG NGHỆ Hotline: 0963 723 236 - 0866 586 366 Website: https://stanford.com.vn Facebook: http://bit.ly/2FN0TYb Youtube: http://bit.ly/2TkKT7I Tags: thymeleaf là gì, làm việc với thymeleaf cơ bản, spring boot