Tiles Plugin trong Struts Framework (Struts Framework-Phần 4)

Trong phần 4 của chuỗi bài viết về Struts Framework chúng ta sẽ tìm hiểu về Tiles Framework và các tích hợp nó vào Struts. Chúng ta sẽ thêm Title và ứng dụng đăng nhập mà chúng ta đã xây dựng ở các phần trước.

Giới thiệu về Tiles

   Ngày nay giao diện trang web thường được chia ra thành nhiều phần và các thành phần này có thể sử dụng lại giữa các trang web khác nhau. Ví dụ , một website chứa các thành phần : header, footer, menu, top... Các thành phần này cùng ý nghĩa khi ở nhiều trang web khác nhau. Rất khó khăn để làm cố định code của
từng trang , và nếu sau này có 1 sự thay đổi nào thì tất cả cá trang đều phải thay đổi. Do đó chúng ta sử dụng cơ chế templatization, chúng ta tạo ra một Header, Footer, Menu chung và đưa chúng vào từng trang.

   Plugin Tiles cho phép cả templating và componentization. Trên thực tế cả hai cơ chế đều tương tự nhau : Bạn xác định các thành phần trong một trang (Một Tile) mà bạn rạo lại để xây dưng một phần hoặc toàn bộ trang. Một phần có thể có các thông số, cho phép nội dung động, và có thể được xem như một phương thức trong Java. Tiles là một hệ thống khuôn mẫu được sử dụng để duy trì một giao diện nhất quán cho tất cả các trang của ứng dụng web. Khi có thêm các trang mới có thể dùng lại mẫu và làm giảm sự trùng lặp code.

   Một cách bố trí giao diện phổ biến của các website được định nghĩa trong một file cấu hình trung tâm và giao diện này có thể được kế thừa trên tất cả các trang web của ứng dụng web.

Bắt đầu tạo giao diện ứng dụng

Mục tiêu của chúng ta là thêm Header, Footer và Menu vào ứng dụng LoginPageWithStruts của chúng ta. Cách bố trí các thành phần như sau :

Các file thư viện (Jar) cần thiết

Để thêm Tiles cho ứng dụng Struts , chúng ta cần một số file jar , sau đây là danh sách các file JAR cần cho ví dụ này, bạn cần add chúng vào thư mục WEB-INF/lib

Cấu hình Tiles trong file web.xml

Để cấu hình Tiles , một mục cho listener phải được tạo trong web.xml. Mở file web.xml trong thư mục WEB-INF và thêm đoạn code sau vào giữa 2 thẻ <web-app> </web-app>:

<listener>     <listener-class>         org.apache.struts2.tiles.StrutsTilesListener     </listener-class> </listener> <context-param>     <param-name>tilesDefinitions</param-name>     <param-value>/WEB-INF/tiles.xml</param-value> </context-param>

Một file cấu hình input  /WEB-INF/tiles.xml được khai báo ở trên như một đối số. File này chứa các định nghĩa xác định Tiles cho ứng dụng của chúng ta:

Tạo một file tiles.xml trong thư mục WEB-INF và copy nội dung sau vào đó:

<?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="baseLayout" template="/BaseLayout.jsp">         <put-attribute name="title" value="" />         <put-attribute name="header" value="/Header.jsp" />         <put-attribute name="menu" value="/Menu.jsp" />         <put-attribute name="body" value="" />         <put-attribute name="footer" value="/Footer.jsp" />     </definition>     <definition name="/welcome.tiles" extends="baseLayout">         <put-attribute name="title" value="Welcome" />         <put-attribute name="body" value="/Welcome.jsp" />     </definition>     <definition name="/customer.tiles" extends="baseLayout">         <put-attribute name="title" value="Customer Form" />         <put-attribute name="body" value="/Customer.jsp" />     </definition>     <definition name="/customer.success.tiles" extends="baseLayout">         <put-attribute name="title" value="Customer Added" />         <put-attribute name="body" value="/SuccessCustomer.jsp" />     </definition> </tiles-definitions>

Trong file tiles.xml chúng ta định nghĩa một template có tên là baseLayout. Giao diện này chứa các thông tính như : Header, Title, Body, Menu và Footer. Sau đó giao diện này sẽ được kế thừa và xác định giao diện cho các trang Welcome.jsp , Customer.jsp,  SuccessCustomer.jsp .

Tạo các trang JSP

Chúng ta sẽ định nghĩa template cho ứng dụng web trong một file JSP là BaseLayout.jsp. Template này sẽ chứa các phần khách nhau của trang web (Header, Footer, Menu ...) . Tạo 4 file JSP mới :  BaseLayout.jsp, Header.jsp, Menu.jsp và Footer.jsp trong thư mục WebContent :

BaseLayout.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><tiles:insertAttribute name="title" ignore="true" /></title> </head> <body> <table border="1" cellpadding="2" cellspacing="2" align="center">     <tr>         <td height="30" colspan="2"><tiles:insertAttribute name="header" />         </td>     </tr>     <tr>         <td height="250"><tiles:insertAttribute name="menu" /></td>         <td width="350"><tiles:insertAttribute name="body" /></td>     </tr>     <tr>         <td height="30" colspan="2"><tiles:insertAttribute name="footer" />         </td>     </tr> </table> </body> </html>

Header.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<h2>Struts2 With Tiles Plugin - Minhbangchu.blogspot.com</h2>

Menu.jsp

<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <s:a href="customer-form">Customer</s:a>

Footer.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

Copyright © Minhbangchu.blogspot.net

Chỉnh sửa file struts.xml

Trong file struts.xml chúng ta đã xác định các tag để map các action với một trang JSP. Bây giờ chúng ta sẽ thay đổi nó vào map các tag với Tiles. Sau đây là nội dung mới của struts.xml:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

    <constant name="struts.enable.DynamicMethodInvocation" value="false" />

    <constant name="struts.devMode" value="false" />

    <constant name="struts.custom.i18n.resources" value="ApplicationResources" />

    <package name="default" extends="struts-default" namespace="/">

        <result-types>

            <result-type name="tiles" class="org.apache.struts2.views.tiles.TilesResult" />

        </result-types>

        <action name="login" class="net.viralpatel.struts2.LoginAction">

            <result name="success" type="tiles">/welcome.tiles</result>

            <result name="error">Login.jsp</result>

        </action>

        <action name="customer" class="net.viralpatel.struts2.CustomerAction">

            <result name="success" type="tiles">/customer.success.tiles</result>

            <result name="input" type="tiles">/customer.tiles</result>

        </action>

        <action name="customer-form">

            <result name="success" type="tiles">/customer.tiles</result>

        </action>

    </package>

</struts>

Struts.xml bây giờ sẽ xác định các kiểu Result mới cho Tiles. Các kiểu result này được sử dụng trong tag <result> cho các action khác nhau. Lưu ý rằng chúng ta xác định một action mới là customer-form . Đây chỉ là một khai báo rỗng cho việc chuyển hướng người dùng tới trang Customer form khi người dùng click vào liên kết Customer trên menu.

Chạy thử ứng dụng

Bạn có thể download Source của ví dụ tại link sau nhé http://www.mediafire.com/?k1jc2y5sn1zg3