Struts Tiles Tutorial

Meyyappan Muthuraman

Jun. 15, 12 · Tutorial

Like (3)

Save

130.07K Views

Tiles is used to create reusable presentation components. With Tiles, we first define a base layout with different sections after that we define which jsp page should fill in the corresponding regions in an exteranl configuration file. The same layout can be reused any number of times by specifying different jsp pages.

To use Tiles in the Struts application, we need to add the following <plug-in> definition to the struts-config.xml file.

<plug-in className="org.apache.struts.tiles.TilesPlugin" >
    <set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" />
    <set-property property="moduleAware" value="true" />
</plug-in>

There are two ways in which you can specify the Tiles definition and their attributes. One is using JSP Tile Definition and the other way is using XML Tile Definition.

All JSP pages that uses Tiles should have the following taglib extension.

<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

Lets first design the base layout page using tiles. The base layout page is a normal jsp page, which defines different sections. A region is defined using the <tiles:insert> tag. The attribute value hold the name of the region.

The layout shown above can be created using the following code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:getAsString name="title" ignore="true" /></title>
</head>
<body>
    <table border="1" cellpadding="2" cellspacing="2" align="center">
        <tr>
            <td height="20%" colspan="2">
            	<tiles:insert attribute="header" ignore="true" />
            </td>
        </tr>
        <tr>
            <td width="20%" height="250">
            	<tiles:insert attribute="menu" />
            </td>
            <td>
            	<tiles:insert attribute="body" />
            </td>
        </tr>
        <tr>
            <td height="20%" colspan="2">
            	<tiles:insert attribute="footer" />
            </td>
        </tr>
    </table>
</body>
</html>

If the ignore attribute is set to true, then that region is optional. Even if the attribute is not specified the code will work fine.

To create our home page we need to insert title, header, menu, body and footer jsp pages. The following code is used to create our home page.

<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<tiles:insert page="/baseLayout.jsp" flush="true">
    <tiles:put name="title" value="Tiles Example" />
    <tiles:put name="header" value="/header.jsp" />
    <tiles:put name="menu" value="/menu.jsp" />
    <tiles:put name="body" value="/body.jsp" />
    <tiles:put name="footer" value="/footer.jsp" />
</tiles:insert>

The name attribute of the put tag specifies the region in the baseLayout in which the corresponding page specified by the value attribute should be displayed. In our example the header region is occupied by the header.jsp page, the menu part is occupied by the menu.jsp page, the body part by the body.jsp page and the footer by the footer.jsp page. The only section that will be changing when the user request a different page is the body part.

On executing the application the following home page is displayed. The table border is set to 1 inorder to give a clear seperation between the regions.

On clicking the links in the left menu, only the body part of the page should change. So instead of forwarding each link to a jsp page, we forward it to a Tile definition.

tiles-defs.xml file contains all the Tile definitions. A Tile definition can be added in the following way.

<definition name="baseLayout" path="/baseLayout.jsp">
    <put name="title"  value="Tiles Example" />
    <put name="header" value="/header.jsp" />
    <put name="menu"   value="/menu.jsp" />
    <put name="body"   value="/body.jsp" />
    <put name="footer" value="/footer.jsp" />
</definition>

The name of the Tile definition is "baseLayout" and it contains one jsp page for each region. Since the title region is specified using getAsString tag, we provide a String variable instead of a jsp page. When an action is forwarded to the Tile definition baseLayout, then the baseLayout.jsp page will be displayed with corresponding jsp pages in the Tile definition

The powerful and useful feature of the Tile definition is the ability to extend an other Tile definition. In our example only the tilte and the body regions are going to change for each link in the left menu. So it is a good practice to create an new Tile definition which extends the baseLayout, with different values for title and body regions.

<definition name="friends" extends="baseLayout">
    <put name="title" value="Friends" />
    <put name="body" value="/friends.jsp" />
</definition>

<definition name="office" extends="baseLayout">
    <put name="title" value="The Office" />
    <put name="body" value="/office.jsp" />
</definition>

The menu.jsp contains the following code.

<html>
    <body>
        <a href="Link.do?method=friends" >Friends</a><br>
        <a href="Link.do?method=office" >The Office</a>
    </body>
</html>

On clicking each link a corresponding method in the LinkAction class is invoked.

The LinkAction class extends the DispatchAction and it contains the following methods.

public class LinkAction extends DispatchAction {

public ActionForward friends(ActionMapping mapping, ActionForm  form, HttpServletRequest request, HttpServletResponse response) throws Exception {
    return mapping.findForward("friends");
}

public ActionForward office(ActionMapping mapping, ActionForm  form, HttpServletRequest request, HttpServletResponse response) throws Exception {
    return mapping.findForward("office");
}
}

Add the following action forward entries in the struts-config.xml file.

<action-mappings>
    <action path="/Link" parameter="method" type="com.vaannila.LinkAction">
        <forward name="friends" path="friends"/>
        <forward name="office" path="office"/>
    </action>
</action-mappings>

The path attribute hold the value of the Tile definition to forward. When the path value is "friends" the baseLayout.jsp page is displayed with the tilte as Friends and friends.jsp as the body.

When the path value is "office" the baseLayout.jsp page is displayed with the tilte as The Office and office.jsp as the body.

You can download the source code of the Struts Tiles example by clicking on the Download link below.

Struts Tiles Tutorial

Popular on DZone

Partner Resources