Friday, November 30, 2012

JSP so you don't kill yourself

OMG you could never do a webpage in servlet!!

You are absolutely correct.  You could not realistically do an entire website in servlets.  So what gives?  Why even use this technology in the first place?!

Ah bear with me here.  For now I'm going to show you some basic JSP and when I mean basic, I mean old school baby!  However, it's good to have a good foundation.  So why didn't I show you Servlet 2.5, which is still supported by Tomcat?  I'll get to it, it was actually easier to show Servlet 3 first before anything else, that's how far Servlet has come in its life.

So JSP = Java Server Pages.  Tomcat has a third piece to it called a JSP compiler.  This JSP compiler takes a JSP page and creates a servlet from it.  I know cool!  The JSP can be a mix of Java code and HTML/CSS/JavaScript and if you have ever used PHP, you wouldn't be wrong to say that JSP looks a lot like JSP.

So let's write a basic JSP page that shows us the current date/time and says "Hello, World!".

We are going to continue to use our project called helloone.  First head over to the Project Explorer (on the left) pane and right mouse click on the WebContent folder.  Select New → JSP Page.  No I won't make you make a shell of a JSP page the hard way.  On the first dialog we are going to choose the location and the file name.  The location should be in the root of the WebContent folder and we are going to call this page, index.jsp.  I know how surprising.

Click next and you'll get another dialog.  On this dialog, you get to select a template.  There are JSF templates, which I will get to soon enough, and then there are like four or five type of JSP templates.  Right now we are going to learn the New JSP File (html) version.  This is the old school version.  Now click finish and the new semi-blank JSP page should appear in your code window.

Select location and file name
Select JSP template to begin with.
So let's type a bit into this code window.  Here's the code and I'll explain after the bump.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h3>This is the JSP version.</h3>
 <h1><%= new java.util.Date() %></h1>
 <p>Hello, World!</p>
</body>
</html>

As you can see I've added an H3 tag, so we can tell the difference between our JSP version of this and our servlet version of this.  I've added a H1 tag with a weird tag enclosed by it.  And of course our "Hello, World!".

If you look closely you'll notice a tag at the top that is <%@ %> that was added by the template.

Let's go over each and all of the JSP tags while we're at it.

Type of tag What it means
<%@ %> JSP Directive — This is usually followed by an action or target like <%@ page %> or <%@ import %> These modify how the servlet is compiled.
<%= %> JSP Expression — An express is a single line of Java code, that if it is not a java.lang.String, then the toString() method is called. The JSP compiler turns these into printwriter.println([expression]);
<%! %> JSP Declaration — This expresses a piece of code that is located outside the doGet, doPost methods. If you needed your compiled servlet to have user defined methods, this be the place to put them.
<% %> JSP Scriptlets — This is code that is entered as you have typed it into the doGet and doPost method. The JSP compiler actually puts the code in a section called _jspService, but for all intents the effect is the code is inserted in verbatim into the resulting servlet.

There see, just four types of tags. I also tried to explain where a JSP compiler will put the code specified by each kind of tag into the resulting servlet.

So our first piece of JSP is a directive which will modify "page" attributes.  Here we set the content type to HTML and set the character encoding to UTF-8.  A DOCTYPE for HTML 4.01 compliance, some HTML and then we make it to the next piece of JSP code.  This is an expression, the piece of code emits a java.util.Date object, so the JSP compile will call the object's toString() method.  That converts the entire piece to:

printer_writer.println((new java.util.Date()).toString());

within the servlet.

The rest of the HTML code comes after that, and that's it.

Go ahead and save the JSP page and run the project in Eclipse.  Right mouse click on the project icon in the project explorer and choose Run as... → Run on Server.

Since this is called index.jsp, it will appear as the index page for the web application.  So you should see it by default in the Eclipse web browser.

Ta-da!  You've written your first JSP!  Now like I said this syntax is the JSP verions 1 way of doing stuff.  Eventually I'd like to show JSP 2.2 stuff as it is a lot more powerful.  However, as you can see.  Writing JSPs are a lot easier than writing servlets.  However, Servlets play a very big role in web applications.

No comments: