COMP 405
Spring 2014

JavaServer Pages
Home  Info  Owlspace  Java Resources  Eclipse Resources  SharePoint  Piazza

Page still under construction!

JavaServer Pages (JSP) is a technology that enables one very quickly build Java servlet applications by fusing the HTML/CSS/Javascript code to format a web page with the Java code to process that web page.    In essence, a JSP hosting service such as GAE or an Apache Tomcat server dynamically compiles a JSP document, creating both a standard web page and a Java servlet.   When a browser client requests a JSP, the request is routed to an auto-generated servlet which contains the Java code defined in the requested JSP.   The JSP infrastructure enables the Java code to transparently interact with the HTML web page do tasks such as dynamically add HTML components to the web page.    This is akin to the "templating" technologies used in other systems, e.g Django and WTForms.   

 A JSP page looks just like a regular HTML web page except that it has a ".jsp" extension and it contains JSP-specific "tags".

JSP Tags

While entire libraries of JSP tags exist, for our purposes, there are really only two tags that are of any importance:

Automatic URL Routing to JSPs in GAE

In GAE, a URL route to a JSP will automatically be set up based on the JSP's location in the WAR folder relative to the root of the WAR folder.  Additional routes to the JSP may be set up in the app.yaml file to handle wildcard routes or welcome file scenarios.

 

Model-View Separation in JSPs

The caveat of JSP's however, is that it is too tempting to completely fuse one's back-end processing code with the front-end presentation code.   In such, following typical examples posted on-line may not be the best strategy.

To avoid this trap, consider the following "rules of thumb":

Below is some example code for a JSP that enables a client to upload a file to the Google cloud (the back-end storage code not shown) and displays a success/error message above the form.   Typically, the client browser would first request this JSP using a GET request (normal web page request) which would result in a page with no message shown.   Then when the user clicks the upload button, the form calls this same JSP page, but with a POST request containing the upload information.   This time the page is returned with either a success or error message and since it is the same page, the form is still available for the user to upload more files.

Notice how the processing of the request is handled by instantiating the GAESave object and delegating to its processRequest() method.   The return value is a GAESave.IResult object which is either a "success", "failure" or "neither" type (note that the actual class type is immaterial here, only what case it calls on the visitor!) and contains a String message appropriate for its type.  The GAESave.IResult object is independent of the view, so it contains no HTML formatting information--that duty is handled by the JSP's GAESave.IResultVisitor object, thus decoupling the model from the view.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<%@ page import="edu.rice.comp405.save.GAESave"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Upload a File</title>
</head>
<body>
	<%!
	    // Visitor to process the GAESave.IResult returned by GAESave.processRequest()
		GAESave.IResultAlgo<String, Void> resultAlgo = new GAESave.IResultAlgo<String, Void>() {
			public String successCase(String msg, Void... nu) {
				return "<h2>Success!</h2><p style=\"font-weight:bold; font-style:italic; text-indent: 2.0em;\">  Your code can be accessed at: "
						+ msg
						+ "</p>\n<p style=\"font-style:italic; text-indent: 2.0em;\">Upload another file?</p>";
			}
	
			public String failureCase(String msg, Void... nu) {
				return "<h2>Upload Error Encountered!</h2>\n"
						+ "<p style=\"font-style:italic; text-indent: 2.0em;\">" + msg + "</p>"
						+ "<p style=\"font-style:italic; text-indent: 2.0em;\">Please try again.</p>";
			}
	
			public String neitherCase(String msg, Void... nu) {
				return "<p style=\"text-indent: 2.0em;\">" + msg + "</p>";
			}
		};
	%>
	<h1>Upload</h1>


	<div style="padding: .5em;">
		<%
			out.println((new GAESave()).processRequest(request).execute(resultAlgo)); // processRequest() returns a GAESave.IResult object that is a visitor host.
		%>
		<p>Save a local file on your computer to the Google cloud.</p>
		<form method="post" action="/save" enctype="multipart/form-data">
			<table>
				<tr>
					<th><label for="id_upFile">File to upload:</label></th>
					<td><input type="file" name="upFile" id="id_upFile" size=90 />
					</td>
				</tr>
				<tr>
					<th><label for="id_fileText">Or paste the file contents here:</label></th>
					<td><textarea id="id_fileText" rows="10" cols="80"
							name="fileText"></textarea></td>
				</tr>
			</table>
			<br /> <input type="submit" value="Upload" />
		</form>
	</div>
</body>
</html>

 

Java Beans with JSPs

Coming soon...

 

Known Issues

"Your project must be configured to use a JDK in order to use JSPs" error

Since JavaServer Pages are dynamically compiled, Eclipse needs access to the Java compiler in order to run a JSP in its development server.   You need to go to Eclipse Preferences and under Java/Installed JREs, add the JDK location and set it to be the default.    Be sure that your project is also set to use the default, which is now the JDK.

If this doesn't work, try this solution to a similar problem.

References:

 

 

References

© 2013 by Stephen Wong