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 called element that references the item. (For more detailed information about the div element's style 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 the element variable's article.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.