Theming and JSP Customization

Themes set the section mosaic layouts, article detail layouts, and ads configuration for a customer's Marfeel Progressive WebApp (PWA). 

This article explains how Marfeel engineers define themes for the different navigation levels and the ads configuration in each. 

In addition, this article also provides several JSP customizations that can be performed for tenants such as adding the Classic Version text button in the header, newsletter pop up boxes, and so on.

Themes

The following themes should be used for ads configuration by default:

  • b.marfeelcache.com: mediaBlog
  • bc.marfeelcache.com: mediaPublisher

Themes should be used with ads unless otherwise specified.  

Available themes are listed in the MarfeelXP/Tenants/vhosts/marfeel/themes folder. 

Add the Classic Version text button in the header

  1. Import the theme name from /Tenants/vhosts/marfeel/themes and modify the tenant name in themeDescriptor.json.
  2. Include the following in timeStamp.jsp: 

    <%@taglib prefix="dali" uri="http://dev.marfeel.com/jsp/mrf/dali" %>
    <dali:importThemePart url="classicVersion.jsp"/>
  3. Apply styles in _custom.scss:

    @include classicVersionHeader($color, $fontSize, $width, $textAlign);

Article details layout

  1. Edit the article details layout. 
  2. Copy the theme folder from marfeel/themes/ into /themes/detailsLayouts/. 

  3. Edit default.l/m.jsp to include the layouts with the correspondent ads type. The following is a tablet example with only sky160 ads:

    <dali:importThemePart url="detailsLayouts/paged/2_sky160r_sky160r.jsp"/>

detailsInnerFooter.jsp

To add content at the bottom of an article below the comments in smartphone, such as ads, videos, iframes and so on:

  1. Place it in themes/blogAds/detailsLayouts/detailsInnerFooter.jsp together with the themeDescriptor.json:

    <%@page pageEncoding="UTF-8" %>
    <%@taglib prefix="dali" uri="http://dev.marfeel.com/jsp/mrf/dali" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    <div id="mrf-footer-id">
    "Place here the footer element"
    </div>

nativeAdInDetails.jsp

To insert nativeAds and extraNative ads in the article details:

  1. Paste it in ~/themes/themeName/detailsLayouts/nativeAdInDetails.jsp
  2. For an additional nativeAd slot below related articles, add the following:

    <dali:mad type="nativeAd" layout="extraNativeAdvInDetails" loadStrategy="force__onScreen" refreshFrequency="0" customMadClass="mrf-regionMad"/>

.jsp Cheatsheet

Close each code line with scriptlets (<% ~ %>) and place HTML code in between scriptlets.

If:

<c:if test="${condition}">
    //do something
</c:if>

 

Example from ProTenants article.jsp:

<c:if test="${item.pocket != null}">
    <c:set var="mrf_className" value="${item.pocket.className}"/>
</c:if>

<article data-mrf-article="${section.name}${fn:length(item.uri) == 0 ? item.id : item.detailItem.id}"
     data-mrf-extracted="${item.isExtracted()}"
     data-mrf-uri="${item.uri}"
     data-mrf-layout="${layout}#${item.position}"
     class="${articleClass} ${mrf_image} ${mrf_className}">

<c:if test="${item.isPremium()}">
    <div class="mrf-articlePremiumWrapper">
</c:if>

<c:if test="${item.subtitle != null}">
    <h2>${item.subtitle}</h2>
</c:if>

<h1><a class="mrf-hidden-link" href="${item.uri}"><span>${item.title}</span></a></h1>

<c:if test="${item.author != null}">
    <address>${item.author.name}</address>
</c:if>

<c:if test="${mrf_image != null}">
    <span class="contentImg ${imageClass}">
        <img data-src="${contentImg}" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D"/>
    </span>
</c:if>

<dali:summary item="${item}" var="paragraph" extended="${extended}">
    <p>${paragraph}</p>
</dali:summary>

<c:if test="${item.isPremium()}">
    </div>
</c:if>
</article>

 

choose // if .. else:

<c:choose>
    <c:when test="${condition1}">
    ...
    </c:when>
    <c:when test="${condition2}">
    ...
    </c:when>
    <c:otherwise>
    ...
    </c:otherwise>
</c:choose>

 

Example from ProTenants sectionsMosaic.jsp:

<c:set var="sectionImage" value=""/>
    <c:choose>
    <c:when test="${section.img != null}">
        <c:set var="sectionImage" value="${section.img}"/>
    </c:when>
    <c:otherwise>
        <dali:mediaSelector item="${section.relevantItem}" var="media" strategy="HINT_OR_DETAIL"><c:set var="sectionImage" value="${media.src}"/></dali:mediaSelector>
    </c:otherwise>
</c:choose>

 

forEach:

<c:forEach var="i" begin="m" end="n">
    // Do something (i)
</c:forEach>

 

Example from XP sectionsMosaic.jsp:

<c:forEach items="${marfeel.sections}" begin="0" end="3" var="section">
    <li data-shortcut="navigateToSection:${section.name}" class="${section.name} ${section.styles}">
        <dali:mediaSelector item="${section.relevantItem}" var="media" strategy="HINT_OR_DETAIL">
            <div class="img" data-bg-src="${media.src}"></div>
        </dali:mediaSelector>
        <h2>${section.title}</h2>
    </li>
</c:forEach>

 

JSP Operators:

Category    Operator                				Associativity 
Postfix     () [] . (dot operator)  				Left to right 
Unary       ++ - - ! ~              				Right to left 
Multiply    * / %                   				Left to right 
Additive    + -                     				Left to right 
Shift       >> >>> <<               				Left to right 
Relation    > >= < <=               				Left to right 
Equality    == !=                   				Left to right 
Bit AND     &                       				Left to right 
Bit XOR     ^                       				Left to right 
Bit OR      |                       				Left to right 
Logic AND   &&                      				Left to right 
Logic OR    ||                      				Left to right 
Condition   ?:                      				Right to left 
Assignment  = += -= *= /= %= >>= <<= &= ^= |=     	Right to left 
Comma      ,                        				Left to right

Mosaic Layouts

Edit themeDescriptor.js to include the wanted layouts and ad slots. For example:

"layouts": {
"l": [
  "layouts/newspaper/cover_1_2_sky300_sky160.jsp",
  "layouts/blogs/blogs_2a_sky.jsp",
  "layouts/newspaper/cover_2_3_square.jsp",
  "layouts/blogs/blogs_2a.jsp",
],
"m": [
  "layouts/blogs/blogs_2a.jsp",
  "layouts/blogs/blogs_2b.jsp",
  "layouts/blogs/blogs_3a.jsp",
],
"s": [
  "layouts/photo/photo.jsp",
  "layouts/newspaper/thumb.jsp",
  "layouts/layoutRoba.jsp",
  "layouts/newspaper/thumb_4.jsp",
]
}

 

Newsletter popUpBox

To add a newsletter popUpBox in the customer's Marfeelized mobile site, add the following in the /themes/themeName/contextualHelp/popUpBox.jsp file of the tenant's folder: 

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="dali" uri="http://dev.marfeel.com/jsp/mrf/dali" %>
<%@page pageEncoding="UTF-8" %>

<div id="mrf-popUpBox" data-popup-widget="newsletter">
    <div class="mrf-blackoutPart"></div>

    <div class="mrf-popUpBoxContent mrf-newsletter">
        <form id="pm_form_submit" action="http://www.aweber.com/scripts/addlead.pl" method="post">
            //form content
        </form>
    </div>

    <div class="mrf-closeButton rounded"></div>
</div>

Form content, action, names, placeholders, etc. should be adapted to match as they are in the tenant's desktop.

popUpBox.jsp

To add a popUpBox at page load to include subscription and Facebook-like content, add the following in the themes/themeName/contextualHelp/popUpBox.jsp of the tenant's folder:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="dali" uri="http://dev.marfeel.com/jsp/mrf/dali" %>
<%@page pageEncoding="UTF-8" %>

<div id="mrf-popUpBox" data-popup-widget="facebooklike">
    <div class="mrf-blackoutPart"></div>
    <div class="mrf-popUpBoxContent mrf-facebookLike" data-like="Facebook_Id"></div>
    <div class="mrf-closeButton rounded"></div>
</div>

 

Section previews

To add balcones that include section previews:

  1. Add the jsp mosaicBottomBox in the tenantName/themes/newspaperMarfeelAds/mosaicBottomBox. For example: www.elconfidencial.com/themes/newspaperMarfeelAds/mosaicBottomBox.s.jsp
  2. Edit the mosaicBottomBox.s.jsp and add the sections preview widget:

    <dali:sectionPreview section="${content.getSectionForWidget('Pais', sectionName)}" items="${content.getItemsForWidget('mrf-PaisWidget')}" url="sectionPreview/sectionPreview.jsp" sectionName="Pais" filter="NO_FILTER"/>
        <dali:sectionPreview section="${content.getSectionForWidget('Món', sectionName)}" items="${content.getItemsForWidget('mrf-MonWidget')}" url="sectionPreview/sectionPreview.jsp" sectionName="Mon" filter="NO_FILTER"/>
        <dali:sectionPreview section="${content.getSectionForWidget('Opinió', sectionName)}" items="${content.getItemsForWidget('mrf-OpinioWidget')}" url="sectionPreview/sectionPreview.jsp" sectionName="Opinio" filter="NO_FILTER"/>

Static page

To set a site as it is in the desktop version without any article:

  1. Add the custom whiteCollar definition.json:

    "configuration":{
        "whiteCollarScript":"../marfeel/whiteCollar/static.js"
    },
  2. Get the appropriate theme folder from ProTenants and add it in themeDescriptor.json:

    },
    "sections": {
        "staticSectionName": {
            "l": ["layouts/newspaper/cover_static_article.jsp"],
            "m": ["layouts/newspaper/cover_static_article.jsp"],
            "s": ["layouts/newspaper/cover_static_article.jsp"]
        }
      }
    }