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>
|
