The power of the List component
In this blogpost I will demonstrate the power of the List component in combination with Sling.
Almost every time when you have the requirement "to show a list of ..." you can use the List component. The list component saves you the hassle of writing the plumbing code around getting a list of pages, looping and pagination.
Goal
The goal of this example is to render a list of 'page-teasers' with a Read more link to go to that page.
All of this will be implemented *without* writing any Java-code.
Let's get started
I have very simple page-component (extending foundation/components/page) with this in the body.jsp
<%@include file="/libs/foundation/global.jsp" %>
<body> <div class="header"> <b>This is my header</b> </div>
<div class="content"> <b>This is my content area</b>
<div class="header"> <cq:include path="header" resourceType="foundation/components/title" /> </div>
<div class="content_area"> <cq:include path="par" resourceType="foundation/components/parsys" /> </div> </div>
<div class="footer"> <b>This is my footer</b> </div> </body>
As you can see in the template I use the title component for the header of the page and the parsys to drag/drop default components into the page.
Now I am going to create a content-page 'mysite' and 5 child-pages as shown in the picture below.
Creating the teaser-view
Now that we have the template and the content pages, we can think on how we want to display the pages as teasers in the list-view.
To create the 'teaser-view' I add a new file in the page component called 'teaser.jsp', this has the following content:
<%@include file="/libs/foundation/global.jsp" %>
<div class="teaser"> <cq:include path="header" resourceType="foundation/components/title" />
<div class="read_more"> <a href="${listitem.path}.html">Read More</a> </div> </div>
The teaser-view only shows the header of the page and a Read More link.
You can already see this view when you add .teaser.html to your content page, so for example: /content/mysite/page1.teaser.html.
List component
So the final step is to integrate the teaser-view with the list-component.
I created a new component that extends from foundation/components/list, and I will only overwrite listitem_teaser.jsp.
This file has the following contents :
<%@include file="/libs/foundation/global.jsp"%>
<sling:include path="${listitem.path}.teaser.html" />
As you see in the listitem_teaser.jsp I am using the <sling:include /> to display the page coming from the list-component in a teaser-way.
This is the same if you would do .teaser.html from the content-pages you want to show on your page.
Final step
The final step is to add the custom list component to your page and configure it, you have a range of options to choose how to list the pages (ordering, limiting and pagination).
Result
You see the result below, a list of pages shown in the teaser-view.
This is all done without writing complex code to get child pages, creating complex dialogs or hardcoding paths in components.
And the author has all the flexbility to control which pages he wants display.
I am evaluating CQ now. Would you please explain the variable ${listitem} you have used in teaser.jsp, where and how it is declared?
Thanks
Thanks