Making Your Page Layouts Easier with Includes - dummies

Making Your Page Layouts Easier with Includes

By Mike Robinson, Ellen Finkelstein

A sample JSP page that is full of opportunities for refactoring — rewriting portions of code to make the resulting code simpler, more readable, and more efficient — is shown in Listing 1.

Listing 1 Sample JSP Page, refactor.jsp

1 <!– begin the taglib definitions –>
2 <%@ taglib prefix=”c” uri=”/WEB-INF/c.tld” %>
3 <%@ taglib prefix=”fmt” uri=”/WEB-INF/fmt.tld” %>
4 <%@ taglib prefix=”html”
uri=”/WEB-INF/struts-html-el.tld” %>
5 <!– end the taglib definitions –>
6 <html:html locale=”true”/>
7 <head>
8 <fmt:setBundle basename=”ApplicationResources” />
9 <title><fmt:message key=”login.title”/></title>
12 <!– begin the logo for the application –>
13 <table width=”100%”>
14 <tr valign=”top” align=”center”>
15 <td>
16 <img src=”images/webLogo.gif”
width=”425″ height=”50″ border=”0″>
17 </td>
18 </tr>
19 </table>
20 <!– end of logo –>
21 <h2>
22 <fmt:message key=”loggedin.msg”>
23 <fmt:param value=’${requestScope.userName}’ />
24 </fmt:message>
25 </h2>
26 <!– begin the footer for the application –>
27 <div align=”center”>
28 <hr SIZE=”1″ WIDTH=”100%”><br/>
29 Comments or Questions?
30 <a href=’’>
Email Othenos Customer Support</a><br/>
31 ©2003 Othenos Consulting Group<br/>
32 </div>
33 <!– end of footer –>

In examining the page makeup in Listing 1, three areas stand out as possibilities for common content:

  • The definitions of the taglibs between lines 1 and 5
  • The inserted logo in lines 12-20
  • The footer section in lines 26-33

You can assume that other pages in the Web application are similar in structure — they include the same taglib definitions, logo graphics, and footer information. Because these code snippets are common to so many other pages, you could simplify the code a lot by removing these repeated sections and putting them into their own separate files. Then the original pages that contained the snippets could reference this content using the include directive and jsp:include tag.

You can extract the common features and put them into three separate files, as shown in Listings 2, 3, and 4.

Listing 2 taglibs.jsp

<%@ taglib prefix=”c” uri=”/WEB-INF/c.tld” %>
<%@ taglib prefix=”fmt” uri=”/WEB-INF/fmt.tld” %>
<%@ taglib prefix=”html” uri=”/WEB-INF/struts-html-el.tld” %>
<%@ taglib prefix=”tiles” uri=”/WEB-INF/struts-tiles.tld” %>

Listing 3 logo.jsp

<table width=”100%”>
<tr valign=”top” align=”center”>
<img src=”images/webLogo.gif” name=”webLogo”
width=”425″ height=”50″ border=”0″>

Listing 4 footer.jsp

<div align=”center”>
<hr SIZE=”1″ WIDTH=”100%”><br/>
Comments or Questions?
<a href=’’>
Email Othenos Customer Support
©2003 Othenos Consulting Group<br/>

You can use three elements to insert outside content into a JSP page: the include directive, the jsp:include tag, and the JSTL c:import tag.

The JSP include directive allows the insertion of static content into the JSP page at the time the page is converted into a Java class by the JSP engine. This directive has the following syntax:

<%@ include file=”relativeURLspec”%>

Highlights of the tag follow:

  • The tag can place only static content in a JSP file, such as an HTML or JSP file.
  • The tag is processed only when JSP is converted into a Java class, not at request time.
  • If the included file is updated, JSP containers are not required to change the converted page to include new content.

Listing 2 shows the use of the include directive to insert the taglibs.jsp segment into the loggedin.jsp page. You must include the taglibs.jsp in the page before the page is converted to the Java class because the tags that the page uses (html, c, fmt, tiles) require that you define the library before the conversion can occur. The library definition is in the taglibs.jsp file. Inserting taglibs.jsp at request time would be too late. Here is how you would insert it before the page is converted:

<!– begin the taglib definitions –>
<%@ include file=”taglibs.jsp” %>
<!– end the taglib definitions –>

To include content at request time, you can use the jsp:include tag. This tag can insert both static and dynamic content into the page when the page is requested. The following is the syntax for jsp:include:

<jsp:include page=”relativeURLspec” flush=”true|false”/>

Highlights of the tag are as follows:

  • The tag can include static (for example, HTML) or dynamic (for example, JSP) content.
  • Inclusions are processed at request time.
  • You can pass parameters to the included content.
  • The JSP container is aware when an included resource changes and generates new content based on the new file.
  • The flush attribute defaults to false. If set to true, it indicates that the page, if buffered, should be flushed (written out) before including the new resource.

The logo.jsp and footer.jsp segments (Listings 3 and 4) are candidates for including with the jsp:include tag. Here is how they would look if you included them with jsp:include:

<!– begin the logo for the application –>
<jsp:include page=”logo.jsp” flush=”true” />
<!– end of logo –>
<!– begin the footer for the application –>
<jsp:include page=”footer.jsp” flush=”true” />
<!– end of footer –>

You may want to use the c:import tag from the JSTL library instead of jsp:include. The c:import tag claims to reduce some of the buffering inefficiencies found in the jsp:include tag. Another feature of the tag is its ability to retrieve resources from any URL. The jsp:include tag is limited to resources in the same context as the current page. The simplest syntax for the c:import tag is

<c:import url=”url” />

Here is how you might use the c:import tag instead of jsp:include in the preceding example:

<!– begin the logo for the application –>
<c:import url=”logo.jsp” />
<!– end of logo –>
<!– begin the footer for the application –>
<c:import url=”footer.jsp” />
<!– end of footer –>

You can use c:import or jsp:include interchangeably, depending on the tag libraries you prefer.

In Listing 5 we show how the original JSP in Listing 1 looks after refactoring and using includes to retrieve the common information. We use the c:import tag for including, with the exception of including the taglibs.jsp (line 2). Taglibs.jsp must be included when the page gets converted to a Java class because other tags in the page depend on the tag library definitions found in taglibs.jsp. Therefore the JSP include directive must be used.

Listing 5 Simplified JSP Using includes

1 <!– begin the taglib definitions –>
2 <%@ include file=”taglibs.jsp” %>
3 <!– end the taglib definitions –>
4 <html:html locale=”true”/>
5 <head>
6 <!– begin the header for the application –>
7 <fmt:setBundle basename=”ApplicationResources” />
8 <title><fmt:message key=”login.title”/></title>
9 <!– end of header –>
12 <!– begin the logo for the application –>
13 <c:import url=”logo.jsp” />
14 <!– end of logo –>
15 <H2>
16 <fmt:message key=”loggedin.msg”>
17 <fmt:param value=’${requestScope.userName}’ />
18 </fmt:message>
19 </H2>
20 <!– begin the footer for the application –>
21 <c:import url=”footer.jsp” />
22 <!– end of footer –>

You can use includes to refactor all the JSP pages in the application that have a similar structure. By doing so, you dramatically reduce the amount of effort necessary to make changes to the common parts of the pages because you need to edit only one copy of each common segment. Any change to common content automatically ripples through every page that includes the segment.