Web
Application: Separating
out Reusable Elements
The following
illustrates the separation out of control logic, presentation, javascript and .css for a very
simple JSP page.
Example:
Login.jsp
<%
String errorMessage = (String) session.getAttribute( "errorMessage " );
if (errorMessage == null )
{
errorMessage = "";
}
%>
<!-- end of logic part -->
<html>
<head>
<title>Time
Tracking</title>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/popup.js" ></script>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>
<body>
<%@ include
file="banner.jsp" %>
<p>To access the Time
Tracking system, you must enter your userID and
password.
</p>
<p
class="dynamic"> <%= errorMessage %> <p> <a href="javascript:popup('helptime.html')">Help?</a></P>
<form method="post" action="/wfmeasures/servlet/LoginServlet">
<table
width="100%">
<tr>
<td class="reg-label">User
Name: </font></td>
<td
class="reg-text"><input
type="text" size="25" name="userName"></td>
</tr>
<tr>
<td
class="reg-label">Password:</td>
<td
class="reg-text"><input
type="password" name="pwd"
size="25"></td>
</tr>
<tr>
<td
colspan="2" class="reg-text">
<input
type="submit" value="Login">
<input
type="reset" value="Clear Form">
</td>
</tr>
</table>
</form>
</body>
</html>
Popup.js
function popup(html)
{
window.open (html);
}
stylesheet.css
BODY
{
background:#FFFFFF;
}
.dynamic
{
FONT-FAMILY: Verdana, Arial, helvetica;
FONT-SIZE: 14px;
FONT-WEIGHT: normal;
COLOR:
#FF0000;
}
.reg-label
{
FONT-FAMILY: Verdana, Arial, helvetica;
FONT-SIZE: 12px;
FONT-WEIGHT:
bold;
COLOR:
#000000;
}
.reg-text
{
FONT-FAMILY: Verdana, Arial, helvetica;
FONT-SIZE: 12px;
COLOR:
#000000;
}
.reg-text-sm
{
FONT-FAMILY: Verdana, Arial, helvetica;
FONT-SIZE: 10px;
COLOR:
#000000;
}