In this tutorial, you will learn how to build a new content definition and define a rendering view for the definition. A content definition is a declaration that defines the structure (made of simple properties or child objects) of a content object. A content definition is stored in a CND file. A CND file is a text file that contains content definitions using a standardized syntax (see the Apache Jackrabbit documentation for details). A rendering view is usually, but not only, a Java Server Page (JSP) that transforms the content of an object that complies with a content definition into HTML using JSP tags.
As an example, you will build upon the website that you created in the Creating website templates in Jahia tutorial that uses Bootstrap 4 components. You will add a Jumbotron Bootstrap 4 component that looks like this:
Here’s the HTML for this component:
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
The first step is to identify which parts of this HTML will become content definitions. There are multiple ways of doing this. One method is to replace text in the HTML with placeholder names for the content definitions that you will create. For example, you could change the HTML to:
<div class="jumbotron">
<h1 class="display-4">JUMBOTRON_TITLE</h1>
<p class="lead">JUMBOTRON_LEAD</p>
<hr class="my-4">
<p>JUMBOTRON_PARAGRAPH</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="JUMBOTRON_BUTTON_LINK" role="button">JUMBOTRON_BUTTON_LABEL</a>
</p>
</div>
As you can see in the above example, there are five placeholders that act as the properties of our content definition.
To build the content definition:
<mytuto = 'http://www.acme.org/jcr/mytutu/1.0'
<jnt = 'http://www.jahia.org/jahia/nt/1.0'>
<mytuto = 'http://www.acme.org/jcr/mytuto/1.0'>
[mytuto:jumbotron] > jnt:content, jmix:droppableContent, jmix:editorialContent
- jumbotronTitle (string)
- jumbotronParagraph (string)
- jumbotronButtonLabel (string)
- jumbotronButtonLink (weakreference) < 'jnt:page'
- jumbotronLead (string)
You have created the node type. As you can see, the definition builder makes it easy for you to get started quickly. You don’t have to know (at this point) what all the various options do to build powerful and flexible content definitions.
Now that the definition is in place, let’s build a rendering view for it.
To build the view:
<div class="jumbotron">
<h1 class="display-4">JUMBOTRON_TITLE</h1>
<p class="lead">JUMBOTRON_LEAD</p>
<hr class="my-4">
<p>JUMBOTRON_PARAGRAPH</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="JUMBOTRON_BUTTON_LINK"role="button">JUMBOTRON_BUTTON_LABEL</a>
</p>
</div>
<div class="jumbotron">
<h1 class="display-4">${currentNode.properties['jumbotronTitle'].string}</h1>
<p class="lead">${currentNode.properties['jumbotronLead'].string}</p>
<hr class="my-4">
<p>${currentNode.properties['jumbotronParagraph'].string}</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="${currentNode.properties['jumbotronButtonLink'].string}"role="button">${currentNode.properties['jumbotronButtonLabel'].string}</a>
</p>
</div>
<c:url var="urlValue" value="${url.base}${currentNode.properties['jumbotronButtonLink'].node.path}.html"/>
<a class="btn btn-primary btn-lg" href="${urlValue}" role="button">${currentNode.properties['jumbotronButtonLabel'].string}</a>
<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="template" uri="http://www.jahia.org/tags/templateLib" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="jcr" uri="http://www.jahia.org/tags/jcr" %>
<%@ taglib prefix="ui" uri="http://www.jahia.org/tags/uiComponentsLib" %>
<%@ taglib prefix="functions" uri="http://www.jahia.org/tags/functions" %>
<%@ taglib prefix="query" uri="http://www.jahia.org/tags/queryLib" %>
<%@ taglib prefix="utility" uri="http://www.jahia.org/tags/utilityLib" %>
<%@ taglib prefix="s" uri="http://www.jahia.org/tags/search" %>
<%--@elvariable id="currentNode" type="org.jahia.services.content.JCRNodeWrapper"--%>
<%--@elvariable id="out" type="java.io.PrintWriter"--%>
<%--@elvariable id="script" type="org.jahia.services.render.scripting.Script"--%>
<%--@elvariable id="scriptInfo" type="java.lang.String"--%>
<%--@elvariable id="workspace" type="java.lang.String"--%>
<%--@elvariable id="renderContext" type="org.jahia.services.render.RenderContext"--%>
<%--@elvariable id="currentResource" type="org.jahia.services.render.Resource"--%>
<%--@elvariable id="url" type="org.jahia.services.render.URLGenerator"--%>
<div class="jumbotron">
<h1 class="display-4">${currentNode.properties['jumbotronTitle'].string}</h1>
<p class="lead">${currentNode.properties['jumbotronLead'].string}</p>
<hr class="my-4">
<p>${currentNode.properties['jumbotronParagraph'].string}</p>
<p class="lead">
<c:url var="urlValue" value="${url.base}${currentNode.properties['jumbotronButtonLink'].node.path}.html"/>
<a class="btn btn-primary btn-lg" href="${urlValue}" role="button">${currentNode.properties['jumbotronButtonLabel'].string}</a>
</p>
</div>
You are now ready to compile and deploy your new module.
Congratulations, you have completed this tutorial! Here’s a review of what you have learned. You have:
Note: If at any time you make a mistake and want to go back to the Studio to make modifications, ensure that you Compile and deploy your module after making changes. Jahia will use the updated version of your module.
You can build definitions and views simply by editing the files by hand. The tools here are intended to make it easy for you to get started. You can also edit your modules using your own preferred IDE as they are Maven projects under the hood.