I want to know how to remove a tile from a view. My main view is looking like this
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).
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).
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
This will create a project looking like the below
From:
<org.springframework-version>3.1.1.RELEASE</org.springframework-version>
To:
<org.springframework-version>3.2.0.RELEASE</org.springframework-version>
<!-- 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>
<!-- 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>
<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>
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>
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");
}
}
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>
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>
I don't konw if that is what You expect, but You can always add in Your tiles config, a reference to an empty file (first create one) - so the menu will dissapear:
You can move menu td inside menu jsp, so the layout look simmilar to this:
<tr>
<tiles:insertAttribute name="menu"></tiles:insertAttribute>
[...]
</tr>
Defs:
<definition name="displayPageContent1" extends="base.definition">
[...]
<put-attribute name="menu" value="/WEB-INF/views/empty.jsp"></put-attribute>
</definition>
In the scenario given above, td with menu will not be presented, the same You can do for footer section.
Another way is to make a definition and nest it into another definietion, this will result in nested templates also, then You can insert those custom templates like this (example from other project):
<definition name="menu_template" template="/WEB-INF/layouts/main_template/header.ftl">
<put-attribute name="SYSTEM_NAME_SHORT" value="SOL"/>
<put-attribute name="menu" value="/WEB-INF/views/menus/menu.ftl"/>
</definition>
<definition name="record.history" extends="main_template">
<put-attribute name="content" value="/WEB-INF/views/xxx.ftl"/>
<put-attribute name="header" >
<definition extends="menu_template">
<put-attribute name="menu" value="/WEB-INF/layouts/blank.ftl"/>
</definition>
</put-attribute>
</definition>
As You can see above, You can inject other templates into main template as attributes - in this case, menu template is inserted into attribute called header.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With