Apache Tiles là một template engine mã nguồn mở được sử dụng cho các ứng dụng web trong Java. Nó cho phép chúng ta sử dụng lại các thành phần chung giữa các trang trong ứng dụng web của chúng ta. Trong bài viết này, mình sẽ hướng dẫn các bạn sử dụng Apache Tiles trong Spring MVC các bạn nhé!
Mình sẽ tạo một project Spring MVC như sau:
Bạn nào chưa biết cách tạo project Spring MVC thì có thể tham khảo bài viết này nhé!
Ở đây, mình nâng phiên bản của các thư viện lên phiên bản mới nhất hết.
|
1 2 3 4 5 6 |
<properties> <java-version>1.8</java-version> <org.springframework-version>4.3.3.RELEASE</org.springframework-version> <org.aspectj-version>1.8.9</org.aspectj-version> <org.slf4j-version>1.7.21</org.slf4j-version> </properties> |
Tiếp theo, mình sẽ thêm dependency của Apache Tiles vào trong project.
|
1 2 3 4 5 6 |
<!-- Apache Tiles --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-jsp</artifactId> <version>3.0.7</version> </dependency> |
Trước khi bắt đầu, mình sẽ sửa tập tin home.jsp trong thư mục src/main/webapp/WEB-INF/views một xíu để các bạn dễ hình dung lợi ích của việc dùng Apache Tiles nhé!
Nội dung của tập tin home.jsp của mình giờ như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ page session="false"%> <html> <head> <title>Home</title> </head> <body> <h1>Apache Tiles and Spring Integration!!!</h1> <label>Content</label> <P>Copyright by Huong Dan Java</P> </body> </html> |
Bây giờ, mình sẽ chạy ứng dụng này sử dụng Maven Jetty Plugin, kết quả như sau:
OK, bây giờ mình bắt đầu sử dụng Apache Tiles nhé!
Yêu cầu của ứng dụng là chúng ta chỉ giữ tiêu đề “Apache Tiles and Spring Integrations!!!” và chữ “Copyright by Huong Dan Java“, còn phần content có thể thay đổi giữa các trang với nhau. Vây giờ chúng ta sẽ làm thế nào đây?
Có 3 bước chúng ta cần làm để có thể sử dụng Apache Tiles trong ứng dụng của chúng ta, đó là:
- Bước đầu tiên là chúng ta phải định nghĩa cấu hình layout cho Apache Tiles.
Để làm được điều này, trước tiên mình sẽ chỉnh sửa lại thư mục views trong project của mình một xíu. Mình sẽ tạo một tập tin mới tên là layout.jsp nằm trong thư mục src/main/webapp/WEB-INF/views với nội dung gần giống với nội dung của tập tin home.jsp nhưng có chỉnh sửa để thêm các thuộc tính của Apache Tiles. Nội dung của tập tin layout.jsp như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <%@ page session="false"%> <html> <head> <title>Home</title> </head> <body> <h1>Apache Tiles and Spring Integration!!!</h1> <tiles:insertAttribute name="content" /> <P>Copyright by Huong Dan Java</P> </body> </html> |
Trong tập tin layout.jsp, nếu để ý các bạn sẽ thấy mình đã khai báo một taglib của Apache Tiles để có thể sử dụng thẻ tiles:insertAttribute. Thẻ này có tác dụng tùy theo trang thì nội dụng của tập tin nào được khai báo với name là content sẽ được sử dụng để hiển thị trên giao diện.
Tập tin layout.jsp giống như một cái sườn, tùy theo trang mà nó sẽ có nội dung khác nhau nhưng vẫn có những phần giống nhau.
Còn tập tin home.jsp, mình sẽ chỉnh sửa lại để nội dung của nó chỉ còn như sau:
|
1 |
<label>Content</label> |
OK, bây giờ mình sẽ tạo một tập tin để cấu hình layout cho Apache Tiles. Các bạn hãy tạo một tập tin có tên là tiles.xml nằm trong thư mục src/main/webapp/WEB-INF/ nhé
Và hãy thêm nội dung cho tập tin tiles.xml như sau;
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd"> <tiles-definitions> <definition name="baselayout" template="/WEB-INF/views/layout.jsp"> <put-attribute name="content" value="" /> </definition> <definition name="home" extends="baselayout"> <put-attribute name="content" value="/WEB-INF/views/home.jsp" /> </definition> </tiles-definitions> |
Các bạn thấy đó, trong tập tin này mình đã định nghĩa một baselayout, là cái sườn với nội dung từ tập tin layout.jsp. Và trang home của chúng ta sẽ extends từ baselayout này, với nội dung của thuộc tính content sẽ được lấy từ nội dung của tập tin home.jsp.
Cũng dể hiểu phải ko các bạn!
OK, giờ chúng ta sẽ chuyển sang bước thứ hai nhé.
- Ở bước thứ hai này, chúng ta sẽ khai báo một bean của Apache Tiles để load cấu hình mà chúng ta vừa định nghĩa trong tập tin tiles.xml lên.
Các bạn hãy mở tập tin servlet-context.xml và thêm những dòng sau nhé:
|
1 2 3 4 5 6 7 |
<beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer"> <beans:property name="definitions"> <beans:list> <beans:value>/WEB-INF/tiles.xml</beans:value> </beans:list> </beans:property> </beans:bean> |
- Bước cuối cùng là chúng ta sẽ thay thế ViewResolver mặc định sang ViewResolver của Apache Tiles các bạn nhé
Các bạn cũng mở tập tin servlet-context.xml rồi thay:
|
1 2 3 4 5 |
<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory --> <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <beans:property name="prefix" value="/WEB-INF/views/" /> <beans:property name="suffix" value=".jsp" /> </beans:bean> |
thành
|
1 2 3 |
<beans:bean class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" /> </beans:bean> |
OK, vậy là chúng ta đã hoàn thành việc sử dụng Apache Tiles trong Spring MVC rồi đó các bạn. Bây giờ, nếu chạy lại các bạn cũng sẽ thấy giao diện như cũ.
Bây giờ, để thêm mới trang login mình chỉ cần làm những bước sau:
- Thêm request URL trong class HomeController.
|
1 2 3 4 |
@RequestMapping(value = "/login", method = RequestMethod.GET) public String login() { return "login"; } |
- Thêm tập tin login.jsp trong thư mục src/main/webapp/WEB-INF/views với nội dung như sau:
|
1 |
<label>Login</label> |
- Thêm cấu hình cho trang login trong tập tin cấu hình của Apache Tiles:
|
1 2 3 |
<definition name="login" extends="baselayout"> <put-attribute name="content" value="/WEB-INF/views/login.jsp" /> </definition> |
Kết quả:
Hung Pham
Không thấy source code bài này trong github của bạn nhỉ
Hoàng Võ
cảm ơn nhiều