Richard’s Weblog

February 2, 2014

Apache Tiles 3, integration with spring MVC

Filed under: Spring Framework,template system,Web development — Richard @ 6:58 pm
Tags: ,

Introduction

Tiles 3 can be integrated with spring framework version 3.2. In this example I am using spring version 3.2.7. The complete source for this example is available at github. In this example, I build a simple web application using tiles to build a template where I put a header, a footer, a menu and the pages bodies. I will create two pages : home and about.

Dependencies

Here I’m using maven.  To keep it simple I included a dependency to “tiles-extra”, wich is overkill since it contains all sort of librairies I do not need ( such as tiles-velocity, tiles-freemarker etc ).  :

<dependency>
	<groupId>org.apache.tiles</groupId>
	<artifactId>tiles-extras</artifactId>
	<version>${tiles-version}</version>
</dependency>

Configuration

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>
	
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
		
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	
</web-app>

Here the only relevant part for our example is the servlet and servlet-mapping configuration. Specifying “/” as url-pattern tells the server that my appServlet is the default servlet. If no other servlet can serve the request, appServlet will be called. I do this since springMVC can efficiently handle dynamic as well as static content.

servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

	<mvc:annotation-driven />
	<context:component-scan base-package="com.example.springandtiles" />
	
	<!-- Used to serve static resources like css, images and javascript files-->
	<mvc:resources mapping="/resources/**" location="/resources/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources 
		in the /WEB-INF/views directory -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/" />
		<property name="suffix" value=".jsp" />
	</bean>

	<!-- Tiles configuration -->

	<bean id="tilesConfigurer"
		class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/tiles/tiles-definitions.xml</value>
			</list>
		</property>
	</bean>

</beans>

I’m telling spring that all my views will be in “/WEB-INF/views”. Also, note the tile configuration, that defines the tiles config file in “/WEB-INF/tiles/tiles-definitions.xml”. Let’s take a look at the template that will be used

The template

A template named “defaultTemplate” will be configured in tiles-definitions.xml. It will be composed of a header, a menu (on the left) and a footer. The body is not yet defined because it will change on every pages.

tiles-definitions.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
 
    <definition name="defaultTemplate" template="/WEB-INF/template/default/template.jsp">
        <put-attribute name="header" value="/WEB-INF/template/default/header.jsp" />
        <put-attribute name="menu" value="/WEB-INF/template/default/menu.jsp" />
        <put-attribute name="footer" value="/WEB-INF/template/default/footer.jsp" />
    </definition>
 
</tiles-definitions>

And let’s take a look at each of the defined parts of my template

template.jsp

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Default tiles template</title>
	<style type="text/css">
	body {
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}

	.page {
 		min-height:100%;
 		position:relative;
	}
	
	.header {
		padding:10px;
		width:100%;
		text-align:center;
	}
	
	.content {
			padding:10px;
			padding-bottom:20px; /* Height of the footer element */
			overflow:hidden;
	}
	
	.menu {
		padding:50px 10px 0px 10px;
		width:200px;
		float:left;
	}

	.body {
		margin:50px 10px 0px 250px;
	}
	
	.footer {
		clear:both;
		position:absolute;
		bottom:0;
		left:0;
		text-align:center;
		width:100%;
		height:20px;
	}
	
	</style>
</head>
<body>
	<div class="page">
		<tiles:insertAttribute name="header" />
		<div class="content">
			<tiles:insertAttribute name="menu" />
			<tiles:insertAttribute name="body" />
		</div>
		<tiles:insertAttribute name="footer" />
	</div>
</body>
</html>

I know, css should be placed in another file and imported :)

header.jsp

<div class="header">I am the header</div>

menu.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<div class="menu">
Menu
	<ul>
	    <li>
	    	<spring:url value="/home" var="homeUrl" htmlEscape="true"/>
 			<a href="${homeUrl}">Home</a>
 		</li>
	    <li>
	    	<spring:url value="/about" var="aboutUrl" htmlEscape="true"/>
 			<a href="${aboutUrl}">About</a>
 		</li>
	</ul>
</div>

footer.jsp

<div class="footer">I am the Footer !</div>

The Home page

Since this is a view of my application, I put this file in /WEB-INF/views.

/WEB-INF/views/home.jsp

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

<tiles:insertDefinition name="defaultTemplate">
	<tiles:putAttribute name="body">



		<div class="body">
			<h1>Home page !</h1>

			<p>The time on the server is ${serverTime}.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
		</div>



	</tiles:putAttribute>
</tiles:insertDefinition>

This page tells tiles that it will use the “defaultTemplate”, and defines directly the page.

Npw let’s take a look at the spring controller for the home page :

/src/main/java/com/example/springandtiles/HomeController.java

package com.example.springandtiles;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
	
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
	
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = {"/", "/home"}, method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		return "home";
	}
	
}

On the home page, current time is displayed with a lorem ipsum paragraph. Boring, but simple :)

The About page

/WEB-INF/views/about.jsp

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

<tiles:insertDefinition name="defaultTemplate">
	<tiles:putAttribute name="body">



		<div class="body">
			<h1>About page !</h1>

			<p>This is a simple example of Tiles 3 integration with Spring Framework.</p>
			<p>Uses Tiles 3.0.3 and springframework 3.2.7.</P>
		</div>



	</tiles:putAttribute>
</tiles:insertDefinition>

And again, let’s look at the controller for that page

/src/main/java/com/example/springandtiles/AboutController.java

package com.example.springandtiles;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application about page.
 */
@Controller
public class AboutController {
	
	private static final Logger logger = LoggerFactory.getLogger(AboutController.class);
	
	@RequestMapping(value = "/about", method = RequestMethod.GET)
	public String about(Model model) {
		logger.info("About page !");
		
		return "about";
	}
	
}

Starting my project in tomcat gives me a screen that looks like this :
tiles3springintegrationexample

That’s all for this example, hope it will be useful for you.

« Previous PageNext Page »

Create a free website or blog at WordPress.com.