Meyyappan has posted 101 posts at DZone. View Full User Profile

Struts 2 Tiles Integration Tutorial

06.15.2012
| 59865 views |
  • submit to reddit

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";		
	}
}

The directory structure of the example is shown below.

You can download the Struts 2 Tiles integration example here.

Source :Download
Source + Lib :Download

 

 

Published at DZone with permission of its author, Meyyappan Muthuraman.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Arden Han replied on Thu, 2013/04/11 - 2:47pm

Hi,

Thank you for creating this tutorial. It's very clearly written.

I'm having a problem adding a page to "Part 4: Struts 2 Tiles Plugin Tutorial with Example". I added the necessary code to struts.xml, tiles.xml, menu.jsp and linkAction.java but it's not working, the feedback in the Console section of Eclipse rolls on and on and the page does not render.

Could you tell me what I missed or what files have to be changed to add a page.

Thank you

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.