Struts Tiles

In this article you will learn the how to create views using Tiles Framewok of struts. In a Tiles application, the background, or layout, template usually defines the position of a header, menu body, content, and footer. Other pages are then included to fill each of these positions. If the header changes, then only that template file need be changed. The change is automatically reflected in all pages that include that template.

Figure 15.1 shows master template is used to provide the layout for the page and position the elements; page fragments are then included to fill in the elements.

Figure 15.1 Figure 15.1

First create a new Dynamic Web Project and configure it as Maven Project. For Reference, Click Here

Add the following dependencies in pom.xml

<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.8.2</version>
      <scope>test</scope>
    </dependency>
  
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts-core</artifactId>
      <version>1.3.10</version>
    </dependency>
  
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts-taglib</artifactId>
      <version>1.3.10</version>
    </dependency>
     
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts-extras</artifactId>
      <version>1.3.10</version>
    </dependency>
     
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts-tiles</artifactId>
      <version>1.3.10<</version>
    </dependency>
     
</dependencies>

Do not forget to include maven dependencies in Eclipse IDE as shown in following link.

1. Creating Template

Create two templates blue and green for header and footer details. These two templates are just pure HTML code with different background color.

Blue Template

/pages/tiles/blue/header.jsp

<div style="background-color:blue;color:white;">
Logo<span style="padding-left:250px;">login</span>
</div> 

/pages/tiles/blue/footer.jsp

<div style="background-color:blue;color:white;">
sitemap<span style="padding-left:20px;">contactus</span>
</div> 

Green Template

/pages/tiles/blue/header.jsp

<div style="background-color:green;color:white;">
Logo<span style="padding-left:250px;">login</span>
</div> 

/pages/tiles/blue/footer.jsp

<div style="background-color:green;color:white;">
sitemap<span style="padding-left:20px;">contactus</span>
</div> 

2. Building a layout

Create a jsp page which will be your layout for web application, layout.jsp

<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<html>
<head><title>Sruts Tiles<</head>
<body>
<tiles:insert attribute="header"/>
 
<tiles:insert attribute="body"/> 
 
<tiles:insert attribute="footer"/> 
</body>
</html>

3. JSP declarations

Create the following pages for main body. The “main.jsp” is used to get the tiles definition, and “put” the real body content (main-body.jsp) as body template.

/pages/main.jsp

<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
 
<tiles:insert definition="layout" >
    <tiles:put name="body" value="/pages/body/main-body.jsp" />
</tiles:insert>

/pages/body/main-body.jsp

<div style="padding-top:20px;background-color:white;height:60px;">
Site Content
</div> 

4. Tiles Definitions File (tiles-defs.xml)

This configuration file for Tiles describe the definitions of the view to be inserted. this file must be in WEB-INF.

tiles-defs.xml

<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 1.3//EN"
"http://struts.apache.org/dtds/tiles-config_1_3.dtd">
<tiles-definitions>
    <definition name="layout" path="/pages/tiles/layout.jsp">
        <put name="header" value="/pages/tiles/blue/header.jsp" />
        <put name="footer" value="/pages/tiles/blue/footer.jsp" />
    </definition>
</tiles-definitions>

5. Add Tiles plugin in struts-config.xml

To use Struts tiles framework, you have to declare the “TilesPlugin” plug-in class in the Struts configuration file.

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

6. Struts Config

struts-config.xml file contains the following code.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC 
"-//Apache Software Foundation//DTD Struts Configuration 1.3//EN" 
"http://jakarta.apache.org/struts/dtds/struts-config_1_3.dtd">

<struts-config>
	
	<action-mappings>
		<action path="/Main" type="org.apache.struts.actions.IncludeAction" parameter="/pages/main.jsp"/>
	</action-mappings>
	
	<plug-in className="org.apache.struts.tiles.TilesPlugin" >
		<set-property property="definitions-config"
		value="/WEB-INF/tiles-defs.xml"/>
	</plug-in>
	
	
</struts-config>

7. Run Project

Now when you run the project, following screen will be displayed as shown in Figure 15.2

Figure 15.2 Figure 15.2

To change it to template green, you just need to update the “tiles-defs.xml” file.

<definition name="layout" path="/pages/tiles/layout.jsp">
    <put name="header" value="/pages/tiles/green/header.jsp" />
    <put name="footer" value="/pages/tiles/green/footer.jsp" />
</definition>


Now when you run the project again, following screen will be displayed as shown in Figure 15.3

Figure 15.3 Figure 15.3

The folder structure of the example is shown below in Figure 15.4

Figure 15.4 Figure 15.4

You can download the source code of this example here.

2 Responses to Struts Tiles

  1. Ravi chowdary September 19, 2013 at 11:52 am #

    i was downloaded regarding struts-tiles source code , but iam unable to run examples what they was provided., i getting problwm with index.jsp. it shows error like invalid path ..

    Please suggest me , why this example not worked ?

    • Ravi chowdary September 19, 2013 at 11:53 am #

      index.jsp shows error like below:

      Fragment “/Main.do” was not found at expected path /StrutsTiles/WebContent/Main.do

Leave a Reply