Create Dynamic HTML5 Web Content using Eclipse Juno

By Rob Gravelle

6/11/13

The key to making dynamic web applications interactive in Java is the use JSP pages. They do so by including special tags that are parsed and evaluated by the server, thus allowing the page to provide up to the second content. We're going to include two special tag libraries called c and fmt. The "c" stands for core, and includes tags such as choose, if, forEach, and out. The "fmt" library contains various tags for formatting data such as numbers and dates. There are also specialized tag libraries for SQL, XML, and to perform functions. In today's article we'll be delivering dynamic content to the user via a JSP page that we'll be constructing in Eclipse Juno.

Creating the Project

The type of project that we will be working with here today is called a "Dynamic Web Project". You'll find it under File > New > Dynamic Web Project from the main menu. This bring up the Dynamic Web Project wizard that will guide you through the project creation process.

On the Dynamic Web Project screen, you'll be asked to give your project a name. Among the many properties on the screen, you'll need to change the Dynamic web module version from 3.0 to 2.5, because our server - Jetty 6 - does not support version 3.0. At this point, your screen should look something like the following:

Click the Finish button because we don't need to go to the Java or Web Module screens.

That will create the following folders and files, which you can view in the Project Explorer view:

Creating the index.jsp File

To create the JSP page:

Creating JSP pages in eclipse is quite straight-forward, thanks to the wizard:

  1. Right-click on the WebContent folder in the Project Explorer and select New > JSP File from the popup menu. That will bring up the New JS File wizard.
  2. On the New JSP File screen, give the file the name "index.jsp", so that it's the default page for your web app.
  3. Select the "New JSP File (html)" template from the Templates list and click Finish to create the file:

To include the c and fmt libraries in the page, add the following two tags below the page tag at the top:

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

You should also truncate the DOCTYPE tag to new simplified version, in order to make the page HTML5 compliant:

<!DOCTYPE html>

Feel free to give your page a title, and include the c and fmt tags in the document body as follows:

<c:out value="Hello World!"/>
<p>It is now: <fmt:formatDate value="<%=new java.util.Date()%>" pattern="E, yyyy-MM-dd h:mm:ss a" /></p>

In order to use the special JSP tags, you'll need to download the jstl and standard jar files. There are lots of download sites to choose from. I used the Apache site.

Place the jar files in the WebContent\WEB-INF\lib folder. At that point, you may get an error in your JSP page stating that eclipse can't find the tag library descriptor for "http://java.sun.com/jstl/core". From what I can tell, this is related to a bug caused by eclipse automatically adding the jars to the Web App Libraries. That results in eclipse looking for a local copy of the c-1_0.tld file. Luckily, this issue is easily remedied:

  1. Open your Project Properties by right-clicking it in the Project Explorer and selecting Properties from the context menu.
  2. Navigate to Java Build Path in the left-hand tree of the Properties dialog.
  3. Click on the Libraries tab.
  4. Expand the Web App Libraries item to see that the jstl.jar and standard.jar files have been added.
  5. Select Web App Libraries and click the Remove button to delete the reference to the Web App Libraries: