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
- Import the theme name from /Tenants/vhosts/marfeel/themes and modify the tenant name in themeDescriptor.json.
Include the following in timeStamp.jsp:
<%@taglib prefix="dali" uri="http://dev.marfeel.com/jsp/mrf/dali" %> <dali:importThemePart url="classicVersion.jsp"/>
CODEApply styles in _custom.scss:
@include classicVersionHeader($color, $fontSize, $width, $textAlign);
CODE
Article details layout
- Edit the article details layout.
Copy the theme folder from marfeel/themes/ into /themes/detailsLayouts/.
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"/>
CODE
detailsInnerFooter.jsp
To add content at the bottom of an article below the comments in smartphone, such as ads, videos, iframes and so on:
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>
CODE
nativeAdInDetails.jsp
To insert nativeAds and extraNative ads in the article details:
- Paste it in ~/themes/themeName/detailsLayouts/nativeAdInDetails.jsp
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"/>
CODE
.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:
- Add the jsp mosaicBottomBox in the tenantName/themes/newspaperMarfeelAds/mosaicBottomBox. For example: www.elconfidencial.com/themes/newspaperMarfeelAds/mosaicBottomBox.s.jsp
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"/>
CODE
Static page
To set a site as it is in the desktop version without any article:
Add the custom whiteCollar definition.json:
"configuration":{ "whiteCollarScript":"../marfeel/whiteCollar/static.js" },
CODEGet 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"] } } }
CODE