The Grand Tour: Old School JSP

Thought I was gone, didn’t you? December was a crazy month for me, so I had to put this blog on hold, but with the new year comes new priorities, and I’m back to serve you, the Java-hungry hordes.

First up this year, another step along the path to understanding the state of the art in Java Web application development. Previously, we looked at servlets, Java classes that are designed to respond to Web browser requests. Using a servlet, we assembled a simple Web interface to our database-driven to-do list. And while it worked, it would be a pain in the butt to write practical Web applications this way, with the application logic all mixed in with the HTML code for the page.

JavaServer Pages (JSP) were created to overcome this weakness of servlets. Instead of writing a Java class with HTML code in it, you write an HTML page with Java code in it. The server then converts this page into a Java servlet on the fly in order to process page requests. As we’ll see, reversing the approach in this way solves some problems, but creates some new ones.

Starting with the to-do list Web application we built last time, let’s do away with our pesky servlet and replace it with a JavaServer page that does the same thing: todo.jsp. Here’s the updated file and directory structure for our application:

/todo.jsp /styles.css /WEB-INF/web.xml /WEB-INF/classes/com/sitepoint/ToDoItem.class /WEB-INF/classes/com/sitepoint/ToDoItem.java /WEB-INF/classes/com/sitepoint/ToDoList.class /WEB-INF/classes/com/sitepoint/ToDoList.java /WEB-INF/classes/uk/co/anyware/html/HTMLEscaper.class /WEB-INF/classes/uk/co/anyware/html/HTMLEscaper.java /WEB-INF/lib/mysql-connector-java-version-bin.jar

So let’s get started writing our todo.jsp file, so open up your favourite text editor and we’ll get cooking!

JSP files look a lot like HTML files, except that scattered throughout them will be special JSP tags. As a general rule, all JSP tags start with <% and end with %>. As we look at more modern and advanced ways of working with JSP in future, this is a rule that will be broken, but for now it’s okay if you take this as gospel.

The first thing we need to do is provide some information about the page. This is done with a page directive. Directives are a type of JSP tag that contain various settings and other types of configuration information. Directives have an @ sign following their opening <%. Here’s our page directive:

<%@ page import="java.util.*,com.sitepoint.*,uk.co.anyware.html.*" %>

The most common use for a page directive is to import Java packages that will be used by the Java code in the JSP file. In this case, we’ve indicated that we need classes from java.util, com.sitepoint, and uk.co.anyware.html. These same packages were imported by our to-do list servlet (the code for which you might like to have nearby for comparison).

We can then proceed to write our page much as we would any (X)HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <title>To-Do List</title>   <meta http-equiv="content-type"       content="text/html; charset=iso-8859-1" />   <link rel="stylesheet" type="text/css"       href="<%= request.getContextPath() %>/styles.css" /> </head>

Look closely, and you’ll see another JSP tag in there: <%= request.getContextPath() %>. This is what we call an expression, as indicated by the = sign following the opening in the tag. Expressions are used to output the values of Java code; in this case, we're outputting the value returned by the getContextPath() method of the request object–the root directory of our Web application, which the browser needs to locate the styles.css file.

Yes, JSP code, just like servlet code, has access to the browser’s request through a variable called request. There is also a response variable for the browser’s response. Both of these variables are called implicit objects, as they are created implicitly for you.

Other implicit objects include out, an object that works just like the PrintWriter that is used in a servlet to send output to the browser, session, an object for storing values over the course of a particular user’s visit to your site, and application, an object for storing values for use throughout your application.

Now, just as our servlet relied on a ToDoList object to do a lot of the work of the application, so will our JSP file. We need to declare this object, and for this we need another JSP tag: a declaration.

<%! private ToDoList toDoList;  public void jspInit() {   toDoList = new ToDoList(getInitParameter("jdbcDriver"),       getInitParameter("jdbcConnectionString"));  } %>

As you can see, declarations are indicated by an exclamation mark (!) following the opening <%, and contain Java property and method declarations just like those you would find in a Java class.

In this case, we’ve declared a ToDoList object called toDoList, and we have written a method named jspInit() that creates this object from initialization parameters, just as we did in our servlet’s init() method. While init() is a special method for servlets that is called by the server before a servlet is used for the first time, jspInit() is a special method that is called automatically to initialize JSP files.

Next up is the code that will process form submissions in this page. You’ll remember from our servlet that the page will contain two forms: one for adding items to the to-do list, and one for deleting them. The code for processing these submissions will be identical in our JSP, except that it goes inside yet another type of JSP tag: a scriptlet.

<% String newToDo = request.getParameter("newtodo"); if (newToDo != null) {   toDoList.addItem(newToDo);   response.sendRedirect(request.getRequestURI());   return; }  String deleteid = request.getParameter("deleteid"); if (deleteid != null) {   try {     toDoList.deleteItem(Integer.parseInt(deleteid));          response.sendRedirect(request.getRequestURI());     return;   }   catch (NumberFormatException e) {     throw new ServletException("Bad deleteid value submitted.", e);   } } %>

When JSP was first conceived, scriptlets were expected to be the most common JSP tag type, so they are indicated with simple <% and %> delimiters–no special character inside the start of the tag. The Java code inside a scriptlet is executed every time the page is requested.

With the form processing taken care of, all that’s left is to produce the forms themselves. First up, we have our to-do list, which displays the current to-do items and allows the user to delete them:

<body>   <%   Iterator toDoItems = toDoList.getToDoItems();   if (toDoItems.hasNext()) {     %>     <form action="<%= request.getRequestURI() %>" method="post">       <select name="deleteid" size="<%= Math.max(2, toDoList.getItemCount()) %>">         <%         while (toDoItems.hasNext()) {           ToDoItem toDoItem = (ToDoItem) toDoItems.next();           %>           <option value="<%= toDoItem.getId() %>"><%= HTMLEscaper.escape(toDoItem.toString()) %></option>           <%         }         %>       </select>       <input type="submit" value="Delete Selected Item" />     </form>     <%   }   %>

Looks like a bit of a mess, doesn’t it? What we have here is a mixture of HTML code, JSP scriptlets, and JSP expressions. Allow me to break it down for you.

  <%   Iterator toDoItems = toDoList.getToDoItems();   if (toDoItems.hasNext()) {     %>     ...     <%   }   %>

The first scriptlet gets an Iterator object containing the items in the to-do list. Our servlet did the exact same thing. Since we don’t need to display the to-do list if it doesn’t contain any items, we use an if statement to check if it does using the Iterator‘s hasNext() method.

All of the code for the form then goes inside this if statement. The closing brace of the if statement is in the last scriptlet of the page. As you can see, the Java code inside a scriptlet doesn’t need to be self-contained; you can think of the HTML code between your JSP tags as instructions to output that HTML code, with the scriptlets providing the logic for when and how that HTML should appear.

In the form, we use JSP expressions to output required values in our <form> and <select> tags:

    <form action="<%= request.getRequestURI() %>" method="post">       <select name="deleteid" size="<%= Math.max(2, toDoList.getItemCount()) %>">         ...       </select>       <input type="submit" value="Delete Selected Item" />     </form>

Finally, we need to output an <option> tag for each item in our to-do list. The code is once again remarkably similar to our servlet, as we use a while loop to do the job:

        <%         while (toDoItems.hasNext()) {           ToDoItem toDoItem = (ToDoItem) toDoItems.next();           %>           <option value="<%= toDoItem.getId() %>">             <%= HTMLEscaper.escape(toDoItem.toString()) %></option>           <%         }         %>

It’s a mess at a glance, but if you look carefully (or better yet, if you have an editor that highlights JSP tags in a different colour), you can see how the logic is in JSP scriptlets, and the rest of the code is just HTML with JSP expressions to output dynamic values.

The form for adding new to-do list items is a piece of cake compared to the first one:

  <form action="<%= request.getRequestURI() %>" method="post">     <input type="text" name="newtodo" />     <input type="submit" value="Add New Item" />   </form> </body> </html>

That takes care of our JSP file! The only thing left is to update the web.xml configuration file for our application to make the initialization parameters (jdbcDriver and jdbcConnectionString) available to our JSP file:

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">   <display-name>ToDoJSP</display-name>   <servlet>     <servlet-name>toDo</servlet-name>     <jsp-file>/todo.jsp</jsp-file>     <init-param>       <description>The JDBC driver class.</description>       <param-name>jdbcDriver</param-name>       <param-value>com.mysql.jdbc.Driver</param-value>     </init-param>     <init-param>       <description>The JDBC connection string.</description>       <param-name>jdbcConnectionString</param-name>       <param-value>jdbc:mysql://localhost/todo?user=root&amp;password=password</param-value>     </init-param>   </servlet>   <servlet-mapping>     <servlet-name>toDo</servlet-name>     <url-pattern>/todo.jsp</url-pattern>   </servlet-mapping> </web-app>

There are two significant changes from the web.xml file we used with our servlet:

  • Instead of a <servlet-class> tag to indicate the servlet for which we are providing parameters, we have a <jsp-file> tag to indicate the JSP file.
  • The <url-pattern> tag in the <servlet-mapping> points to the JSP file as well.

With those changes made, you’re ready to bundle up the application and deploy it on your server. Unlike servlets, you don’t need to compile JSP files in advance–the server will convert them to servlets and compile them for you on the fly. You do, however, still need to compile the classes that your JSP uses (ToDoList, ToDoItem, HTMLEscaper).

As with the servlet, use the jar command-prompt utility to create a WAR file containing your application:

jar cvf ToDoJSP.war .

Drop this file in Tomcat’s webapps directory to deploy it (or deploy it using whatever Java-compatible server you prefer), and edit the deployed web.xml file to match your database configuration.

Then load http://localhost:8080/ToDoJSP/todo.jsp to try out your application. You should see your familiar to-do list interface, this time generated by a JSP.

Here’s the finished WAR file, including source code, for you to play with:

Download the code (250KB)

Now, you’ll recall that the whole point of JSP was to overcome the messiness of mixing HTML code into the Java code of a servlet. If you’ve looked at the code for our new JSP file, I’d forgive you for being skeptical about whether we’ve achieved our aim.

Our to-do list JSP file is written with what I call “old school JSP”. It’s pure JSP, as it was originally conceived years ago, with none of the modern amenities. Over the next few weeks, I’ll show you how to modify it using current and advanced features of JSP. First of all, we’ll bring servlets back into the picture (but in a much simpler form!), then we’ll look at standards like JavaBeans, the Java Standard Tag Library, and JSP Expression Language.

Generally speaking, the goal will be to get rid of all the Java code in the JSP file, either by replacing it with more designer-friendly tag constructs, or by moving it into external, independent Java classes. By the time we’re done, you’ll know how to write a JSP file so that it is barely distinguishable from a standard HTML file.

Replay

Category: java Time: 2005-01-01 Views: 2
Tags:

Related post

  • The Grand Tour: Kickin' It MVC Style 2005-01-14

    January is turning out to be a pretty light month for Java news. Oh well, more time to continue my grand tour of Java Web development! Still following along? Last time, I showed you how to convert a "to-do list" servlet into a JSP. Unfortunately

  • The Grand Tour: A crash course in Java-less JSP 2005-05-22

    It's time to take the Java out of JavaServer Pages. In the last instalment of my "Grand Tour" of Java Web application technology, we split our to-do list Web application into three parts: the model, classes that manage the data at the heart of o

  • The Grand Tour: Servlets 2004-11-05

    If you've followed along, you've now got a to-do list database and a couple of classes that view and update it. The next step is to take that functionality to the Web by wrapping it in a Web application. On the Java platform, there are dozens of ways

  • Zabbix and time series data from old-school devices 2012-07-19

    We should monitor and log ~1000 devices (1..4 sensor per device). SMS and email alert and the common functions are required if anything going wrong. I think we instead of developing the whole ecosystem in .NET/C# it would be nice to use an existing o

  • What is the typical example of old school website design? 2010-11-07

    I want to build a website for a retro thing that was popular in the mid 90s (beginning of the commercial internet). So I want use old designs that was very popular at that time. The first thing that comes to my mind was those "under construction"

  • What approach would you take to develop an old school game? 2011-04-16

    Possible duplicate: Best technology for online games? I have agreed to show my child how to develop software. He wants me to help him develop a game. If you were me then what approach would you take to develop an old school game? I was thinking about

  • 2D character controller in unity (trying to get old-school platformers back) 2012-01-13

    This days I'm trying to create a 2D character controller with unity (using phisics). I'm fairly new to physic engines and it is really hard to get the control feel I'm looking for. I would be really happy if anyone could suggest solution for a proble

  • File browser window in the "Ubuntu Tour" has no menu bar. Is this real? 2014-09-18

    File browser window of new (14.04?) Ubuntu has no menu bar across the top like old one. Don't want to go backward. So it seems a bad idea to upgrade to the new Ubuntu. Or does the file browser actually have a menu bar, just not shown on the tour? The

  • have we come full circle with microservices, back to very old school approaches? 2015-03-11

    In terms of software architecture and design, how do microservices "stack up" (pun intended) against middleware? I'm coming from Java, and it seems like as you move away from straight REST as an API, and abstract away different layers and connec

  • Old-School RJ11-Based Phone 2015-06-11

    On an old-school RJ11-based telephone system, which of these statements is accurate: 1) Each wire contains a waveform constructed from the sounds detected by one party's handset OR 2) One wire is the signal and the other is a ground wire ? I say #1,

  • From old-school redirect-after-post to modern ajax form handling 2016-02-06

    Up to now I mainly did old-school web form handling: redirect after post if the data is valid show the form again with errors if the data is not valid I am searching a JS library which helps me to switch to ajax form submitting. My needs: the server

  • Is the source code of the online tour available? 2011-10-13

    For Oneiric Ocelot launch, there was an awesome Tour created for showcasing how Ubuntu especially Unity works. The Ubuntu Online tour actually mimics a whole desktop and to a greater extent behaves a lot like using Unity in real. My question is where

  • Is it generally a good idea to allow the reuse of old usernames from deleted accounts? 2012-03-03

    On a Social Networking site, is it generally a good idea to allow the reuse of old usernames from deleted accounts, or is it better to prohibit their reuse forever? How do the big boys do it (Facebook, Google, etc.)? Generally, as far as the DB is co

  • Why do the fonts in old papers look disheveled? 2013-03-23

    The fonts of old papers (<2000) tend to look disheveled on my Linux box. Why is that? There's the paper: http://acl.ldc.upenn.edu/H/H94/H94-1048.pdf --------------Solutions------------- This is almost certainly due to the scanning process (whether OC

  • Why is the .xsession-errors.old file so big? 2013-06-30

    Problem Many users (including me) found out from one moment to another that the usage disk space is really strange. One day I had 50Gb free and the next I had 3Gb, it is just crazy. This happened with different versions of Ubuntu (11.04, 12.04 and 12

  • Where to find the images for old Ubuntu Beta Releases? 2014-03-10

    As a developer and a power user, I'd like to know from where can I download the images for old Betas like, Saucy Beta, Quantal Beta, and some EOL Beta releases. --------------Solutions------------- Not all Beta releases are available, I've found this

  • What is the appeal of old style numbers and why do modern fonts still include them? 2014-03-27

    Here's text rendered with Raleway, a font designed around 2012, according to Google Fonts: I'm far from a font expert, but the vertical zig-zag of numbers looks just jarring to me, and makes the text less legible. What is the appeal of old style numb

  • Formatting of entire column based on the grand total using color scale? 2014-08-19

    This might be answered somewhere else, but I haven't been able to find a solution to this. The question is how to use color scale for entire column just based on grand total. I have attached the picture for reference. I am happy with the color scale

  • How to make those old-school GUIs (like the debian/arch installer) 2011-08-30

    I've been doing a lot of installs lately, and when possible I usually opt for the text install from the Live CD's GRUB menu. Most installers looks like this: I always thought these GUIs (if you can call them as such) were really awesome and lightweig

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 2.396 (s). 13 q(s)