Page Templating Using JSP Custom Tag

Templating greatly simplifies management of layout of pages in a large site. Simply put, a template captures the page layout and defines content placeholder areas. Actual individual pages provide content for these placeholders. This has two advantages:

  1. Individual page files become very simple since they contain dynamic content only. Common items like, importing CSS files, scripts, header, footer, side-bar etc. are all isolated in the template file.
  2. If you change the page layout in the template file, the change is immediately reflected site wide for hundreds of pages.

Java has several templating tools. JSF comes with Facelet. You can also use Tiles. But, did you know that JSP now has built-in templating mechanism? Yes, that’s true. You get a fine templating engine hidden within the custom JSP tag mechanism. In this article, we will learn how to build templates using basic JSP.

Create the Template

A template is created as a custom tag. Each placeholder in the template is defined using an attribute. Here is a simple template. This is created as WEB-INF/tags/simple_layout.tag. (All custom tags in a web module go inside WEB-INF/tags and have .tag extension).

<!DOCTYPE html>
<%@tag description="Simple Template" pageEncoding="UTF-8"%>

<%@attribute name="title"%>
<%@attribute name="head_area" fragment="true" %>
<%@attribute name="body_area" fragment="true" %>

<html>
 <head>
 <title>${title}</title>
     <jsp:invoke fragment="head_area"/>
 </head>
 <body>
     <jsp:invoke fragment="body_area"/>
 </body>
</html>

In this template, we have defined three attributes for three content placeholders:

  1. title – This is a regular attribute. As its value, we can only supply simple text values or expressions that evaluate to text.
  2. head_area – This is a fragment attribute. We can supply any arbitrary HTML chunks as value of this placeholder.
  3. body_area – This is also a fragment attribute.

A regular attribute is rendered using EL, such as ${title} here. A fragment attribute is rendered using <jsp:invoke>.

Use the Template from a JSP

We can now provide content for the placehodlers from a JSP. Let’s say that we create a JSP called mypage.jsp as follows:

<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<t:simple_layout title="My page">

<jsp:attribute name="head_area">
  <script>
    function hello() {
        alert("Hello World");
    }
  </script>
</jsp:attribute>

<jsp:attribute name="body_area">
  <div>
    <button onclick="hello();">Hello There</button>
  </div>
</jsp:attribute>

</t:simple_layout>

When you execute the JSP, the following HTML markup will be generated.

<!DOCTYPE html>

<html>
<head>
<title>My page</title>
  <script>
    function hello() {
      alert("Hello World");
    }
  </script>
</head>
<body>
  <div>
    <button onclick="hello();">Hello There</button>
  </div>
</body>
</html>

Not all pages will have content to contribute for all placeholders. Which is OK, because, it is optional for JSPs to provide values for the attributes. For example, this page contributes nothing to the “head_area”.

<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<t:simple_layout title="My page">

<jsp:attribute name="body_area">
  <div>Hello World!</div>
</jsp:attribute>

</t:simple_layout>

You can make any attribute mandatory by setting required=”true”. For example: <%@attribute name=”body_area” fragment=”true” required=”true” %>. In this case, every JSP using the template must supply the body_area.

6 thoughts on “Page Templating Using JSP Custom Tag

  1. Hi,
    I’ve just discovered your interesting post about fragments.
    I’d like to know where should the js/css/fonts/… be declared in such an organization ?
    For example, my header_area should always be over my body_area, but both use the same js/css/… resources.
    So where must I write all sentences like “<link rel="stylesheet" type="text/css"" or "http://design/js/bootstrap.js” : in the layout.tag file or in the fragment.jsp file ?
    Thanx.

    • Hi,

      If all of your pages use the same set of CSS and JS files then you can simply add them to the template tag file (simple_layout.tag in this article).

      If some of the pages need special CSS or JS, you can always add them to the head_area section.

      • Thanx Bibhas2,
        I was trying your example by myself and CSS in the template seems to be OK.
        I will try to see if CSS in the fragment override template’s one.
        ++

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s