Skip to main content

Comparing webapp frameworks : Model 1 with scriptlets

Posted by simongbrown on November 23, 2005 at 11:42 AM PST

Before we dive into the frameworks, I want to drop back to basics to give some context behind why the frameworks exist and what benefits they provide. For this reason, let's look at a naive model 1 implementation of the sample application. If you're already familiar with the whole model 1 vs. model 2 thing, you might want to skip reading this particular entry.

Overview

An in-depth explanation of model 1 vs. model 2 can be found in Designing Web Applications and Servlet Patterns, but essentially a model 1 web application architecture is where all of your logic is wrapped up inside the pages of your application. By logic, I'm referring to things like business logic, presentation logic and page flow. Let's take a look at some examples of this by seeing how a model 1 version of the sample application might be built.

Home page

From a JSP perspective, a model 1 web application is very easy to build because you just start coding away in your JSP pages. Here's what the home page looks like when implemented using a model 1 architecture.

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="domain.*,
                 java.util.Iterator,
                 java.text.DateFormat" %>
<%
  BlogService blogService = new BlogService();
  Blog blog = blogService.getBlog();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title><%= blog.getName() %></title>
    <link rel="stylesheet" href="screen.css" type="text/css" />
  </head>

  <body>
    <div id="container">
      <h1><%= blog.getName() %></h1>
      <h2><%= blog.getDescription() %></h2>

      <%
        Iterator it = blog.getBlogEntries().iterator();
        while (it.hasNext()) {
          BlogEntry blogEntry = (BlogEntry)it.next();
      %>
        <div class="blogEntry">
          <h3><%= blogEntry.getTitle() %></h3>

          <%
            if (blogEntry.getExcerpt() != null) {
          %>
            <%= blogEntry.getExcerpt() %>
            <p>
            <a href="viewBlogEntry.jsp?id=<%= blogEntry.getId()%>">Read more</a>
            </p>
          <%
            } else {
          %>
            <%= blogEntry.getBody() %>
          <%
            }
          %>

          <p>
          <%
            DateFormat dateFormat = DateFormat.getDateTimeInstance(
              DateFormat.LONG, DateFormat.LONG, blog.getLocale());
            dateFormat.setTimeZone(blog.getTimeZone());
          %>
          Posted on <%= dateFormat.format(blogEntry.getDate()) %>
          </p>
        </div>
      <%
        }
      %>
    </div>
  </body>

</html>

I'm not going to explain each and every line, but the basic structure breaks down as follows.

  1. Define page characteristics and import Java classes.
  2. Locate the Blog instance to work with, via the BlogService.
  3. Write out the page header, title, etc.
  4. For each blog entry, write out the appropriate properties.
  5. Close all the tags.

For the "read more" link, this is simply implemented as a call to the blog entry detail JSP page, passing the blog entry ID as a parameter. Notice how this is conditionally included, depending on whether the excerpt is null - it's a good example of the simple presentation logic that you'll find in many web applications. The date formatting code is another example.

Blog entry detail page

The blog entry detail page is very similar.

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="domain.*,
                 java.text.DateFormat" %>
<%
  BlogService blogService = new BlogService();
  Blog blog = blogService.getBlog();
  BlogEntry blogEntry = blog.getBlogEntry(request.getParameter("id"));
  if (blogEntry == null) {
    response.sendError(HttpServletResponse.SC_NOT_FOUND);
    return;
  }
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title><%= blogEntry.getTitle() %> : <%= blog.getName() %></title>
    <link rel="stylesheet" href="screen.css" type="text/css" />
  </head>

  <body>
    <div id="container">
      <h1><%= blog.getName() %></h1>
      <h2><%= blog.getDescription() %></h2>

      <div class="blogEntry">
        <h3><%= blogEntry.getTitle() %></h3>

        <%= blogEntry.getBody() %>

        <p>
        <%
          DateFormat dateFormat = DateFormat.getDateTimeInstance(
            DateFormat.LONG, DateFormat.LONG, blog.getLocale());
          dateFormat.setTimeZone(blog.getTimeZone());
        %>
        Posted on <%= dateFormat.format(blogEntry.getDate()) %>
        </p>
      </div>
    </div>
  </body>

</html>

The scriptlet at the top of the page is probably the most interesting because that piece of code is responsible for locating the requested blog entry or sending the user off to an error page, which is simply configured through the web.xml file with the following XML fragment.

<error-page>
  <error-code>404</error-code>
  <location>/404.jsp</location>
</error-page>

Summary

Both pages contain a short piece of Java code at the top of the page to "set the scene". This type of logic is typically what you find scattered throughout the pages of a model 1 webapp, the downsides of which include reduced maintainability, reusability and testability. Both additionally contain several other short pieces of Java code to handle some presentation logic such as iteration, conditional processing and date formatting. As we'll see next, the JSP Standard Tag Library (JSTL) can help to solve at least some of these problems.

Related Topics >>