Java EE: JSP 2.2 and Servlets 3.0 tutorial with Resin Servlet Container: Part Three
Java EE Servlet tutorial : Using JSPs to create header, footer area, formatting, and basic CSS for bookstore
Contents
|
Java EE Servlet/JSP tutorial: cleaning up our GUI
This tutorial is part of Java EE Tutorial covering JSP_2.2, and Servlets 3.0.
We are going to some cleanup of the GUI (make it look decent, or perhaps somewhat decent).
Adding site template using jsp:include, adding CSS, using JSTL fmt:formatDate and fmt:formatNumber
After the last step, we have a working CRUD Book listing that implements a rudimentary model 2 architecture. We can add, edit/update, list and read. Before we add any more functionality, let's create a site template with jsp:include.
This builds on the first two lessons. I suggest starting with those if you want some coherence, and perhaps not if you are just looking for a quick answer for using CSS, jsp:inclue, etc.
A lot of folks use Tiles (a JSP extension framework) instead of JSP. When Tiles first came out, JSP was somewhat limited in what it could do to reuse JSP pages. JSP has improved and now has JSP tag files (covered in a later cook book). This is not to say that you should avoid Tiles, but merely to state that unless you have a very complicated site layout, and perhaps even if you do have a complicated site layout, JSP is usually enough. Don't add complexity and another framework you need to learn unless and until you have explored what JSP can actually do.
Let me put it another way, don't include the Tiles framework on a greenfield application until you have fully explored JSP tag files. If you know and like Tiles then it might be ok to stick with it on a new project, but if you are not familiar with Tiles start with JSP includes and JSP tag files (covered later).
Defining a simple template with JSP parma.X
Here is an example of a JSP template.
/WEB-INF/pages/template.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<title>${param.title}</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/style.css" />
</head>
<body>
<jsp:include page="/WEB-INF/pages/header.jsp"/>
<h1>${param.title}</h1>
<jsp:include page="/WEB-INF/pages/${param.content}.jsp"/>
<jsp:include page="/WEB-INF/pages/footer.jsp"/>
</body>
</html>
This template will be called by book-form.jsp and book-list.jsp. This allows us to remove all of the boiler plate HTML code from book-form.jsp and book-list.jsp. When book-form.jsp and book-list.jsp call template.jsp they will pass two parameters via jsp:param, namely, title and content. The title is the title of the page, and the content is the short name of the JSP that actually is the content for the page.
Personal note, I like my JSP fragments to be well formed, i.e., I don't like starting a tag like <body> on one JSP page and finishing it on another. I have found over the years that this makes the JSP templates very hard to modify and maintain. This is more of a personal preference than a best practice.
Calling the template from book-form.jsp and book-list.jsp
Here are the book-form.jsp and book-list.jsp calling the template with <jsp:include>
/WEB-INF/pages/book-list.jsp<jsp:include page="/WEB-INF/pages/template.jsp"> <jsp:param name="content" value="book-list-content"/> <jsp:param name="title" value="Book Listing"/> </jsp:include>/WEB-INF/pages/book-form.jsp
<jsp:include page="/WEB-INF/pages/template.jsp"> <jsp:param name="content" value="book-form-content"/> <jsp:param name="title" value="Book Form"/> </jsp:include>
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(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