|
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:
-
Add the Tiles Tag Library Descriptor (TLD) file to the
web.xml.
-
Create layout JSPs.
-
Develop the web pages using layouts.
-
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 color="#000080" size="5">Welcome to the
Title Tutorial</font></p>
<p align="left"><font color="#000080" 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.
|