Introduction to Sightly(By Ankit Gubrani)

Agenda :

lWhat is sightly ?lWhy sightly ?lsightly Expression Languagelsightly Data Attributes

What is sightly ?

Sightly is the new HTML templating system, introduced withAEM 6.0. It is a new templating engine for apache sling.

Why sightly ?

WHY?!?!

Don't Mess with my Markup

lFirst reason would be to keep my presenstation logic away from my business logic.

lsightly is HTML5: A Sightly template is itself a valid HTML5 file.

lSecurity by Default : Sightly automatically filters and escapes all textlbeing output to the presentation layer to prevent cross-site-scripting lvulnerabilties.

But hey ! Why not any other template engine ?

lNo Other templating system forces developer to keeplmarkup (Presentation) saperate from code (Business logic)

lAny other templating engine would not proivde felixibility toluse extensive features of JCR.

lAny other templating engine would not provide felixibilitylto use SLING.

Current Scenario

After sightly

sightly Expression Language

lsightly expressions are delimited by characters ${ and }. Atl runtime, these expressions are evauated and their value isl injected into the outgoing HTML stream. They can occurlwithin the HTML text or within attribute values.

l Sample Code :

l <h1>Page Title</h1>l <p>${currentPage.Title}</p>

lsightly expressions are used to access the data structures thatl provide the dynamic elements of the HTML output.

List of some useful objects available

lPropertieslpagePropertieslComponent lcurrentDesign lcurrentPage llog lout lpageManager lrequestlresource lresponse lsling lwcmmode

DEMO

sightly Data Attributes

To define structural elements within the template Sightlyemploys the HTML data attribute, which is an HTML5attribute syntax purposely intended for custom use bythird-party applications. All sightly-specific attributes areprefixed with data-sly-

data-sly-list: Repeats the content of the host element for each enumerable property in the provided object.

<ul data-sly-list="${currentPage.listChildren}"><li>index: ${item.path}</li>

</ul>

List

Test

data-sly-test: Conditionally removes the host element and it's content. A value of false removes the element; a value of true re

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

Use

data-sly-use: Initializes a helper object (defined in JavaScript or Java) and exposes it through a variable

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

DEMO

Any Questions?

lAbout Me

.about-me{name: Ankit Gubrani !Sr. AEM Developer;email-id: ankit.gubrani@codebrains.co.in;LinkedIn: in.linkedin.com/in/ankitgubrani;twitter: @ankitgubrani90;blog: codebrains.blogspot.in;website : codebrains.co.in;

}

Thank YouPlease contact me at : ankit.gubrani@codebrains.co.in