Sightly Tutorial for Beginners (AEM)

Basic AEM Sightly tutorial for beginners.
Sightly is the new kid on the block that is gaining interest in the AEM field very fast. I will be explaining the basic concepts with simple examples. So let's begin.

What is Sightly?
Sightly is an HTML templating language, introduced with AEM 6.0. It takes the place of JSP (Java Server Pages) and ESP (ECMAScript Server Pages) as the preferred templating system for HTML. The name “Sightly” (meaning “pleasing to the eye”) highlights its focus on keeping your markup beautiful, and thus maintainable, once made dynamic.

Benefits:

• Lightweight: No dependencies
• Secure:  XSS protection and URL externalization
• Code-less: Separation of business logic and markup
• Powerful: Straight-forward API for logic, allowing to do virtually anything Intuitive

Clear, simple & restricted feature set

There are many attributes that can be used in Sightly. I will explain some commonly used attributes.

1. Sightly Use Statement
2. Sightly Unwrap Statement
3. Sightly Text, Attr & Elem Statement
4. Sightly Test Statement
5. Sightly List Statement
6. Sightly Resource Statement
7. Sightly Resource Statement Option
8. Sightly Include Statement
9. Sightly Template & Call Statement

Let's start with some coding...
The "USE" Statement:
For Server-side JavaScript logic:
Consider the very simple JS function.

<!--/* navigation.js */-->
use(function () {
return {
foo: "Hello World"
};
});

We can use Sightly to call this JS function or element in the following manner.
<div data-sly-use.nav="navigation.js">${nav.foo}</div>

Output
<div>Hello World</div>

Server-side JAVA logic:
Similarly, we can use this in the case of JAVA Class instead of JS.
Say we have a JAVA class.

File: Navigation.java
package apps.codermagnet.sightly.test;
import com.adobe.cq.sightly.WCMUse;
public class Component extends WCMUse {
private String foo;
@Override
public void activate() throws Exception {
foo = "Hello World";
}
public String getFoo() {
return foo;
}
}

We can leverage this class in sightly as follows.
<!--/* template.html */-->
<div data-sly-use.nav="Navigation">${nav.foo}</div>

Output
<div>Hello World</div>

The "Unwrap" Statement
Removes the host element while retaining its content. This is basically the same as the previous one, only that it removes the enclosing/wrapper elements, in this case, it removes the <div></div> elements.

<div data-sly-use.nav="navigation.js" data-sly-unwrap>
${nav.foo}</div>

Output
Hello World

Text, Attr & Elem Statements
These statements are used to dynamically manipulate the element name, the attributes of the element, and also the content/value of the element.

For Example:
elementName= span
className=Hi!
content= Hello World

Lets say we have a statement like this:
<div class="active" title="test" 
data-sly-element="${elementName}" 
data-sly-attribute.title="${className}"
data-sly-text="${content}">Lorem ipsum</div>

Output:
<span class="active" title="Hi!">Hello World</span>

This changes the <div> to a <span> changes the title from "test" to "Hi!" and the content from "Lorem ipsum" to "Hello World".

Test Statement
Test a statement and if the condition is false then remove the element and its contents.

Example:
<p data-sly-test="${properties.showText}">text</p>
<p data-sly-test.abc="${a || b || c}">is true</p>
<p data-sly-test="${!abc}">or not</p>

Output:
<p>text</p>
<p>is true</p>

Explanation:
{properties.showText} is some statement which evaluates to true.Hence displayed.

{a || b || c} is some statement which evaluates to true.Hence displayed.

{!abc} is false because in the previous line we assign a true value
to variable "abc" like this data-sly-test.abc="${a || b || c}". Since {!abc} evaluates to false thus the last statement is not displayed.

List Statement
The List statement helps us to iterate over an enumerable property.

Example:
<ol data-sly-list="${currentPage.listChildren}">
<li>${item.title}</li>
</ol>

Output:
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

Resource Statement 
The resource statement can be used just like an include/import statement to include the result of the indicated resource.

Example:
<article data-sly-resource="path/to/resource"></article>

Output:
<article><!-- Result of the rendered resource --></article>

Resource Statement Options
You can specify, add or remove selectors like the following.

Example:
<article data-sly-resource="${'path/to/resource' @
selectors='mobile'}"></article>

Overriding the resourceType:
<article data-sly-resource="${'path/to/resource' @
resourceType='my/resource/type'}"></article>

Changing the WCM mode on the fly as required:
<article data-sly-resource="${'path/to/resource' @
wcmmode='disabled'}"></article>

Include Statement
Includes the rendering of the indicated template (Sightly, JSP, ESP, etc.)

Example:
<section data-sly-include="path/to/template.html"></section>

Output:
<section><!-- Result of the rendered resource --></section>

Template & Call Statement
The template statement is used to define the structure of a component/ page.
It basically has a markup (HTML code).

Example of the template:
File: template.html
<template data-sly-template.one="${@ class, text}">
<span class="${class}">${text}</span>
</template>

So as we can see the above template.html gets defined similarly to a method/function in JAVA.

File: ABC.html
<div data-sly-use.tmpl="template.html"
data-sly-call="${tmpl.one @ class='example',
text='Hi!'}"></div>

Ouput:
<div><span class="example">Hi!</span></div>

So as depicted we pass the parameters in ABC.html as follows.
class='example'
text='Hi!'

and hence we see the template gets rendered with the passed value.

So for the sake of understanding, we can say:
The Template Statement is used to define a method/function.
The Call Statement is used to call the defined method.