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
| 10477 views |
  • submit to reddit

You can notice that I do use these styles now in book-form-content.jsp and the book-list-content.jsp.

Formating dates and numbers in book-listing.jsp with fmt:formatNumber and fmt:formatDate

In the last step of the tutorial the book listing did not format the dates or number very well. JSTL includes the format tag library to format numbers and dates, which we can use in the book-list.jsp as follows:

/WEB-INF/pages/book-list-content.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix ="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix ="fmt" %>




<a href="${pageContext.request.contextPath}/book">Add Book</a>




<table class="listing">
	<tr>
		<th>Title</th>
		<th>Description</th>
		<th>Price</th>
		<th>Publication Date</th>
	</tr>
	
	<c:forEach var="book" items="${books}" varStatus="status">
		<tr class="${status.index%2==0 ? 'alt' : ''}">
			<td><a href="${pageContext.request.contextPath}/book?id=${book.id}">${book.title}</a></td>
			<td>${book.description}</td>
			<td>
			<fmt:formatNumber value="${book.price}" type="currency"/>
			</td>
			<td>
			<fmt:formatDate value="${book.pubDate}" type="both" dateStyle ="short" timeStyle ="short"/>
			</td>
		</tr>
	</c:forEach>
</table>












Notice the use of <code>fmt:formatNumber</code> and <code>fmt:formatDate</code> as follows:




==== /WEB-INF/pages/book-list-content.jsp fmt:formatNumber and fmt:formatDate====
<pre>
<a href="${pageContext.request.contextPath}/book">Add Book</a>
...




			<fmt:formatNumber value="${book.price}" type="currency"/>
...
			<fmt:formatDate value="${book.pubDate}" type="both" dateStyle ="short" timeStyle ="short"/>
</table>




The fmt:formatNumber formats the price as currency while the fmt:formatDate  formats the publication date using the short form. We will go into more detail about this format tags when we cover internationalization (i18n) as both these tags and other tags from the JSTL fmt  library support i18n. To learn more about these tags see the documentation as at  JSTL fmt documentation.

Book listing Using c:forEach varStatus to alternate the row colors in a table

You can use c:forEach varStatus to alternate the rows colors with CSS.

In the CSS file (/resources/style.css) we have defined this CSS rule:

/resources/style.css
...
.listing tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}
...

The above basically says if you are in a table that is using the listing class and it is a row tag (<tr>) which is using the alt class,  then set the color to #000000 and the background color of the column (td) to #EAF2D3. 

Now from a JSP/JSTL perspective, we need to detect even rows and output the class attribute of the row as alt.  You can do that with the varStatus as follows:

/WEB-INF/pages/book-list-content.jsp c:forEach varStatus
...
	<c:forEach var="book" items="${books}" varStatus="status">
		<tr class="${status.index%2==0 ? 'alt' : ''}">
...

The c:forEach's varStatus="status" captures the status object as a variable we can use. The status object has a current index as well as other properties about the current loop state.

The expression ${status.index%2==0 ? 'alt' : } says output alt if this row is even otherwise output an empty string. This binds every even number row to the alt CSS class.

Book Form

Nothing has really changed with book-form proper other than we moved it to book-form-content.jsp to take  advantage of the new template.

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




<form class="semantic" method="post"
	action="${pageContext.request.contextPath}/book">
	<fieldset>
		<legend>
			<c:choose>
				<c:when test="${not empty book.id }">
						Updating Book
					</c:when>
				<c:otherwise>
						Adding Book
					</c:otherwise>
			</c:choose>
		</legend>




		<div>
			<label for="title">Title</label> <input type="text" name="title"
				id="title" value="${book.title}" />
		</div>




		<div>
			<label for="description">Description</label>
			<textarea name="description" id="description" rows="2" cols="60">${book.description}</textarea>
		</div>




		<div>
			<label for="price">Price prebuffer_9lt;/label> <input name="price" id="price"
				class="money" value="${book.price}" />
		</div>




		<div>
			<label for="pubDate">Publication Date</label> <input name="pubDate"
				id="pubDate" class="date" value="${bookPubDate}" /> <label
				class="after">(MM/DD/YYYY)</label>
		</div>




		<c:if test="${not empty book.id}">
			<input type="hidden" name="id" value="${book.id}" />
		</c:if>




	</fieldset>




	<div class="button-row">
		<a href="${pageContext.request.contextPath}/book/">Cancel</a>  or <input type="submit" value="Submit" />
	</div>
</form>

Last but not least footer.jsp and header.jsp

We added two JSPs that implement the header and footer regions of our template as follows:

/WEB-INF/pages/footer.jsp
<div id="footer">
  <ul class="bottom">
  <li><a href="http://www.caucho.com/">HOME</a> |
  <li><a href="http://www.caucho.com/about/contact/">CONTACT US</a> |
  <li><a href="http://www.caucho.com/resin-4.0/">DOCUMENTATION</a> |
  <li><a href="http://blog.caucho.com/">BLOG</a> |
  <li><a href="http://wiki.caucho.com/">WIKI</a>




  </ul>
  
  <div class="about">
Copyright (c) 1998-2012 Caucho Technology, Inc. All rights reserved.<br><span class="caucho">caucho<sub>�</sub></span> ,
<span class="resin">resin<sub>�</sub></span> and
<span class="quercus">quercus<sub>�</sub></span>




are registered trademarks of Caucho Technology, Inc.
  </div>




  <div class="about">
     resin<sub>�</sub> is a cloud optimized, java<sub>�</sub> application server that supports the java ee webprofile <sub>�</sub>
  </div>
</div>
/WEB-INF/pages/header.jsp
<div>
<a href="${pageContext.request.contextPath}">
<img src="${pageContext.request.contextPath}/resources/logo.png"/>
</a>
</div>

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.