Sightly means "pleasing to the sight" ,so it means to make the website pages more attractive with minimal effort. Sightly is introduced to replace JSP & ESP from AEM 6.0 and it is a new HTML template language. Sightly plays a very important role to define the output sent to the browser by specifying HTML itself with some basic presentation and variables to be evaluated at runtime.
In this article , the below topics on Sightly are explained
- Features of Sightly
- Sightly developing tools
- Block Statements in Sightly
Features of Sightly
1. Light weight - No dependencies , fast and lean
2. Secure - Automatic contextual XSS protection and URL externalization
3. Code-less - Enforce separation of concerns between logic and markup
4. Powerful - Straight-forward API for logic, allowing to do virtually anything
5. Intuitive - Clear, simple & restricted feature set
Tools & Plugins
1. Sightly Read Eval Print Loop(REPL) - Great tool to learn Sightly which is a live code editing environment. Click here to learn more.
2. AEM Developer tools for Eclipse - It is Eclipse plugin used to develop Sightly projects more easily. Click here to learn more.
3. AEM Brackets Extension - It provides an easy way to edit AEM components and Client Libraries and front-end developers can easily work with minimal AEM knowledge in projects.Click here to learn more.
Block Statements in Sightly
Block plugins in Sightly are defined by data-sly-* attributes set on HTML elements.
All HTML elements can have a closing tag or self-closing like
<tag data-sly-BLOCK></tag>
<!--/* A block is simply consists in a data-sly attribute set on an element. */-->
<tag data-sly-BLOCK/>
<!--/* Empty elements (without a closing tag) should have the trailing slash. */-->
Attributes can have a value such as String , expressions or boolean<tag data-sly-BLOCK="string value"/>
<!--/* A block statement usually has a value passed, but not necessarily. */-->
<tag data-sly-BLOCK="${expression}"/>
<!--/* The passed value can be an expression as well. */-->
<tag data-sly-BLOCK="${@ ArgVal='Sightly'}"/>
<!--/* Or a parametric expression with arguments. */-->
<tag data-sly-BLOCKONE="value" data-sly-BLOCKTWO="value"/>
<!--/* Several block statements can be set on a same element. */-->
Identifiers - data-sly-Block statements
Format : <tag data-sly-Block.identifier="value"></tag>
Examples :
<div data-sly-use.navigation="com.adobe.sightlyExample.MyNavigation">${navigation.title} </div>
<!--/* MyNavigation is a java class and assigning it to navigation identifier */-->
<div data-sly-test.isEditMode="${wcmmode.edit}">${isEditMode}</div>
<!--/* wcmmode.edit expression's result is assigned to isEditMode identifier */-->
<div data-sly-list.child="${currentPage.listChildren}">${child.properties.jcr:title}</div>
<!--/* currentPage's child page items are assigned to child identifier */-->
<div data-sly-template.nav>Hello World</div>
<div data-sly-call="${nav}"></div>
<!--/* The attribute statement uses the identifier to know to which attribute it should apply it's value: */-->
<div data-sly-attribute.title="${properties.jcr:title}"></div> <!--/* This will create a title attribute */-->
So in next articles I will explain available data-sly-Block statements in Sightly like :
- data-sly-test data-sly-text data-sly-use
- data-sly-attribute data-sly-element data-sly-list
- data-sly-repeat data-sly-include data-sly-resource
- data-sly-template data-sly-call data-sly-unwrap
