Abstracting Tiles

Identifying Tiles

In the introduction, we introduced the concept of tiles and took a look at a basic html page that we want to generate in our web application. In this step, we will abstract tiles from that page.

A Tile is a reusable markup fragment. The first step of using tiles is extracting the fragments which are common to the application out of the markup. This allows these components to be reused.

In our page, there are two common elements, the header and the fotter. Let's abstract those out into tiles and utilize the tiles tag library to invoke them. The following markup represents the necessary changes to our initial markup.

/fragments/header.jsp

<div id="header">
  Welcome to Tiles 101
</div>

/fragments/footer.jsp

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

/101/index.jsp

<html>
  <head><title>Tiles Quickstart</title><head>
  <body>
    <tiles:insertTemplate path="/fragments/header.jsp"/>

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

    <tiles:insertTemplate path="/fragments/footer.jsp"/>
  </body>
</html>

Tiles and Dynamic Content

Upon abstracting this tile, we notice that the generic header, which is supposedly going to allow us to minimize duplication, is hard coded to welcome us to Tiles 101. Perhaps we'd like to make this tile more dynamic so that we can dynamically set the name of the page we're welcoming the user to.

Let's update our tile and template:

/fragments/header.jsp

<div id="header">
  Welcome to <tiles:getAsString name="className"/>
</div>

/101/index.jsp

<html>
  <head><title>Tiles Quickstart</title><head>
  <body>
    <tiles:insertTemplate path="/fragments/header.jsp">
      <tiles:putAttribute name="className" value="Tiles 101"/>
    </tiles:insertTemplate>

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

    <tiles:insertTemplate path="/fragments/footer.jsp"/>
  </body>
</html>