Tiles Quickstart

This tutorial is intended to provide a brief tutorial for the Tiles framework.

Introduction

A Tile is a reusable markup fragment. Often, it looks like nothing more than a jsp include, but when used within the tiles framework it becomes an avenue for a consistent look and feel throughout an application.

Tiling Basics

Consider the following page markup which is dynamically generated by a web application:

<html>
  <head><title>Tiles Quickstart</title><head>
  <body>
    <div id="header">
      Welcome to Tiles 101
    </div>

    <div id="body">
      Tiles 101 body content.
    </div>

    <div id=footer">
      &#169; 2007, Apache Software Foundation
    </div>
  </body>
</html>

This page can be logically cut up into sections: an outer template, a header, the body, and a footer. If it were the only page of the application, then it would make sense to render all of this content from a single jsp, however, in all likelihood, it is probably just one of many pages with a similar look and feel.

This tutorial will walk you through extracting each of these sections into tiles and then optimizing your tile design to reduce code duplication and the amount of configuration required. This will be accomplished in 4 easy steps.