Section Page Templates
Here is the temp-dev
publication's only section page
template, group/news.jsp
:
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <div class="news"> <div class="header" style="background-color: ${pool.rootElement.areas.header.options['news-area-background']}"> <c:if test="${fn:length(pool.rootElement.areas.header.items) > 0}"> <div style="${pool.rootElement.areas.header.items[0].options.border}"> <c:set var="element" value="${pool.rootElement.areas.header.items[0]}" scope="request"/> <jsp:include page="ats.jsp"/> </div> </c:if> </div> <div class="center"> <c:forEach items="${pool.rootElement.areas.center.items}" var="item"> <c:set var="element" value="${item}" scope="request"/> <c:choose> <c:when test="${item.type eq 'two-col'}"> <jsp:include page="twoCol.jsp"/> </c:when> <c:when test="${item.type eq 'three-col'}"> <jsp:include page="threeCol.jsp"/> </c:when> <c:otherwise> <jsp:include page="ats.jsp"/> </c:otherwise> </c:choose> </c:forEach> </div> <div class="right"> <ul> <c:forEach items="${pool.rootElement.areas.rightcolumn.items}" var="item"> <li><a href="${item.content.url}">${item.fields.TITLE}</a></li> </c:forEach> </ul> </div> </div>
In order to fully understand this template you need to understand the
section page structure it is operating on. This structure is defined in
the publication's layout-group
resource (and
reflected in the section page editor displayed in
Content Studio).
For more about the layout-group
resource, see
layout-group.
The section page structure defined in the
layout-group
resource consists of three main areas:
header
, center
and
rightcolumn
. header
is intended as
a headline area to highlight the main story, center
is the main area in which a number of different summaries are displayed,
while rightcolumn
is for lower priority stories,
displayed as a simple list of links.
The code for the header
area:
-
Checks that the area contains an item.
-
If it does, makes an HTML
div
to format the item and then creates a request scope variable calledelement
that references the item. (For more detailed information about thediv
element'sstyle
attribute, see Area and Group Options.) -
Passes control to
article/ats.jsp
(article type selector). This template calls a new template that depends on the content of theelement
variable'sarticle
.articleTypeName
property:<jsp:include page="../element/${element.article.articleTypeName}.jsp"/>
The definition of the center
area in the
layout-group
resource includes references to two
groups
called two-col
(which is
defined as containing two sub areas, left
and
right
) and three-col
(which is
defined as containing three sub areas, left
center
and right
). What this means
is that the
Content Studio
user can choose to insert two-column and three-column sub-areas into the
center area instead of (or as well as) content items. The code for the
center area therefore has to be able to deal with these variations.
The code for the center
area therefore uses a
forEach
element to cycle through all the area's
items, find out whether it is a content item or a group, and take
appropriate action. Note that the variable created for each item has
request scope and has the same name (element
) as the
variable created in the header
area code. For content
items, control is passed to the same article type selector as in the
header
area code.
The code for the rightcolumn
area simply cycles
through all the area's items and creates a link to each content item.