Struts 2 Tiles

What is Tiles?

Tiles is a view layer framework for Java EE applications that allows to separate pages,according to Composite View design Pattern.It is a templating framework which simplifies the development of web application user interfaces.

To use Tiles in your application you need,

• a Java Runtime Environment following the Java SE 5.0 specifications;
• a servlet container that supports Servlet 2.4 and JSP 2.0

The JAR files needed are,

• the tiles-core-VERSION.jar and tiles-api-VERSION.jar

and tiles dependencies JAR

• Jakarata Commons BeanUtils 1.7.0 or above;
• Jakarata Commons Digester 1.8 or above;
• Jakarata Commons Logging 1.1 or above.

The implementation of Tiles around the Composite View pattern consists of the Template,Attribute and Definition concepts.A template is the layout part of a page.An attribute is a gap in a template that needs to be filled in your application.A definition is a composition to be rendered to the end user.

Here is an Example to integrate Struts 2 and Tiles using the Struts2 tiles plugin.

Above is a classic Tiles Layout,we can replicate this structure by creating a JSP page called baseLayout as follows,

<%@ taglib uri=”http://tiles.apache.org/tags-tiles” prefix=”tiles” %>

<table>

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

 

In deployment descriptor set up tiles definition.To configure tiles,an entry to listener is given in web.xml

<listener>

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

</listener>

<context-param>

    <param-name>tilesDefinitions</param-name>

    <param-value>/WEB-INF/tiles.xml</param-value>

</context-param>

An input configuration file /WEB-INF/tiles.xml is passed as argument. This file contains the Tiles definition for web application.

Create a file tiles.xml inside WEB-INF folder,

<?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=”” />

           <put-attribute name=”header” value=”/Header.jsp” />

           <put-attribute name=”menu” value=”/Menu.jsp” />

           <put-attribute name=”body” value=”” />

           <put-attribute name=”footer” value=”/Footer.jsp” />

      </definition>

      <definition name=”/welcome.tiles” extends=”baseLayout”>

           <put-attribute name=”title” value=”Welcome” />

           <put-attribute name=”body” value=”/Welcome.jsp” />

       </definition>

       <definition name=”/boys.tiles” extends=”baseLayout”>

           <put-attribute name=”title” value=”Boys Form” />

           <put-attribute name=”body” value=”/boys.jsp” />

       </definition>

       <definition name=”/girls.tiles” extends=”baseLayout”>

           <put-attribute name=”title” value=”Girls Form” />

           <put-attribute name=”body” value=”/girls.jsp” />

       </definition>

</tiles-definitions>

Here in tiles.xml we create base Layout. This layout contains attributes such as Header, Title, Body, Menu and Footer.The layout is then extended and new definitions for Welcome page and boys/girls page is defined.

In struts.xml we defined result tag which maps a particular action with a JSP page. Now we will modify it and map the result with Tiles. Following will be the content of struts.xml file.

<!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.LinkAction”>

<result name=”welcome” type=”tiles”>welcome</result>

<result name=”boys.tiles” type=”tiles”>boys</result>

<result name=”girls.tiles” type=”tiles”>girls</result>

</action>

</package>

</struts>

Here is detailed coding for each jsp present in baseLayout :-

Header.jsp

<div align=”center” style=”font-weight:bold”> Attendance Details</div>

Menu.jsp

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

<a href=”<s:url action=”boysLink”/>” >BOYS</a><br>

<a href=”<s:url action=”girlsLink”/>” >GIRLS</a><br

Footer.jsp

<div align=”center”>&copy j2eerefrence.com</div>

Welcome.jsp

<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″

pageEncoding=”ISO-8859-1″%>

<!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=ISO-8859-1″>

<title>welcome</title>

</head>

<body>

Welcome to our attendance page.

</body>

</html>

boys.jsp

<%@page contentType=”text/html” pageEncoding=”UTF-8″%>

<!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>JSP Page</title>

</head>

<body>

<p> Boys attendance details  goes here…</p>

</body>

</html>

girls.jsp

<%@page contentType=”text/html” pageEncoding=”UTF-8″%>

<!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>JSP Page</title>

</head>

<body>

<p> Girls attendance details  goes here…</p>

</body>

</html>

Compile and run the project and find whether Header,Menu and Footer are applied properly and whether the body is changing according to Menu items.