Tuesday, 16 February 2016

Sightly Tutorial for Beginners (AEM)

Sightly Tutorial for Beginners
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 lets 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
Lets 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 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 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 condition is false then removes 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 a structure of a component/ page.
It basically has markup (HTML code).

Example of 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 similar 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.


   Article being updated: 25th Feb, 2016

No comments:

Post a Comment

Coder Magnet
CoderMagnet is full of resources from our daily development activities. It has solutions for common problematic scenarios in technologies like Java 8, AEM, JCR and also occasionally gives you tips on Blogger as well.