Bill Digman is a Java EE / Servlet enthusiast and Open Source enthusiast who loves working with Caucho's Resin Servlet Container, a Java EE Web Profile Servlet Container. Bill has posted 12 posts at DZone. You can read more from them at their website. View Full User Profile

Java EE: JSP 2.2 and Servlets 3.0 tutorial with Resin Servlet Container: Part Three

11.19.2012
| 10236 views |
  • submit to reddit
template.jsp walk through

The template itself allows us to handle all common tasks for site layout in one location. The logic of this template is fairly simple, but since it can and does use JSTL core tags, the logic could be a lot more sophisticated.

Let's walk through this template step by step:

/WEB-INF/pages/template.jsp page directive and include JSTL core
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>




Above we just do our standard JSP page directive and import the JSTL core tag library for display logic.

/WEB-INF/pages/template.jsp
<!DOCTYPE HTML>
<html>
<head>
<title>${param.title}</title>
<link rel="stylesheet" type="text/css"
 href="${pageContext.request.contextPath}/resources/style.css" />
</head>
<body>

Above just defines that basic HTML structure notice that we import the CSS file called /resources/style.css. This defines the look and feel for our site.

Note the style.css is a CSS code copied from various tutorials and sample CSS templates with some slight customizations. A true coverage of CSS is beyond the scope of this tutorial and cook book. But the general strategy I have used for doing CSS is follows: 

  1. Ask customer what they might like the site to look like, tell them to send you links to similar looking sites
  2. see if there is budget enough to hire someone who is artistic and has style and loves doing site design, if then hire him, and let him do all of the pixel pushing
  3. If no budget to hire someone good at web design, look on Internet for sample CSS projects and/or look at sites customers liked, copy style and CSS layout

Problem with the above is that customers don't always let you know what they want, but are very  clear about what they don't want. I've done all three. I prefer to let others send me look and feel, mockups (prefer mockups done in CSS and HTML), and then I hack it until it looks close enough. You need to learn  CSS well enough to muck with CSS that you find on the Internet. Start by going through this tutorial W3 Schools CSS tutorial. There are times when you just can't find a CSS example that does exactly you want, in those cases you may find it helpful to consult the actual CSS specification.

Here is the style.css for completeness (please only skim it), note that it is a collection of stuff I could find in five minutes to make the site look somewhat decent without spending a lot of time.  (Color palate for sample is really disgusting at the moment, the H1 is cartoonish big and the logo is too big, and  I am not going to change any of it, ever.)

/resources/style.css
/* The CSS for the table was based of an example at wc3 schools. 
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
*/
table.listing 
{
font-family: Arial, Helvetica, sans-serif;
width:80%;
border-collapse:collapse;
}








.listing td, th 
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}




.listing th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}




.listing tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}








/* unvisited link */
a:link 
{
	text-decoration:none;
	color:#000000; 
}




/* visited link */
a:visited 
{
	text-decoration:none; 
	color: #707070 ;
}




a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */




/* The CSS for the form was taken from this project. 
https://github.com/pmcelhaney/semantic-form.css/blob/master/index.html
*/




form.semantic {
	width:70%;
}




form.semantic fieldset
{
	clear: both;
	margin: 1em 0 0 0;
	padding: 10px;
	overflow: auto;
	background-color: #f8f8f8;
	border: 1px solid #888;
}




form.semantic legend
{
	font-weight: bold;
}




form.semantic div
{
	clear: both;
	margin: 0;
	padding: 0.5em 0 0 0;
	overflow: visible;
}








form.semantic label 
{
	display: block;
	float: left;
	width: 120px;
	text-align: right;
	padding: 2px 1ex 6px 0;
	vertical-align: baseline;
}
          
form.semantic label.after 
{
	width: auto;
	text-align: left; 
	display: inline; 
	float: none;
}




form.semantic label.long 
{
	clear: both;
	width: auto;
	text-align: left;
	float: none;
}




form.semantic input
, form.semantic select
, form.semantic textarea
{
	float: left;
}




form.semantic input.date {
	width : 100px;
}








form.semantic input.money {
	width : 100px;
}




form.semantic input[type=radio]
, form.semantic input[type=checkbox]
{
	vertical-align: text-bottom;
}




form.semantic ul {
	list-style-type: none; 
	float: left;
	padding: 0;
	margin: 0;
}




form.semantic li {
	clear: both;
	padding: 0.2em 0;
}




form.semantic li label {
	width: auto;
	text-align: left;
	padding: 0;
}   




form.semantic div.field-row 
{
	clear: none;
	float: left;
	margin: 0;
	padding: 0;
	overflow: visible;
}




form.semantic div.field-row *
{
	float: none;
	display: inline;
}




form.semantic .button-row
{
	text-align: right;
}




form.semantic .button-row input
{
	float: none;
}




form.semantic div.long label 
{
	width: auto;
	text-align: left;  
	float: none;
}




form.semantic div.long textarea 
{
	width: 100%;
}




/* Errors -- for use with JQuery Validate, etc. */




form.semantic input.error
, form.semantic select.error
, form.semantic textarea.error
{
	background-color: #77002a;
	color: white;
}                                                




form.semantic label.error
{
	width: auto;
	color: #77002a;
	text-align: left;
}       




/* from caucho.com */
#footer hr
{
  width: 100%;
}
#footer
{
  font-size: 80%;
  text-align: right;
}




/* bottom nav */




.bottom {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size : 90%;
  color : #999;
}




ul.bottom {
  list-style-type : none;
  padding : 0em;
  margin : 0;
  margin-top : 3em;
  text-align : center;
}




.bottom li {
  display : inline;
  margin : 0.1em 0.1em;
  padding : 0.0em;
}




.bottom a {
  color : #999;
}




.bottom a:hover {
  color : #ffcc33;
}




/* bottom */




.about {
  color : #999;
  font-family : Helvetica, Arial, sans-serif;
  text-align : center;
  font-size : 90%;
}




div.about {
  margin-top : 1em;
}




Bill Digman is a Java EE / Servlet enthusiast and Open Source enthusiast who loves working with Caucho's Resin Servlet Container, a Java EE Web Profile Servlet Container.

Bill Digman is a Java EE / Servlet enthusiast and Open Source enthusiast who loves working with Caucho's Resin Servlet Container, a Java EE Web Profile Servlet Container.

Caucho's Resin OpenSource Servlet ContainerJava EE Web Profile Servlet Container
Published at DZone with permission of its author, Bill Digman.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Bill Digman replied on Wed, 2012/11/21 - 11:15am

Here is a link to the pdf version of this tutorial, I was unable to upload due to file size constraints.

<<LINK REMOVED>>

Jonathan Fisher replied on Mon, 2012/11/19 - 4:46pm

Any chance you can post the PDF to a place that doesn't require you to register and or pay money to download? Like Google Docs?

Bill Digman replied on Wed, 2012/11/21 - 10:43am in response to: Jonathan Fisher


Jonathan- I didn't realize that you needed to pay or register to download, I will post a link to google docs.

 

Thanks for your feedback!

 

Bill Digman replied on Wed, 2012/11/21 - 11:14am

Here is a Google Docs Link to a pdf version. Thanks again Jonathan Fisher for your feedback!

https://docs.google.com/open?id=0B1TkWSVP5Fk1WFJJdldFZk9WUlE

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.