This blog­post will cov­er 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­pa­ny has a web­site and when you look at the pages you real­ize it comes down to three dif­fer­ent page-lay­outs:

Tem­plate “Basic”:

Head­er / Con­tent-area / Foot­er

Tem­plate “Menu”:

Head­er / Left-menu / Con­tent-area / Foot­er

Tem­plate “Advanced”:

Head­er / Con­tent-area upper / Con­tent-area low­er / Foot­er

So what the tem­plates have in com­mon is a “Head­er” and “Foot­er”. Each tem­plate has its own way of dis­play­ing the con­tent area, but only the con­tent-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­i­fy     “/content(/.*)?” for allowed paths, so you can choose this tem­plate at every lev­el 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 tem­plate.

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

template_2

You have now an emp­ty JSP called basictemplate.jsp inside your com­po­nent.

Because we have spec­i­fied the foun­da­tion-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 foun­da­tion-page.

If we look at the foun­da­tion-page (page.jsp) we see the fol­low­ing (snip­pet):

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 basictem­plate.

What I do now in the basictem­plate-com­po­nent 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­i­ty to drag in com­po­nents into the con­tent area. In this case every­thing is reused from the foun­da­tion-page, except for body.jsp that is imple­ment­ed via the basictem­plate-com­po­nent.

And we did this with only one file!

Taking 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 tem­plate

So next is to cre­ate the “Menu” and “Advanced” tem­plates with the asso­ci­at­ed 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 foun­da­tion-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­ment­ed after the imple­men­ta­tion of the exam­ple from above.

template_4

Conclusion

This exam­ple gives you an idea how eas­i­ly 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 oth­er com­po­nent.

 

@heervisscher

0 comments