Quadriga as well as several other of the Java/Spring web applications developed in the Digital Innovation Group use Apache Tiles for managing the layout of the application. This tutorial will you walk through a very basic example of how to implement Apache Tiles with Spring.
...
You declared two beans in this piece of XML. First, you specify that you want to use a UrlBasedViewResolver to resolve your views. As a property you give the resolver a TilesView. The second bean, the TilesConfigurer, "simply configures a TilesContainer using a set of files containing definitions, to be accessed by TilesView instances. This is a Spring-based alternative (for usage in Spring configuration) to the Tiles-provided ServletContextListener (e.g. CompleteAutoloadTilesListener for usage in web.xml.)" (Spring TilesConfigurer Javadoc)
Inside the "definitions" property, you specify where Tiles can find the definitions telling it what templates to render. In our example, the definitions are in a file called "tiles-def.xml" inside the WEB-INF folder.
Tiles Definitions
Ok, now let's create the tiles-def.xml file we just told Tiles about. Create a new file inside your WEB-INF folder, and paste the following code in it:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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>
<!-- Base definition -->
<definition name="base.definition" template="/WEB-INF/tiles/layouts/skeleton.jsp">
<put-attribute name="title" value="" />
<put-attribute name="currentPage" value="home" />
</definition>
<!-- Home pages -->
<definition name="home" extends="base.definition">
<put-attribute name="title" value="Quadriga - Login" />
<put-attribute name="content" value="/WEB-INF/views/home.jsp" />
<put-attribute name="footer" value="/WEB-INF/views/footer.jsp" />
</definition>
</tiles-definitions> |
For now, let's leave it with that. We'll come back to it later with more explanations.
The Skeleton
So far, we have talked about how to use Apache Tiles, however, we haven't said anything about why we would use it. Apache is a templating framework with the goal to make it easier to write and maintain webpages across an application. Remember, how in the first tutorial we wrote jsp pages like this:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page isELIgnored="false" %> <html> <body> <h2>Hello World!</h2> I am feeling: ${ mood.feeling }. </body> </html> |
We had to specify a complete HTML page in each jsp page. But usually, we want all of our pages look the same. They should have the same footer, header, menubar, etc. So, if any change is required (for example adding a copyright notice in the footer of every page) after we already wrote a couple of jsp pages, we would have to go back and change every single jsp page. Not very desirable... So, Apache Tiles allows us to specify a footer jsp page, a header jsp page, a menu jsp page, etc. and then simply builds the pages out of these different components on the fly.
For Tiles to do its job, we first need to tell it, how the different components of our website should be assembled. We do this by writing a so-called skeleton page. Go to your WEB-INF folder and create a folder called "tiles", then create a folder called "layouts" in the newly created "tiles" folder. Your webapp folder should now have the following structure:
Next, create a file called "skeleton.jsp" inside the layouts folder. Paste the following code into skeleton.jsp:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE HTML>
<html>
<head>
<title><tiles:insertAttribute name="title" /></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<tiles:importAttribute name="currentPage" scope="request" />
<!-- Main -->
<tiles:insertAttribute name="content" />
<!-- Footer -->
<tiles:insertAttribute name="footer" />
</body>
</html> |