This blog­post will cover con­cepts on how to design tem­plates and to uti­lize the max­i­mum out of Adobe CQ5 and Sling.

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

What do we have?

A com­pany has a web­site and when you look at the pages you real­ize it comes down to three dif­fer­ent page-layouts:

Tem­plate “Basic”:

Header / Content-area / Footer

Tem­plate “Menu”:

Header / Left-menu / Content-area / Footer

Tem­plate “Advanced”:

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

So what the tem­plates have in com­mon is a “Header” and “Footer”. Each tem­plate has its own way of dis­play­ing the con­tent area, but only the content-area.

Let’s start

We start with cre­at­ing  the “Basic” tem­plate with a ref­er­ence to the com­po­nent “myapplication/components/basictemplate”. I am tak­ing it easy and spec­ify     “/content(/.*)?” for allowed paths, so you can choose this tem­plate at every level when cre­at­ing a page.

template_1

Next is to cre­ate the com­po­nent “basictem­plate” that will imple­ment the basic template.

Note that we spec­ify the Super Type (sling:resourceSuperType) to “foundation/components/page”.

template_2

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

Because we have spec­i­fied the foundation-page as the Super Type we want to make sure that we over­ride the cor­rect 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 fol­low­ing (snippet):

1
2
3
4
5
6
<%= Doctype.fromRequest(request).getDeclaration() %>
<cq:include script="head.jsp">
<cq:include script="body.jsp">
</cq:include></cq:include>

Page.jsp is quite sim­ple is just includes “head.jsp” and “body.jsp”, in this exam­ple I only want to over­ride the body.jsp in the basictemplate.

What I do now in the basictemplate-component is rename basictemplate.jsp to body.jsp and include the fol­low­ing code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@include file="/libs/foundation/global.jsp" %>
<div class="header">
  <b>This is my header</b>
</div>
<div class="content">
<b>This is my content area</b>
<div class="content_area">
   <cq:include path="par" resourcetype="foundation/components/parsys">
</cq:include></div>
</div>
<div class="footer">
  <b>This is my footer</b>
</div>

When you cre­ate now a new page based on this tem­plate you will see the three areas with the abil­ity to drag in com­po­nents into the con­tent area. In this case every­thing is reused from the foundation-page, except for body.jsp that is imple­mented via the basictemplate-component.

And we did this with only one file!

Tak­ing it a step futher

Next is to make it even a bit more mod­u­lar, and intro­duce a content.jsp, we put the con­tent of <div class=”content”> into content.jsp (don’t for­get to also have the <%@include tag in this file).

The body.jsp will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
<%@include file="/libs/foundation/global.jsp" %>
<div class="header">
  <b>This is my header</b>
</div>
<cq:include script="content.jsp"></cq:include>
<div class="footer">
  <b>This is my footer</b>
</div>

Cre­ation of Menu and Advanced template

So next is to cre­ate the “Menu” and “Advanced” tem­plates with the asso­ci­ated com­po­nents. Both com­po­nents will have the Super Type of myapplication/components/basictemplate

template_3

The two com­po­nents will have only one file: content.jsp. This will imple­ment the dif­fer­ent lay­out for the two tem­plates, all the rest we want to re-use from either basictem­plate or the foundation-page.

So for exam­ple content.jsp in advancedtem­plate may look like this:

1
2
3
4
5
6
7
8
9
10
11
12
<%@include file="/libs/foundation/global.jsp" %>
<div class="content">
<div class="content_upper">
  <cq:include path="par1" resourcetype="foundation/components/parsys">
</cq:include></div>
<div class="content_lower">
  <cq:include path="par2" resourcetype="foundation/components/parsys">
</cq:include></div>
</div>

When a page based on advancedtem­plate is ope­nend, the fol­low­ing resources are used:

  1. page.jsp (foun­da­tion) is the start­ing point
  2. head.jsp (foun­da­tion) is called from page.jsp
  3. body.jsp (basictem­plate) is called from page.jsp
  4. content.jsp (advancedtem­plate) is called from body.jsp

The pic­ture below gives you the struc­ture that is imple­mented after the imple­men­ta­tion of the exam­ple from above.

template_4

Con­clu­sion

This exam­ple gives you an idea how eas­ily you can extend com­po­nents and be very flex­i­ble when you want to intro­duce new tem­plates. There is no need to copy/paste lot’s of files from one com­po­nent to other component.

 

@heervisscher