What is Apache Tiles 2?
Apache Tiles is a templating framework built to simplify the development of web application user interfaces.
Tiles allows authors to define page fragments which can be assembled into a complete page at runtime. These fragments, or tiles, can be used as simple includes in order to reduce the duplication of common page elements or embedded within other tiles to develop a series of reusable templates. These templates streamline the development of a consistent look and feel across an entire application.
Source: Apache Tiles 2
Our MVC application is about pet information. The main page describes pets in general. The other two pages are speficic for dogs and cats . We will develop our application using standard JSP. Then later, we'll create a Tiles version.
Let's start with the Pets page.
There are four major div elements here. Each one has been assigned an id so that we can style them using CSS.
Here's the actual screenshot of the Pets page:
Here's the Dogs page.
There are five major div elements here. Each one has been assigned an id so that we can style them using CSS.
Here's the actual screenshot of the Dogs page
Here's the Cats page.
Here's the actual screenshot of the Cats page
We also have the same five major div elements here.
In order for these JSP pages to be served in Spring MVC, we need to declare the corresponding controller.
This controller has three mappings:
/notiles/pets - for displaying the pets page /notiles/dogs - for displaying the dogs page /notiles/cats - for displaying the cats pageTo load the pets page, enter the following url:
http://localhost:8080/spring-tiles/krams/notiles/petsTo load the dogs page, enter the following url:
http://localhost:8080/spring-tiles/krams/notiles/dogsTo load the cats page, enter the following url:
http://localhost:8080/spring-tiles/krams/notiles/catsThat's it. We've developed a simple Spring MVC 3 application using standard JSPs.
However, we have a problem
We've declared three JSP pages. Imagine if we have 100 JSP pages to managed with. We need to modify the title and the footer. So we open all 100 JSP pages, edit them one by one. To make it faster, we copy and paste the same code. But we made a typo. So we edit again those 100 pages. And the cycle goes on. What if we have 500 pages? 1000? How do we make our lives less difficult?
Enter Apache Tiles 2
Let's refactor our JSPs. Remember in each of these pages there are major div elements. We'll use those as markers for our templates.
The Pets page uses the following structure:
Our first template is based on this structure.
Each div contains a tiles:insertAttribute element. These are placeholders for the actual content.
Our second template will be based on the cats.jsp and dogs.jsp. They share the same structure so that means they will share the same template.
So far we have created 5 JSPs:
cats.jsp - a standard JSP dogs.jsp - a standard JSP pets.jsp - a standard JSP detail.jsp - a Tiles JSP main.jsp - a Tiles JSPTo use these templates we need to activate Apache Tiles by declaring the required XML configurations. To do that we need to declare the required Spring configurations as well.
We'll start with the web.xml.
Take note of the URL pattern. When accessing any pages in our MVC application, the host name must be appended with
/kramsIn the web.xml we declared a servlet-name spring. By convention, we must declare a spring-servlet.xml as well.
This XML config declares a view resolver. All references to a JSP name in the controllers will map to a corresponding JSP in the /WEB-INF/jsp location.
By convention, we must declare an applicationContext.xml
This XML config declares three beans to activate the Spring 3 MVC programming model. W've also imported a resource tiles-context.xml. This contains the Tiles configuration.
This configuration declares required beans to activate Tiles. The TilesConfigurer relies on an external definitions file tiles-definitions.xml for the actual declaration of the templates.
We've declared two templates: template-main and template-detail.
These attributes must match the attributes you declared in template: main.jsp
We've declared three concrete pages: pet-tiles, dog-tiles, cat-tiles
Each concrete page extends a template name. For example, cat-tiles extends from template-detail. In Java this is comparable to inheritance.
Do you understand now how Tiles can help us reduce repetitive code and lessen errors? By reusing the same JSP and template, we improve our development time. Our JSPs became manageable. If you want to switch content, you just do it in the tiles-definitions.xml. For example, if you need to update the footer.jsp, you just open the file. Edit then save. You don't need to edit 1000 JSP pages anymore.
Of course, if you're just dealing with three pages. The initial configuration might be too much. But in real-life applications, it's a time saver because you're dealing with lots of JSPs.
Because we're still dealing with a MVC application, we need to declare another controller to handle these Tiles pages.
This controller has three mappings:
/tiles/pets - for displaying the pets page /tiles/dogs - for displaying the dogs page /tiles/cats - for displaying the cats pageTo load the pets page, enter the following url:
http://localhost:8080/spring-tiles/krams/tiles/petsTo load the dogs page, enter the following url:
http://localhost:8080/spring-tiles/krams/tiles/dogsTo load the cats page, enter the following url:
Let's compare side by side our JSP pages with using the standard JSPs and the ones with Tiles support.
Pets Page (before and after)
Dogs Page (before and after)
Cats Page (before and after)
That's it. We've managed to refactor our code and use the Tiles framework. We've also leveraged on Spring programming model to develop our MVC application.
The best way to learn further is to try the actual application.
Download the project
You can access the project site at Google's Project Hosting at http://code.google.com/p/spring-mvc-tiles/
You can download the project as a Maven build. Look for the spring-tiles.zip in the Download sections.
You can run the project directly using an embedded server via Maven.
For Tomcat: mvn tomcat:run
For Jetty: mvn jetty:run
Share the joy:
Subscribe by reader Subscribe by email Share