Web Page Layouts


1. JSP pages with embedded HTML

The HTML is converted into JSP by embedding the code into the HTML. In this case each JSP has a duplicate header and footer and some common HTML codes. Problem with this type of Layouts is that changes in common view components, like header, footer and any of the common HTML codes occurring many of the pages , require changes in all relevant pages, as each page is responsible for laying out the view components. The number of pages decreases heavy maintenance cost.

Example a site having pets information

A JSP dog.jsp

<html>
  <body>
  Header
    Some description and pictures of dogs
  Footer
  </body>
</html>

Another JSP called cat.jsp

<html>
  <body>
  Header
    Some description and pictures of cats
  Footer
  </body>
</html>


2. JSP pages with JSP include directive's (static) or JSP actions (dynamic)


This layouts separates layout from contents, JSP pages are reusable but layouts are not. You only need to change common view components once. Hence, this solution greatly eliminates HTML and JSP code repetition, significantly improving application maintainability.
The drawbacks of this layout is each display page explicitly specifies where which JSP goes, if we want to change the content for the common JSP it ok but if we want to change the layout all the pages need to be changed.

dog.jsp
<html><head><title>Templates</title></head>
<body background='images/grass.gif'>
<table width='610'>
<tr valign='top'><td><jsp:include page='sidemenu.jsp'/></td>
<td><table>
<tr><td><jsp:include page='header.html'/></td></tr>
<tr><td><jsp:include page='dog.jsp'/></td></tr>
<tr><td><jsp:include page='footer.jsp'/></td></tr>
</table>
</td>
</tr>
</table>
</body></html>

cat.jsp
<html><head><title>Templates</title></head>
<body background='images/grass.gif'>
<table width='610'>
<tr valign='top'><td><jsp:include page='sidemenu.jsp'/></td>
<td><table>
<tr><td><jsp:include page='header.html'/></td></tr>
<tr><td><jsp:include page='cat.jsp'/></td></tr>
<tr><td><jsp:include page='footer.html'/></td></tr>
</table>
</td>
</tr>
</table>
</body></html>


3. JSP templates

We can use a Template that is a JSP page which uses JSP custom tag library to describe the layout of a page without specifying contents, in this layout the content is inserted into the template page during runtime, the advantage of this layout is that both content and layout can change without interfering each other, A single place to change when layout change is required, the drawback of the earlier layout which uses include is overcome and Template provides consistent look and feel without having to hard-code it in every page.

<%@ taglib URI='/WEB-INF/struts-template.tld' prefix='template' %>
<template:insert template='/defaultTemplate.jsp'>
<template:put name='title' content='Pets' direct='true'/>
<template:put name='header' content='/header.html'/>
<template:put name='sidebar' content='/sidemenu.jsp'/>
<template:put name='content' content='/dogs.jsp'/>
<template:put name='footer' content='/footer.html'/>
</template:insert>

4. Tiles

Tiles make the separation of layout from contents, JSP pages and Layouts are reusable, it is a superset of JSP templates with more features, it is extends concept of JSP templates with "parameterized components" or "Tiles"

Using Tiles's templating feature, you can define a layout say layout.jsp as a template. Since this is a layout, you insert placeholders instead of the actual view components using the Tiles insert tag. Thus, for all components, this page defines one reusable layout:

<%@ taglib uri="/WEB-INF/tiles.tld" prefix="tiles" %>
<html>
<body>
<%-- include header --%>
<tiles:insert attribute="header"/>
<%-- include body --%>
<tiles:insert attribute="body"/>
<%-- include footer --%>
<tiles:insert attribute="footer"/>
</body>
</html>

Other content pages, like dog.jsp and cat.jsp, use the above layout for arranging components. In the actual page, you insert the layout using the Tiles insert tag. Using the Tiles put tag, you can specify the actual view components for all placeholders specified in the layout.

Consider this dog.jsp

<%@ taglib uri="/WEB-INF/tiles.tld" prefix="tiles" %>
<tiles:insert page="/layout.jsp" flush="true">
<tiles:put name="header" value="/header.html"/>
<tiles:put name="body" value="/dog.jsp"/>
<tiles:put name="footer" value="/footer.html"/>
</tiles:insert>

Consider this cat.jsp

<%@ taglib uri="/WEB-INF/tiles.tld" prefix="tiles" %>
<tiles:insert page="/layout.jsp" flush="true">
<tiles:put name="header" value="/header.html/>
<tiles:put name="body" value="/cat.jsp"/>
<tiles:put name="footer" value="/footer.html"/>
</tiles:insert>


Tiles tutorial
Introduction to Tiles
Web Page Layouts
JSP pages with embedded HTML
JSP pages with JSP include directive's (static) or JSP actions (dynamic)
JSP templates
Tiles
Layouts
Classic layout
Menu layout
Vertical box or vbox or vstack layout layout
Multi-columns layout
Center layout
Tabs layout
Installing Tiles
For Struts1.0
For Struts1.1
For Tiles stand alone
Configuring Tiles
Internationalizing Tiles
Create a Tile Layout
Use a Tile Layout
Create a Tile Definition
Use a Tile Definition

Use of this website constitutes acceptance of the AllAppLabs.com Terms and Conditions