How to remove a tile in apache tiles for a specific view?

Chrispie picture Chrispie · Jan 4, 2014 · Viewed 9.6k times · Source

I want to know how to remove a tile from a view. My main view is looking like this

Main layout of my web page

The tile config is made up out of 4 pieces: header, menu, body and footer.

Now I know if I request a new page I can override the main view to for example replace the body so that I have different content displayed there.

But I want to be able if I click on link in the menu that will take me to a page that only has a header and body (no menu or footer).

specific layout without the menu and footer

The user will then complete a wizard where they can go from one page to another and then once they are done it should go back to the main layout again.

And this is my question: How do I remove the menu and the footer from a view? My question stops here.

Since there is not much documentation on tiles, that I could find, I thought I would include a step by step example for some one else who struggles to get a working example of using Apache Tiles and Spring MVC using Spring Tool Suite (My version is STS 3.2.0).

STEPS To follow to create a simple site using STS

  1. Create a new STS project

    File >> New >> Spring Template Project >> Spring MVC Project

    Select “Spring MVC Project” option

    Give your project a name and a top level package

    GiveUrProjectANameAndPackage

    This will create a project looking like the below

    enter image description here

  2. Change the POM to use SPRING 3.2.0.RELEASE

From:

<org.springframework-version>3.1.1.RELEASE</org.springframework-version>

To:

<org.springframework-version>3.2.0.RELEASE</org.springframework-version>
  1. Add the following dependencies to the POM file to include the Apache Tile dependencies
<!-- Tiles -->
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-api</artifactId>
    <version>3.0.1</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-core</artifactId>
    <version>3.0.1</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.1</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-servlet</artifactId>
    <version>3.0.1</version>
</dependency>
<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-template</artifactId>
    <version>3.0.1</version>
</dependency> 
  1. Change the “servlet-context.xml” to use the TilesViewResolver instead of the default InternalViewResolver
<!-- Remove -->
<beans:bean class="org.springframework.web.servlet.view.tiles3.TilesViewResolver">
    <beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"></beans:property>
    <beans:property name="order" value="0"></beans:property>
</beans:bean>
 
<!-- Add -->
<beans:bean class="org.springframework.web.servlet.view.tiles3.TilesViewResolver">
<beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"></beans:property>
    <beans:property name="order" value="0"></beans:property>
</beans:bean>
  1. Add the reference to know where the tiles are configured
<beans:bean class="org.springframework.web.servlet.view.tiles3.TilesConfigurer" id="tilesConfigurer">
    <beans:property name="definitions" value="/WEB-INF/spring/tiles.xml"> </beans:property>
</beans:bean>
  1. Now specify the view – the JSP files that would be used to specify the views… e.g. the header, menu, footer and the body (this can the actual content and usually you will have more than 1 body depending on what the user has clicked in the menu) - the layout will be like the very first picture in this post.

JSP files created in the view folder each with there content

header.jsp

<h2>This is the header</h2>

footer.jsp

<p>This is the footer</p>

content1.jsp

<h1>This is content page 1</h1>
<p>Blah blah content 1</p>

content2.jsp

<h1>This is content page 2</h1>
<p>Blah blah content 2</p>

menu.jsp

<h2>Menu</h2>
    <a href="">Go to home page</a><br/>
    <a href="page1">Display page 1</a><br/>
    <a href="page2">Display page 2</a>
  1. When the project gets created it creates a default controller called “HomeController.java”. This is what is used to determine where to go to next when clicking on the menu items. If you open the home controller and change it to the following
package com.stp.myapp;
import java.util.Locale;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
    /**
     * The request mapping has a value. That is what we are 
* requesting for. When opening the site it will request the main 
* page or the index page. The “/” indicates it is the index page.
* In this simple example we simply return the new ModalAndView with 
* the page in the view folder. In This case it is the mainPage.
* The mainPage is the reference of what is configured in the 
* apache tiles configuration – not the actual page that will be 
* displayed. 
     */
        @RequestMapping(value = "/", method = RequestMethod.GET)
        public ModelAndView home(Locale locale, Model model) {
        return new ModelAndView("mainPage");
        }

        /**
         * The request mapping is for page1 (page1 is the value from the menu.
         */

        @RequestMapping(value = "/page1", method = RequestMethod.GET)
        public ModelAndView viewArticle(Locale locale, Model model) {
        return new ModelAndView("displayPageContent1");
        }

        @RequestMapping(value = "/page2", method = RequestMethod.GET)
        public ModelAndView viewEmployees(Locale locale, Model model) {
        return new ModelAndView("displayPageContent2");
    }

}
  1. Now let’s configure the tiles

Create a “tiles.xml” file with

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

<!-- This file has several definitions of page layouts -->
<tiles-definitions>

    <!-- The main definition with the header footer menu and body -->
    <definition name="base.definition" template="/WEB-INF/views/mainTemplate.jsp">
        <put-attribute name="title" value=""></put-attribute>
        <put-attribute name="header" value="/WEB-INF/views/header.jsp"></put-attribute>
        <put-attribute name="menu" value="/WEB-INF/views/menu.jsp"></put-attribute>
        <put-attribute name="body" value=""></put-attribute>
        <put-attribute name="footer" value="/WEB-INF/views/footer.jsp"></put-attribute>
    </definition>

    <!-- Now you can specify as many layours as you want... The name will match the names the --> 
    <!-- HomeController.java returns aka... as we specified it as displayPageContent1 and displayPageContent2 -->
    <!-- You can override each of the base.definition entries. In this we change the page title and display a different -->
    <!-- page as the body. As we didn't override the menu of footer it will display as specified in tha base.defition-->
    <definition name="displayPageContent1" extends="base.definition">
        <put-attribute name="title" value="Page context 1 displaying..."></put-attribute>
        <put-attribute name="body" value="/WEB-INF/views/content1.jsp"></put-attribute>
    </definition>

    <definition name="displayPageContent2" extends="base.definition">
        <put-attribute name="title" value="Employees List"></put-attribute>
        <put-attribute name="body" value="/WEB-INF/views/content2.jsp"></put-attribute>
    </definition>

     <definition name="mainPage" extends="base.definition">
        <put-attribute name="title" value="This is the home page being displayed....."></put-attribute>
        <put-attribute name="body" value="/WEB-INF/views/home.jsp"></put-attribute>
    </definition>

</tiles-definitions>

The tiles.xml file has a “mainTemplate.jsp” defined as the base definition. Create a file “mainTemplate.jsp” which has the main html layout. The files has “tiles:insertAttribute” which defines the pieces of the base layout that can be overridden in each view.

<%@ 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"></tiles:insertAttribute>
</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" align="left">
    <tr>
        <td colspan="2" align="center">
            <tiles:insertAttribute name="header"></tiles:insertAttribute>
        </td>
    </tr>
    <tr>
        <td>
            <tiles:insertAttribute name="menu"></tiles:insertAttribute>
        </td>
        <td>
            <tiles:insertAttribute name="body"></tiles:insertAttribute>
        </td>
    </tr>
    <tr>
        <td colspan="2"  align="center">
            <tiles:insertAttribute name="footer"></tiles:insertAttribute>
        </td>
    </tr>
</table>
</body>
</html>
  1. In the end you should end up with a file structure looking like this

InTheEndTheFilesShouldLookLikeThis

Answer

Prabhakaran picture Prabhakaran · Apr 30, 2014

In the Tiles.xml remove the header and footer value like below:

<definition name="base.definition" template="/WEB-INF/views/mainTemplate.jsp">
  <put-attribute name="title" value=""></put-attribute>
  <put-attribute name="header" value=""></put-attribute>
  <put-attribute name="menu" value=""></put-attribute>
  <put-attribute name="body" value=""></put-attribute>
  <put-attribute name="footer" value=""></put-attribute>
</definition>

Then if you wants the only header and body:

<definition name="displayPageContent2" extends="base.definition">
  <put-attribute name="title" value="Employees List"></put-attribute>
  <put-attribute name="header" value="/WEB-INF/views/header.jsp" />"></put-attribute>
  <put-attribute name="body" value="/WEB-INF/views/content2.jsp"></put-attribute>
</definition>