Apache Tiles

In this tutorial, you are going to learn about Apache Tiles by building a simple Web Application. Apache Tiles is a template composition framework, allow you to define page fragments, which can be assembled into a complete page at runtime.

In almost all web applications, many web pages share some common code fragments like header, footer, menu.  By using tiles we can define page fragments like header, footer, menu separately and assemble them at run time.

Follow the steps, to make a complete working example using Apache tiles in Eclipse. Following example defines three page fragments like header.jsp, footer.jsp, menu.jsp and use these fragments inside index.jsp.

Step 1: Create new Dynamic web project “tiles_tutorial”.

Select the check box “Generat web.xml deployment descriptor”.

Step 2:  Convert project to maven project. Right click on the project,. Go to configure -> Convert to Maven Project

Step 3: Add maven dependency for Apache tiles.  Update pom.xml with following code.

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>tiles_tutorial</groupId>
 <artifactId>tiles_tutorial</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>war</packaging>
 <properties>
  <tiles_version>3.0.5</tiles_version>
 </properties>
 <build>
  <sourceDirectory>src</sourceDirectory>
  <plugins>
   <plugin>
    <artifactId>maven-compiler-plugin</artifactId>
    <version>3.1</version>
    <configuration>
     <source>1.6</source>
     <target>1.6</target>
    </configuration>
   </plugin>
   <plugin>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.4</version>
    <configuration>
     <warSourceDirectory>WebContent</warSourceDirectory>
     <failOnMissingWebXml>false</failOnMissingWebXml>
    </configuration>
   </plugin>
  </plugins>
 </build>

 <dependencies>
  <dependency>
   <groupId>org.apache.tiles</groupId>
   <artifactId>tiles-core</artifactId>
   <version>${tiles_version}</version>
  </dependency>
  <dependency>
   <groupId>org.apache.tiles</groupId>
   <artifactId>tiles-jsp</artifactId>
   <version>${tiles_version}</version>
  </dependency>
  <dependency>
   <groupId>org.apache.tiles</groupId>
   <artifactId>tiles-api</artifactId>
   <version>${tiles_version}</version>
  </dependency>
  <dependency>
   <groupId>commons-beanutils</groupId>
   <artifactId>commons-beanutils</artifactId>
   <version>1.9.2</version>
  </dependency>
  <dependency>
   <groupId>commons-digester</groupId>
   <artifactId>commons-digester</artifactId>
   <version>2.1</version>
  </dependency>
  <dependency>
   <groupId>commons-logging</groupId>
   <artifactId>commons-logging</artifactId>
   <version>1.2</version>
  </dependency>
  <dependency>
   <groupId>org.apache.tiles</groupId>
   <artifactId>tiles-servlet</artifactId>
   <version>3.0.5</version>
  </dependency>

 </dependencies>
</project>

Step 4: First we need to inform, Web application that we are using tiles. You can do this by updating web.xml.

web.xml

<?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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>tiles_tutorial</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <context-param>
 <param-name>org.apache.tiles.definition.DefinitionsFactory.DEFINITIONS_CONFIG</param-name>
 <param-value>/WEB-INF/tiles.xml</param-value>
   </context-param>
   
    <listener>
     <listener-class>org.apache.tiles.web.startup.simple.SimpleTilesListener</listener-class>
   </listener>
</web-app>

Context parameter tells that, tiles configuration is located in tiles.xml file. Tiles listener initialize the tiles container.

Step 5: Create tiles.xml inside WEB-INF directory. “tiles.xml” defines all existing pages of my application.

tiles.xml

<?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="template" template="/template.jsp">
  <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>
</tiles-definitions>

Step 6:  Create following jsp files

body.jsp

<div>
 <h1>page body section</h1>
</div>

footer.jsp

<div>
 <h1>page footer section</h1>
</div>

header.jsp

<div>
 <h1>page header section</h1>
</div>

menu.jsp

<div>
 <h1>
  <ul>
   <li>Menu item 1</li>
   <li>Menu item 2</li>
   <li>Menu item 3</li>
   <li>Menu item 4</li>
   <li>Menu item 5</li>
   <li>Menu item 6</li>
  </ul>
 </h1>
</div>

template.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<title>sample template</title>
<style>
body {background-color:lightgray}
h1   {color:blue}
</style>
</head>
<body style="width: 100%; height: 100%">
 <table border="1" style="width: 100%; height: 100%">
  <tr>
   <td colspan="2"><tiles:insertAttribute name="header" /></td>
  </tr>
  <tr>
   <td><tiles:insertAttribute name="menu" /></td>
   <td><tiles:insertAttribute name="body" /></td>
  </tr>
  <tr>
   <td colspan="2"><tiles:insertAttribute name="footer" /></td>
  </tr>
 </table>
</body>
</html>

index.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="template" />

Run the Application, you will get output screen like below.

Total project structure looks like below.

One great thing about tiles is one tile definition can inherit properties from other tiles definition.

For example, update tiles.xml like below.

<?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="template" template="/template.jsp">
  <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="author" extends="template">
  <put-attribute name="body" value="/author_body.jsp" />
 </definition>
</tiles-definitions>

Create author.jsp and author_body.jsp.

author_body.jsp

<div>
 <h1>I am Hari Krishna</h1>
</div>

author.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="author" />

Run author.jsp, you will get output screen like following.

Total project structure looks like following.