I recently had the opportunity to “webify” a legacy client-server application. Once we began listing our favorite toolkits, I was reminded how much I adore OpenSymphony’s SiteMesh. SiteMesh has been called “the best open source component you’ve never heard of” by its creators. Well, if you haven’t heard of SiteMesh, then that may just be an accurate description.
Separating content from presentation in web applications is an issue that has certainly been addressed over the last several years. Industry best practices have shown that proven design patterns and clearly defined roles for developers can yield predictable, manageable software. With the introduction of so many new technologies - from CSS through the widespread adoption of server-side scripting, to the many available templating frameworks, and now with AJAX - we have nearly completely managed to extract our data from its presentation.
Still, no matter which combination of tools I’d assembled, I always felt like there was room for improvement.
Anyone doing enterprise-level web development is working a great deal with HTML forms. The promise of XForms not withstanding, the small amount of actual code that produces the form is often lost in all of the formatting that surrounds it. Producing clean, elegant code that is easy to write, read, and maintain is pretty straightforward in the POJO Java world. Why can’t it be so for the Web UI tier?
Let’s take server-side includes (SSIs) for example.
The idea of making calls to a common snippet of HTML with one line was revolutionary in 1996. But what if you want to make a change to the calling pieces of code? Hundreds of replacements may be necessary. Moreover, the included code is often incomplete and malformed. Tools may not handle snippets, particularly those that are not well-formed.
Now let’s assume you have a standard header with a page banner, and a standard footer with some copyright information. It’s very common to open an HTML table in the header and close it in the footer. Then you might place all of the “meat” in the main pages, using <tr> and <td> tags. You might complicate things further with a left-hand navigation bar in yet another include file. Tying all of these things together with say, <jsp:include> is extremely brittle. This is commonly referred to as the “open table” problem.
Let’s keep going. What if you have some pages that require unique JavaScript in head? You might break your standard header into hearder1.jsp and header2.jsp in anticipation of this. What about calling a custom JavaScript function with a <body> onLoad event? How will you provide that if your <body> tag is contained in an include file? Passing it in as a parameter? You’re no doubt beginning to get the idea.
SSIs are fragile, strongly coupled, and far too complex.
SiteMesh solves these types of problems by allowing for 100% complete, valid HTML files across the application; not merely the “content” portions.
SiteMesh is an open source J2EE page layout and decorator engine. Because it is implemented as a Servlet request filter, installation is trivial to anyone familiar with J2EE web applications – simply copy the SiteMesh jar file into WEB-INF/lib and map the filter in web.xml.
Using SiteMesh requires only the following three steps:
- Compose a simple web page without formatting. SiteMesh is not merely limited to JSP. You can decorate PHP, Perl, XSL, straight HTML, whatever.
- Write a JSP decorator page and format to your heart’s content. A number of custom tags are provided, which are quite valuable. You can link to CSS files from your decorators. Don’t be afraid to use includes (judiciously), because managing them is far easier from just a few decorators. In addition to JSPs, SiteMesh also supports Velocity and FreeMarker.
- Map the decorator in an XML configuration file. The configuration file supports URL patterns, so you can apply different decorators to the various parts of your site. You can exclude decorators based on URL pattern as well.
That’s it! Load the web page you created in the first step, and all of your formatting is applied.
Not surprisingly, there is more. SiteMesh offers a number of other features (packaged mappers, inline decorators) that I won’t cover. Still, I’ve only scratched the surface here, and you should know I’ve yet to find myself desiring a feature that isn’t present.
OpenSymphony SiteMesh applies sound object oriented concepts (i.e., the Decorator and Composite Design patterns), to web-based applications. By decomposing web pages into smaller components, SiteMesh allows these components to focus on very specific problems.
SiteMesh is designed to be friendly and unobtrusive. It is clean, friendly, and truly a pleasure to use!
Comments
Post new comment