Developing Simple Struts Tiles Application

In this tutorial I will show you how to develop simple Struts Tiles Application. You will learn how to setup the Struts Tiles and create example page with it.

Developing Simple Struts Tiles Application

Developing Simple Struts Tiles Application

     

Introduction
In this section  I will show you how to develop simple Struts Tiles Application. You will learn how to setup the Struts Tiles and create example page with it.

What is Struts Tiles?
Tiles is a framework for the development user interface. Tiles is enables the developers to develop the web applications by assembling the reusable tiles (jsp, html, etc..). Tiles uses the concept of reuse and enables the developers to define a template for the web site and then use this layout to populate the content of the web site. For example, if you have to develop a web site having more that 500 page of static content and many dynamically generated pages. The layout of the web site often changes according to the business requirement. In this case you can use the Tiles framework to design the template for the web site and use this template to populate the contents. In future if there is any requirement of site layout change then you have to change the layout in one page. This will change the layout of you whole web site.

Steps To Create Tiles Application
Tiles is very useful framework for the development of web applications. Here are the steps necessary for adding Tiles to your Struts application:

  1. Add the Tiles Tag Library Descriptor (TLD) file to the web.xml.
  2. Create layout JSPs.
  3. Develop the web pages using layouts.
  4. Repackage, run and test application.

Add the Tiles TLD to web.xml file
Tiles can can be used with or without Struts. Following entry is required in the web.xml file before you can use the tiles tags in your application.

<taglib>
   <taglib-uri>/tags/struts-tiles</taglib-uri>
  <taglib-location>/WEB-INF/struts-tiles.tld</taglib-location>
</taglib>

 
Create layout JSPs.

Our web application layout is divided into four parts: To Banner, Left Navigation Bar, Content Area and Bottom of the page for copy right information. Here is the code for out template (template.jsp):

<%@ page language="java" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html>

<head>
  <title><tiles:getAsString name="title" ignore="true"/></title>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="100%" bordercolor="#000000"
bgcolor="#E7FDFE">
<tr>
<td width="100%" colspan="2" valign="top"><tiles:insert attribute="header"/></td>
</tr>
<tr>
<td width="23%"><tiles:insert attribute="menu"/></td>
<td width="77%" valign="top" valign="top"><tiles:insert attribute="body"/></td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top"><tiles:insert attribute="bottom"/></td>
</tr>
</table>

</body>

</html>

We have defined the structure for web application using the appropriate html and did the following things:

  • Referenced the /WEB-INF/struts-tiles.tld TLD.
  • Used the string parameters to display title using the tiles:getAsString tag. If the attribute ignore="true" then Tiles ignore the missing parameter. If this is true then the Tiles framework will through the exception in case the parameter is missing.
  • To insert the content JSP, the tiles:insert tag is used, which inserts any page or web resources that framework refers to as a title. For Example <tiles:insert attribute="header"/> inserts the header web page.

Develop the web pages using layouts
Now we will use tile layout create a page to display the content page in the in our application. For every content page there is additional jsp file for inserting the content in the Layout, so we have to create two jsp files one for content and another for displaying the content. In our example these file are example.jsp and content.jsp. Here is the code for both the files:

content.jsp

<p align="left"><font size="5">Welcome to the Title Tutorial</font></p>
<p align="left"><font size="5">This is the content page</font></p>

The content.jsp simply define the content of the page. The content may be dynamic or static depending on the requirements.

example.jsp

<%@ page language="java" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>

<tiles:insert page="/tiles/template.jsp" flush="true">
   <tiles:put name="title" type="string" value="Welcome" />
   <tiles:put name="header" value="/tiles/top.jsp" />
   <tiles:put name="menu" value="/tiles/left.jsp" />
   <tiles:put name="body" value="/tiles/content.jsp" />
   <tiles:put name="bottom" value="/tiles/bottom.jsp" /> 
</tiles:insert>

The code <tiles:insert page="/tiles/template.jsp" flush="true"> specifies the tiles layout page to be used. We have set the flush attribute to true, this makes the tile file to be written to browser before the rest of the page. To specify the title of the page <tiles:put name="title" type="string" value="Welcome" /> is used. The following code is used to insert the actual pages in the template.:

   <tiles:put name="header" value="/tiles/top.jsp" />
   <tiles:put name="menu" value="/tiles/left.jsp" />
   <tiles:put name="body" value="/tiles/content.jsp" />
   <tiles:put name="bottom" value="/tiles/bottom.jsp" /> 

The top.jsp will be inserted in the layout's header region. The left.jsp will be inserted in the layout's menu region. The content.jsp wil be inserted in the layout's body region and the bottom.jsp will be inserted in the bottom region.

Repackage, run and test application
Add the following code in the index.jsp to test the this tile example:

<li>
<html:link page="/tiles/example.jsp">Tiles Example</html:link>
<br>
Example of creating first tile application.
</li>

Use the ant tool to build the application and deploy on the server. To test the application go to the index.jps and click on the Tiles Example link.