Sightly - Beautiful Markup

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. */-->

All evaluated data-sly-* attributes are removed from the generated markup.

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