Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

A look at the Composite design pattern

Treat primitive and composite objects the same way

  • Print
  • Feedback

Page 3 of 5

Implement complex layouts with JSP includes

Example 2 shows an implementation of Figure 3's Webpage that uses <jsp:include>:

Example 2. A complex layout implemented with JSP includes

<%@ page contentType='text/html; charset=UTF-8' %>
<html>
   <head>
      <title>Implementing Complex Layouts by Hand</title>
   </head>
   <body background='graphics/blueAndWhiteBackground.gif'>
      <%-- One table lays out all of the content for this page --%>
      <table width='100%' height='100%'>
         <tr>
            <%-- Sidebar section --%>
            <td width='150' valign='top' align='left'>
               <jsp:include page='sidebar.jsp'/>
            </td>
            <%-- Main content section --%>
            <td height='100%' width='*'>
               <table width='100%' height='100%'>
                  <tr>
                     <%-- Header section --%>
                     <td valign='top' height='15%'>
                        <jsp:include page='header.jsp'/>
                     </td>
                  <tr>
                  <tr>
                     <%-- Content section --%>
                     <td valign='top' height='*'>
                        <jsp:include page='content.jsp'/>
                     </td>
                  </tr>
                  <tr>
                     <%-- Footer section --%>
                     <td valign='bottom' height='15%'>
                        <jsp:include page='footer.jsp'/>
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </body>
</html>


The preceding JSP includes the content of other JSPs with <jsp:include>. Because I've encapsulated that content in separate JSPs, you can reuse it for other Webpages:

Example 3. sidebar.jsp

<%@ page contentType='text/html; charset=UTF-8' %>
<table width='100%'>
   <tr>
      <%-- Sidebar top component --%>
      <td width='150' height='65' valign='top' align='left'>
        <a href=''><img src='graphics/flags/britain_flag.gif'/></a>
        <a href=''><img src='graphics/flags/german_flag.gif'/></a>
        <a href=''><img src='graphics/flags/chinese_flag.gif'/></a>
      </td>
   </tr>
   <tr>
      <%-- Sidebar bottom component --%>
      <td>
         <table>
            <tr>
               <td>
                  <font size='5'>Links</font><p>
                  <a href=''>Home</a><br>
                  <a href=''>Products</a><br>
                  <a href=''>Downloads</a><br>
                  <a href=''>White papers</a><br>
                  <a href=''>Contact us</a><br>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>


For completeness, I've listed below the JSPs included by the preceding JSP:

Example 4. header.jsp

<font size='6'>Welcome to Sabreware, Inc.</font>
<hr>


Example 5. content.jsp

<font size='4'>Page-specific content goes here</font>


Example 6. footer.jsp

<hr>
Thanks for stopping by!


Even though Example 2's JSP uses <jsp:include> to reuse content, you can't reuse the page's layout because it's hardcoded in that JSP. Struts Tiles lets you reuse both the content and the layout, as illustrated in the next section.

Implement complex layouts with Struts Tiles

Example 7 shows the Webpage in Figure 3 implemented with Struts Tiles:

Example 7. Use Struts Tiles to encapsulate layout

<%@ page contentType='text/html; charset=UTF-8' %>
<%@ taglib uri='WEB-INF/tlds/struts-tiles.tld' prefix='tiles' %>
<tiles:insert definition='sidebar-header-footer-definition'/>


The preceding JSP uses the <tiles:insert> tag to create Figure 3's JSP. That JSP is defined by a tiles definition named sidebar-header-footer-definition. That definition resides in the Tiles configuration file, which in this case is WEB-INF/tiles-defs.xml, listed in Example 8:

Example 8. WEB-INF/tiles-defs.xml

<!DOCTYPE tiles-definitions PUBLIC
  "-//Apache Software Foundation//DTD Tiles Configuration//EN"
  "http://jakarta.apache.org/struts/dtds/tiles-config.dtd">
<tiles-definitions>
   <definition  name='sidebar-header-footer-definition' 
                path='header-footer-sidebar-layout.jsp'>
      <put name='sidebar' value='sidebar.jsp'/>
      <put name='header'  value='header.jsp'/>   
      <put name='content' value='content.jsp'/>   
      <put name='footer'  value='footer.jsp'/>   
   </definition>
</tiles-definitions>


The preceding Tiles definition specifies the page layout, encapsulated in header-footer-sidebar-layout.jsp, and the page's content, encapsulated in sidebar.jsp, header.jsp, content.jsp, and footer.jsp, as listed in Examples 3-6. Example 9 lists the JSP that defines the layout—header-footer-sidebar-layout.jsp:

Example 9. header-footer-sidebar-layout.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@ page contentType='text/html; charset=UTF-8' %>
<html>
   <head>
      <title>Struts Tiles implements the Composite pattern</title>
   </head>
   <body background='graphics/blueAndWhiteBackground.gif'>
      <%@ taglib uri='/WEB-INF/tlds/struts-tiles.tld' 
              prefix='tiles'%>
      <%-- One table lays out all of the content --%>
      <table width='100%' height='100%'>
         <%-- Sidebar section --%>
         <tr>
            <td width='150' valign='top' align='left'>
               <tiles:insert attribute='sidebar'/>
            </td>
            <%-- Main content section --%>
            <td valign='top' height='100%' width='*'>
               <table width='100%' height='100%'>
                  <tr>
                     <%-- Header section --%>
                     <td height='15%'>
                        <tiles:insert attribute='header'/>
                     </td>
                  <tr>
                  <tr>
                     <%-- Content section --%>
                     <td valign='top' height='*'>
                        <tiles:insert attribute='content'/>
                     </td>
                  </tr>
                  <tr>
                     <%-- Footer section --%>
                     <td valign='bottom' height='15%'>
                        <tiles:insert attribute='footer'/>
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </body>
</html>


The preceding JSP encapsulates layout and inserts content according to the values specified for the sidebar, editor, content, and footer regions in the Tiles definition file, thus easing reuse for both the content and the layout. For example, you could define another Tiles definition with the same layout, the same sidebar, editor, and footer, but different content:

<tiles-definitions>
   <definition  name='a-different-sidebar-header-footer-definition' 
                path='header-footer-sidebar-layout.jsp'>
      <put name='sidebar' value='sidebar.jsp'/>
      <put name='header'  value='header.jsp'/>   
      <put name='content' value='someOtherContent.jsp'/>   
      <put name='footer'  value='footer.jsp'/>   
   </definition>
</tiles-definitions>


To create the JSP defined by the tiles definition a-different-sidebar-header-footer-definition, you use the <tiles:insert> tag, like this:

<%@ page contentType='text/html; charset=UTF-8' %>
<%@ taglib uri='WEB-INF/tlds/struts-tiles.tld' prefix='tiles' %>
<tiles:insert definition='a-different-sidebar-header-footer-definition'/>


Thanks to Struts Tiles, you can reuse both content and layout, which proves invaluable for Websites with many JSPs that share layout and some content. But if you look closely at the code from Examples 7-9, you will notice that the layout for the sidebar region is hardcoded in sidebar.jsp, which is listed in Example 3. That means you cannot reuse that layout. Fortunately, the Tiles tag library implements the Composite pattern, which lets us specify a tiles definition—instead of a JSP—for a region. In the next section, I explain how to use that Composite pattern implementation.

Use the Composite pattern with Struts Tiles

Struts Tiles implements the Composite pattern, where the Component class is represented by JSPs and the Composite class is represented by a Tiles definition. That implementation lets you specify either a JSP (a component) or a Tiles definition (a composite) as the content for a JSP's region. Example 10 illustrates that feature:

  • Print
  • Feedback

Resources