Struts 2 Tiles Integration Tutorial

Meyyappan Muthuraman

Jun. 15, 12 · Tutorial

Like (0)

Save

102.01K Views

The following example shows how to integrate Struts 2 and Tiles using the struts2 tiles plugin. In the deployment descriptor first setup the tiles definition file.

<context-param>
    <param-name> org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG </param-name>
    <param-value>/WEB-INF/tiles.xml</param-value>
</context-param>

Then setup the tiles listener.

<listener>
    <listener-class>org.apache.struts2.tiles.StrutsTilesListener</listener-class>
</listener>

The complete web.xml file.

<?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_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>Struts2Example15</display-name>
	
	<context-param>
		<param-name> org.apache.tiles.impl.BasicTilesContainer.DEFINITIONS_CONFIG </param-name>
		<param-value>/WEB-INF/tiles.xml</param-value>
	</context-param>

	<listener>
		<listener-class>org.apache.struts2.tiles.StrutsTilesListener </listener-class>
	</listener>

	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>
			org.apache.struts2.dispatcher.ng.filter. StrutsPrepareAndExecuteFilter
		</filter-class>
	</filter>
	
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

The tiles.xml file contains the following tile definitions.

<?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="Template"/>
      <put-attribute name="header" value="/header.jsp"/>
      <put-attribute name="menu"   value="/menu.jsp"/>
      <put-attribute name="body"   value="/body.jsp"/>
      <put-attribute name="footer"   value="/footer.jsp"/>
  </definition>
  
  <definition name="welcome" extends="baseLayout">
      <put-attribute name="title"  value="Welcome"/>
      <put-attribute name="body"   value="/welcome.jsp"/>      
  </definition>
  
  <definition name="friends" extends="baseLayout">
      <put-attribute name="title"  value="Friends"/>
      <put-attribute name="body"   value="/friends.jsp"/>      
  </definition>
  
  <definition name="office" extends="baseLayout">
      <put-attribute name="title"  value="Office"/>
      <put-attribute name="body"   value="/office.jsp"/>      
  </definition>
  
</tiles-definitions>

Here we define a "baseLayout" that contains a title, header, menu, body and footer regions. The header, menu and footer region remains the same for all the layouts only the title and body content changes.

In the baseLayout.jsp page we create a classic tiles layout as shown below.

<%@ 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>

In the struts.xml file create a new result type for tiles as shown below.

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<package name="default" extends="struts-default">
		<result-types>
			<result-type name="tiles" class="org.apache.struts2.views.tiles.TilesResult" />
		</result-types>
		<action name="*Link" method="{1}" class="com.vaannila.action.LinkAction">
			<result name="welcome" type="tiles">welcome</result>
			<result name="friends" type="tiles">friends</result>
			<result name="office" type="tiles">office</result>
		</action>
	</package>
</struts>

For each result instead of forwarding to the jsp page forward it to the tiles definition.

When you execute the example the following page gets displayed.

The menu.jsp page has the menu items, on clicking each menu item the title and body content alone changes.

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

<a href="<s:url action="friendsLink"/>" >Friends</a><br>
<a href="<s:url action="officeLink"/>" >The Office</a><br>

When each menu item is clicked a different method in the LinkAction class is invoked.

package com.vaannila.action;

import com.opensymphony.xwork2.ActionSupport;

public class LinkAction extends ActionSupport {

	private static final long serialVersionUID = -2613425890762568273L;

	public String welcome()
	{
		return "welcome";		
	}
	
	public String friends()
	{
		return "friends";		
	}
	
	public String office()
	{
		return "office";		
	}
}

Struts 2 Tiles Integration Tutorial

Popular on DZone

Partner Resources