We’ve started using SiteMesh at my workplace. I have really fallen in love with SiteMesh, and I feel it has many advantages. We actually started using it because it is integrated into AppFuse.
Although I love SiteMesh one of my biggest complaints was that I couldn’t use a dynamic navigation, which highlights the link for the page I’m currently visiting. At least not without creating a new decorator for each page; but then, what would be the point of using SiteMesh at all!?
However, the problem wasn’t SiteMesh, the problem was the SiteMesh Documentation’s lack of good examples and explainations on how to use the darn thing. Which is why I’m posting this blog now; hopefully enough people using SiteMesh will start documenting new ways to use it (or old ways undocumented) so that more information is available to those of us who are not Java programmers and can’t decipher all of the documentation available.
The Problem:
In order to create a dynamic navigation, which highlights the page you are currently visiting, you need to have the page being decorated tell the decorator which page it’s decorating. You also need to set up the navigation to say "if I’m on page A, highlight link A" or in other words, "if I’m on page A, set the css class for link A to a different class than the rest of the links." What I had a hard time figuring out was how to pass that information from the page to the decorator in a useful format. To those of you saying, "well couldn’t you already pass variables using the <decorator:getProperty /> tag?" the answer is "yes." But, what you can’t do with <decorator:getProperty /> is stick it inside a jsp if/then statement on your decorator.
The Solution:
After much trial and error (my favorite way to code), and after much google searching. I finally figured out how you can use meta tags to pass variables from the page being decorated, to the decorator. Then rather than using <decorator:getProperty> tag, you use the <decorator:usePage /> tag. Here’s where the example from the documentation is poor at best. With my miniscuel knowledge of Java, I believe that the example assumes that the property "rating" has been set using java or even jsp somewhere in the page. But I’m trying to decorate static HTML files using a jsp decorator. I can’t just set a property.
In the OpenSymphony Forum I stumbled upon the answer. Not that this thread of discussion was about how to set up your navigation, but it gave me a clue into how to use the Meta tags to pass information to the decorator.
First I need to set up my meta tag in the page being decorated:
<meta name="currentPage" content="About Us"/>
The next thing to do is capture that information in my decorator using the <decorator:usePage /> tag along with some jsp code:
<decorator:usePage id="thePage" />
<% String pageName = thePage.getProperty("meta.currentPage");%>
<!–<%= pageName %>–>
The ID you give the page doesn’t matter, as long as you use the same ID in your jsp. I’ve added an HTML commented output of the pageName, now when you view the source from your browser you can see exactly which page is being decorated. In this case the comment would look like this:
<!–About Us–>
Now all you need to do is set up your navigation to look something like this:
<div id="navigation">
<ul>
<li <%if (pageName.equals("Home")) {%>class="active"<% } %>><a href="/">Home</a></li>
<li <%if (pageName.equals("About Us")) {%>class="active"<% } %>><a href="/">About Us </a></li>
<li <%if (pageName.equals("Contact Us")) {%>class="active"<% } %>><a href="/">Contact Us</a></li>
</ul>
</div>
In my AppFuse app, I was able to cut my three different decorators down to only one. Maintenance is now much easier and I still get to keep my dynamic navigation.