Struts Tiles framework example

Struts Tiles framework is a layout framework, which allow users to maintain a standard look of header, footer and menu across all of your web pages efficiently.

Download this example – Struts-Tile-Framework-Example.zip

Tiles template example

Here’s an example to create a tiles template to maintain the header and footer details across all of the web pages in Struts.

Firstly, see this Struts tiles framework relationship.

1. Get Struts Tiles Library

Get the struts tiles library from the Struts distribution folder, or via Maven central repository

    <dependency>
      <groupId>org.apache.struts</groupId>
	  <artifactId>struts-tiles</artifactId>
      <version>1.3.10</version>
    </dependency>

and include it in your project dependency library.

2. Create a Template

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

Template – Red color
/template-red/header.jsp

<div style="padding:16px;background-color:red">
<h1>[Logo Here] This is Template Red Header</h1>
</div>

/template-red/footer.jsp

<div style="padding:16px;background-color:red">
<h1>This is Template Red Footer</h1>
</div>

Template – Green color
/template-green/header.jsp

<div style="padding:16px;background-color:green">
<h1>[Logo Here] This is Template Green Header</h1>
</div>

/template-green/footer.jsp

<div style="padding:16px;background-color:green">
<h1>This is Template Green Footer</h1>
</div>

3. Tiles layout

Create a standard web page layout for all of your web pages.

common-layout.jsp

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

4. Body Template

In the body template, you should always create two pages “user-form.jsp and user-form-body.jsp” for body details to break the coupled with tiles framework. The “user-form.jsp” is used to get the tiles definition, and “put” the real body content (user-form-body.jsp) as body template.

user-form.jsp

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

user-form-body.jsp

<div style="padding:16px;background-color:blue;height:200px;">
<h1>This is body content </h1>
</div>

5. Tiles Definition

All the templates are done, create a “tiles-defs.xml” file and declared a “company-template” definition for red template.

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="company-template" path="/pages/tiles/common-layout.jsp">
	<put name="header" value="/pages/tiles/template-red/header.jsp" />
	<put name="footer" value="/pages/tiles/template-red/footer.jsp" />
   </definition>
 
</tiles-definitions>

6. Include the TilesPlugin

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

struts-config.xml

<?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="/User"
			type="org.apache.struts.actions.ForwardAction"
			parameter="/pages/user/user-form.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. Demo

In above case, the template red is used.

http://localhost:8080/StrutsExample/User.do

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

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="company-template" path="/pages/tiles/common-layout.jsp">
	<put name="header" value="/pages/tiles/template-green/header.jsp" />
	<put name="footer" value="/pages/tiles/template-green/footer.jsp" />
   </definition>
 
</tiles-definitions>