One concept that many developers that are new to Adobe CQ/Adobe Experience Manager seem to struggle with is the extension and reuse of page template components. While creating these templates can seem more like art than science, if you understand the basics of overriding and reusing JSPs, your job will be much easier.
Adobe CQ5 templates are essentially layouts for pages that allow for easy creation and organization of content to produce a consistent look and feel across your application. While designing your templates you should look at the desired end design and ask yourself: How can I break these pages down? What parts, if any, are the same across the entire site? Where does styling match across different pages and how can I use these similarities to reduce duplication of code?
When I have to build a template collection, I generally like to start out with a basepage template. This template is created with the intention to not actually use it to create any content pages but rather provide the groundwork for all other page templates. This means only including code that we can reasonably believe to be consistent across the entire site. This template should have at least:
- basepage.jsp - Contains <html> tags and includes head.jsp and body.jsp.
- body.jsp - Contains <body> tags and includes header.jsp, content.jsp, and footer.jsp.
- content.jsp - Contains paragraph system(s) for authoring content.
- footer.jsp - Contains markup for any footer content.
- head.jsp - Contains <head> tags.
- header.jsp - Contains markup for any header content.
- dialog - Standard dialog copied from /foundation/components/page with extra tabs added as needed for your application.
In each of the above, any static content, styling, or html markup, would be inserted around the appropriate tags in the respective JSP from above. The idea is to only insert code that reasonably could be expected to be consistent across a good portion of the site. Below, using shades of blue, you can see how each JSP affects the overall look of the page.
Now that we have the basepage, we can produce the templates that will actually be used to produce pages. In doing so, we will be reusing as much code as we can by only overriding the JSPs that we have to. If we wanted to add a navigation bar to the left we could create the leftnavpage template, which would have basepage as a superType. We would then create:
- body.jsp - Like above, this would contain <body> tags and includes header.jsp, content.jsp, and footer.jsp. We would also add an include for leftnav.jsp.
- leftnav.jsp - The markup for the navigation bar on the left.
In addition, we would also add a new content.jsp. Since this is where content is authored into the parsys, content.jsp will often contain a lot of html markup specific to a particular look and feel for a set of pages. As such, almost every new template will have at least an overridden content.jsp. The following image shows what a page made with the leftnavpage template would look like with shades of red. Notice that since we didn't override header.jsp or footer.jsp, they are inherited from basepage thus the blue sections being displayed. And while we can't see from this image, basepage.jsp, head.jsp, and the dialog are also inherited.
Extending on the first example, if we wanted a page with a different header, we'd follow the same process as with leftnavpage but create a custom header.jsp in addition to body.jsp and content.jsp. We can visualize this below, seeing that header.jsp has been overridden but footer.jsp remains inherited (along with basepage.jsp, head.jsp, and the dialog).
While there may be other strategies for building Adobe CQ5 templates, the above is more intended to demonstrate by example how one can modularize template development. Hopefully these examples help to visualize how to plan and construct reusable template components with minimal code reproduction. Any questions, comments, or suggestions are appreciated.