Bộ sưu tập

Spring MVC và template framework Apache Tiles


https://codersontrang.com/2013/05/06/spring-mvc-va-template-framework-apache-tiles/

Apache Tiles là một template framework giúp tăng khả năng sử dụng lại các thành phần giao diện của ứng dụng web. Như cái tên template framework đã chỉ ra, Apache Tiles cho phép tạo một mẫu (template) bao gồm các mảnh thành phần có thể thay thế được. Việc tạo ra một giao diện cụ thể giờ đây chỉ đơn giản là sử dụng lại mẫu có sẵn sau đó thay thế các thành phần mà ta muốn tùy biến.

Tiles thực tế là một thành phần của Struts framework. Sau đó được tách ra thành một phần riêng biệt độc lập để có thể sử dụng với các framework khác. Chẳng hạn trong bài viết này sẽ hướng dẫn cách áp dụng Tiles trong ứng dụng web sử dụng Spring MVC.

Đầu tiên dùng Eclipse IDE để tạo một project có cấu trúc giống như hình dưới đây:

springmvcapachetiledemo_1

Các bộ thư viện cần có trong ứng dụng sẽ nằm ở trong thư mục lib giống như hình dưới đây:

springmvcapachetiledemo_2

Về nguyên lý của Spring MVC sẽ không được nhắc đến trong bài viết này. Để hiểu cụ thể hơn bạn đọc có thể quay trở lại bài viết “Giới thiệu về Spring MVC“. Nội dung của file web.xml sẽ giống như dưới đây:

web.xml

 <?xml version="1.0" encoding="UTF-8"?>  
 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
            xmlns="http://java.sun.com/xml/ns/javaee"   
            xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"   
            xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                                http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"   
            id="WebApp_ID" version="3.0">  

      <display-name>SpringMVCApacheTileDemo</display-name>  

      <servlet>  
           <servlet-name>springmvcapachetiledemo</servlet-name>  
           <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
           <load-on-startup>1</load-on-startup>  
      </servlet>  
      
      <servlet-mapping>  
           <servlet-name>springmvcapachetiledemo</servlet-name>  
           <url-pattern>/</url-pattern>  
      </servlet-mapping>  

 </web-app>  

Nội dung file cấu hình cho Spring sẽ như sau:

springmvcapachetiledemo-servlet.xml

 <?xml version="1.0" encoding="UTF-8"?>  
 <beans xmlns="http://www.springframework.org/schema/beans"  
      xmlns:context="http://www.springframework.org/schema/context"  
      xmlns:mvc="http://www.springframework.org/schema/mvc"  
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
      xsi:schemaLocation="  
     http://www.springframework.org/schema/mvc  
     http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd  
     http://www.springframework.org/schema/beans  
     http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  
     http://www.springframework.org/schema/context   
     http://www.springframework.org/schema/context/spring-context-3.0.xsd">  

      <context:component-scan base-package="springmvcapachetiledemo.controller" />  
      <mvc:annotation-driven/>  

      <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">  
        <property name="viewClass">  
          <value>  
            org.springframework.web.servlet.view.tiles3.TilesView  
          </value>  
        </property>  
      </bean>  

      <bean id="tilesConfigurer"  
        class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">  
        <property name="definitions">  
          <list>  
            <value>/WEB-INF/tiles.xml</value>  
          </list>  
        </property>  
      </bean> 
 
 </beans>  

Trong nội dung của file cấu hình, ta phải tạo một viewResolver với giá trị của thuộc tính viewClassTilesView để Spring có thể nhận biết rằng trong ứng dụng ta có sử dụng Tiles framework. Tiếp đó là khởi tạo một tilesConfigurer và chỉ ra vị trí của file cấu hình cho Tiles. Trong trường hợp này, file cấu hình nằm ở vị trí /WEB-INF/tiles.xml. Chút nữa ta sẽ nói kĩ hơn về nội dung của file cấu hình này.

Nội dung của controller sẽ như sau:

DemoController.java

 package springmvcapachetiledemo.controller;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.servlet.ModelAndView;  

 @Controller  
 public class DemoController {  
      @RequestMapping(value="/navigateToFirstPage")  
      public ModelAndView navigateToFirstPage(){  
           ModelAndView mav = new ModelAndView("first_page");  
           return mav;  
      }
  
      @RequestMapping(value="/navigateToSecondPage")  
      public ModelAndView navigateToSecondPage(){  
           ModelAndView mav = new ModelAndView("second_page");  
           return mav;  
      }  
 }  

Trong controller ta có hai phương thức là navigateToFirstPage()navigateToSecondPage() lần lượt xử lý các yêu cầu đến từ client và sau đó trả về các view có tên lần lượt tương ứng là “first_page” và “second_page“. Vậy các tên này được định nghĩa ở đâu để Spring có thể biết và chuyển tiếp đến trang hiển thị tượng ứng? Câu trả lời là nó được định nghĩa trong file cấu hình tiles.xml mà ta đã nhắc đến ở trên.

tiles.xml

 <?xml version="1.0" encoding="UTF-8" ?>  
 <!DOCTYPE tiles-definitions PUBLIC  
     "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"  
     "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">  

 <tiles-definitions>  

   <definition name="template.mytemplate" template="/WEB-INF/jsp/layout.jsp" >  
     <put-attribute name="header" value="/WEB-INF/jsp/header.jsp" />  
     <put-attribute name="content" value="" />  
     <put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp" />  
   </definition>  

   <definition name="first_page" extends="template.mytemplate">  
     <put-attribute name="content" value="/WEB-INF/jsp/firstPageContent.jsp" />  
   </definition>  

   <definition name="second_page" extends="template.mytemplate">  
     <put-attribute name="content" value="/WEB-INF/jsp/secondPageContent.jsp" />  
   </definition>  

 </tiles-definitions>  

Trong file tiles.xml, các thông tin để định nghĩa các view sẽ nằm hoàn toàn trong này. Đầu tiên là ta định nghĩa một template bằng cách dùng thẻ <definition>, template này có thể được sử dụng trong định nghĩa của các view khác nhau. Như trong ví dụ này ta định nghĩa một template có tên là template.mytemplate, bản chất là một trang jsp có tên là layout.jsp. Bên trong nội dung file layout.jsp, ta lại chia nhỏ ra thành các phần mà ta nghĩ nó có thể bị thay đổi trong các view khác nhau. Cụ thể hơn, trong trường hợp này ta có ba phần có tên là header, content, và footer. Việc đặt nội dung hiển thị vào một phần ở trên sẽ được thực hiện bằng cách dùng thẻ <put-attribute> cộng với việc chỉ ra giá trị thuộc tính name là tên của phần đó và thuộc value là một trang .jsp chứa nội dung hiển thị của phần đó. Như ở trên, trong template, nội dung của các phần header, footer lần lượt là các file header.jsp, footer.jsp.

Sau khi có một template, việc tiếp theo là định nghĩa các view. Đây là lúc mà ta định nghĩa hai view có tên là “first_page” và “second_page” đã nhắc đến ở trên. Việc định nghĩa một view chỉ đơn giản là kế thừa từ template bằng cách chỉ ra tên của template trong thuộc tính extends của thẻ <definition>. Tiếp đó là tùy chỉnh những phần nội dung của riêng view đó, chẳng hạn như nội dung phần content của hai view “first_page” và “second_page” sẽ khác nhau, lần lượt là các file firstPageContent.jspsecondPageContent.jsp.

Quay trở lại file layout.jsp, ta tìm hiểu cách làm sao để định nghĩa ra các phần header, content, footer trong file này. Nội dung của file layout.jsp sẽ như sau:

layout.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
 <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>  
 <html>  
 <head>  
      <title>Spring MVC Apache Tile Demo</title>  
      <style type="text/css">  
           .main_wrapper{  
                width: 500px;  
           }  
           .main_wrapper .header,   
           .main_wrapper .footer{  
                border: 5px solid blue;  
           }  
           .main_wrapper .content{  
                border: 5px solid green;   
                color: red;  
                margin: 10px 0px;  
           }  
      </style>  
 </head>  
 <body>  
      
</div> </body> </html>

Ta sử dụng thẻ <tiles:insertAttribute> với thuộc tính name để chỉ ra vị trí của các phần trong trang jsp. Ở đây thẻ <tiles:insertAttribute> có nhiệm vụ đánh dấu, trong quá trình biên dịch, các thẻ này sẽ được thay thế bởi nội dung tương ứng đã được định nghĩa trong file cấu hình tiles.xml.

Dưới đây là nội dung của các file header.jsp, footer.jsp, firstPageContent.jspsecondPageContent.jsp

header.jsp

 <h3>The content of common header</h3>  

footer.jsp

 <h3>The content of common footer</h3>  

firstPageContent.jsp

 <h3>The content of FIRST page</h3>  

secondPageContent.jsp

 <h3>The content of SECOND page</h3>  

Khi chạy ứng dụng web, ta lần lượt gõ đường dẫn /navigateToFirstPage/navigateToSecondPage, ta sẽ được server trả về hai view lần lượt là first_pagesecond_page. Hai view này hiển thị giống nhau về nội dung phần headerfooter (phần có khung màu xanh lam) vì chúng cùng kế thừa từ template, chỉ có nội dung phần content (phần có khung màu xanh lục) là khác nhau do việc ta tùy biến trong quá trình định nghĩa các view này.

Hiển thị của view first_page
springmvcapachetiledemo_3

Hiển thị của view second_page
springmvcapachetiledemo_4

Như vậy, ta có thể thấy được, với việc sử dụng Tiles framework, ta được cung cấp khả năng để sử dụng lại các thành phần hiển thị trong ứng dụng web. Giống như ở ví dụ trên, thay vì tạo ra 100 view ta phải copy lại 100 lần phần headerfooter giống nhau, giờ đây ta chỉ cần đưa chúng vào template, và đối với mỗi view ta kế thừa từ template này sau đó tùy biến những phần nội dung của riêng chúng. Quả thật, công sức mà chúng ta bỏ ra cũng được giảm đi đáng kể trong quá trình phát triển cũng như bảo trì ứng dụng.

Good luck!

Advertisements

6 comments on “Spring MVC và template framework Apache Tiles

  1. Pingback: Spring framework 5 phiên bản mới có gì vui | Coder Sơn Trang

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s