Dec 23, 2012

CQ Template design 101

Posted by Feike Visser

This blogpost will cover concepts on how to design templates and to utilize the maximum out of Adobe CQ5 and Sling.

I will do this based on a basic example and start from scratch using CRXDE Lite.

What do we have?

A company has a website and when you look at the pages you realize it comes down to three different page-layouts:

Template “Basic”:

Header / Content-area / Footer

Template “Menu”:

Header / Left-menu / Content-area / Footer

Template “Advanced”:

Header / Content-area upper / Content-area lower / Footer

So what the templates have in common is a "Header" and "Footer". Each template has its own way of displaying the content area, but only the content-area.

Let’s start

We start with creating  the “Basic” template with a reference to the component “myapplication/components/basictemplate”. I am taking it easy and specify     "/content(/.*)?" for allowed paths, so you can choose this template at every level when creating a page.


Next is to create the component “basictemplate” that will implement the basic template.

Note that we specify the Super Type (sling:resourceSuperType) to "foundation/components/page".


You have now an empty JSP called basictemplate.jsp inside your component.

Because we have specified the foundation-page as the Super Type we want to make sure that we override the correct things and can re-use as much as we can from the foundation-page.

If we look at the foundation-page (page.jsp) we see the following (snippet):

<%= Doctype.fromRequest(request).getDeclaration() %>

Page.jsp is quite simple is just includes “head.jsp” and “body.jsp”, in this example I only want to override the body.jsp in the basictemplate.

What I do now in the basictemplate-component is rename basictemplate.jsp to body.jsp and include the following code.

<%@include file="/libs/foundation/global.jsp" %>

This is my header
This is my content area

When you create now a new page based on this template you will see the three areas with the ability to drag in components into the content area. In this case everything is reused from the foundation-page, except for body.jsp that is implemented via the basictemplate-component.

And we did this with only one file!

Taking it a step futher

Next is to make it even a bit more modular, and introduce a content.jsp, we put the content of <div class=”content”> into content.jsp (don’t forget to also have the <%@include tag in this file).

The body.jsp will look like this:

<%@include file="/libs/foundation/global.jsp" %>

This is my header

Creation of Menu and Advanced template

So next is to create the “Menu” and “Advanced” templates with the associated components. Both components will have the Super Type of myapplication/components/basictemplate


The two components will have only one file: content.jsp. This will implement the different layout for the two templates, all the rest we want to re-use from either basictemplate or the foundation-page.

So for example content.jsp in advancedtemplate may look like this:

<%@include file="/libs/foundation/global.jsp" %>

When a page based on advancedtemplate is openend, the following resources are used:

  1. page.jsp (foundation) is the starting point
  2. head.jsp (foundation) is called from page.jsp
  3. body.jsp (basictemplate) is called from page.jsp
  4. content.jsp (advancedtemplate) is called from body.jsp

The picture below gives you the structure that is implemented after the implementation of the example from above.



This example gives you an idea how easily you can extend components and be very flexible when you want to introduce new templates. There is no need to copy/paste lot's of files from one component to other component.