Sunday, September 26, 2010

App Engine with SiteMesh

SiteMesh is an open source framework based on Java, J2EE, and XML.

SiteMesh acts as a Servler Filter.It allows requests to be handled by the Servlet engine as normal, but the resulting HTML (referred to as the content) will be intercepted before being returned to the browser. The intercepted content has certain properties extracted (typically the contents of the <title >, < head > and < body > tags and is then passed on to a second request that should return the common look and feel for the site (referred to as the decorator). The decorator contains placeholders for where the properties extracted from the content should be inserted.

This tutorial will give you a simple example of how SiteMesh can be used to give you a cleaner layout architecture and configured in the App Engine .

You need SiteMesh version 2.4.2 or greater. Earlier versions do not support AppEngine.

Download from here Add sitemesh-2.4.2.jar to your WEB-INF/lib directory.

Then add the SiteMesh filter to your web.xml as shown below
 <filter>  
   <filter-name>sitemesh<filter-name>  
   <filter-class>  
     com.opensymphony.module.sitemesh.filter.PageFilter  
   </filter-class>  
 <filter>  
 <filter-mapping>  
   <filter-name>sitemesh<filter-name>  
   <url-pattern>/*</url-pattern>  
 <filter-mapping>  


This will call the SiteMesh filter whenever a page on your site is accessed. Now we’ll need to create a /WAR/WEB-INF/decorators.xml file:

 <?xml version="1.0" encoding="UTF-8"?>  
 <decorators defaultdir="/">  
   <decorator name="main" page="main.jsp">  
     <pattern>/*</pattern>  
   </decorator>  
 </decorators>  

This will decorate all of the pages located under /WAR with the decorator /WEB-INF/main.jsp, which we’ll create next:
 <%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>  
 <head>  
  <title>  
   HandsOnTutorials.com - <decorator:title default="SiteMesh Tutorial Example" />  
  </title>  
  <style type="text/css">@import "css/global.css";</style>  
  <decorator:head />  
  <body>  
   <div id="header">  
    <h2><a href="http://www.HandsOnTutorials.com/">HandsOnTutorials.com</a> Tutorials</h2>  
   </div>  
   <div id="content">  
    <decorator:body />  
   </div>  
  </body>  
 </html>  

This decorator does a couple of things. First off, it create an HTML title tag, which starts as “HandsOnTutorials.com – ” and then appends the title of the page that is being decorated. If that page does not have a title tag, then a default is used to render “HandsOnTutorials.com – SiteMesh Tutorial Example”. It then adds a global style sheet to every page being decorated and appends whatever is in that page’s head tag, which is useful for page-specific JavaScript, etc. The decorator continues by adding a header to each page reading “HandsOnTutorials.com Tutorials” followed by the decorated page’s content.

If you want decorators to be applied to static content (e.g. to .html files), the following needs to be added to WEB-INF/appengine-web.xml:

 <static-files>  
  <exclude path="**"/>  
 </static-files>  

This forces the static resources to be served by the Servlet engine, rather than a separate static web-server. Without this, the files served by the static web server will not be decorated.

2 comments:

  1. I've done exactly the same but still decorator do not get applied.

    web.xml

    sitemesh
    com.opensymphony.module.sitemesh.filter.PageFilter



    sitemesh
    /*


    decorators.xml





    /*



    I've an index.jsp in war folder and base.jsp in decorators folder. But it's not working.

    ReplyDelete
  2. Thanks Anand. This is really helpful to get started.

    Note that there's a slight mistake in the decorators.xml, whereby you forgot to put /WEB-INF in the defaultdir attr.

    ReplyDelete