Basics of Sightly | AEM CQ5

What is Sightly  ?

Sightly is an HTML templating language, introduced in AEM 6.0. It replaces the JSP (Java Server Pages) and ESP (ECMAScript Server pages). Any page created in Sightly is a HTML5.

Sightly keeps your markup beautiful and it would be very easy to maintain even if your code is dynamic.

It differs from other templating systems in three main ways :

• Secure By Default : It automatically filters & escapes all variables being output to the presentation layer to prevent cross-site-scripting (XSS) vulnerabilities.It is capable to automatically detect the scope in which variables are placed and automatically do proper context-aware escaping and XSS protection. Yet, it is possible to manually control the display context if needed.

           Example :-

           Suppose you are using rich text in your component and you want to display that using  sightly then you will be using the code ${myModel.text} and suppose you have  configured a heading and some text.

           <h1> Heading </h1>

           <p> some text in the rte <p>

           When you use ${myModel.text} then it will be rendered as below

           <h1> Heading </h1>

           <p> some text in the rte <p> 

          All the HTML tags will be ignored and the rich text will be considered as simple text.    This is because, to protect against cross-site scripting (XSS) vulnerabilities, Sightly  automatically recognises the context within which an  output string is to be displayed within the final HTML output, and escapes that string appropriately. That's why in this case the Sightly removed all the html attributes when did not use context='html'

        

Still this is possible to manually control the display context by providing the context as 'HTML' that is ${myModel.text @ context='html'}          

•  Separation of Concerns : The markup and Coding logic is separated. The logic is invoked from Sightly expressions with Use-Api pattern,making it easy to understand for a given view.  

          Example :- The non-basic logic is implemented in the Java class and can be called                     using data-sly-use attribute as shown below.

          <div data-sly-use.training="com.training.MyComponent"> 

         // display the value from the Java-class  ${ training.myCustomValue } </div>  

         There are different ways of implementing as given below :- 

  

1.   Class can extends WCMUse-class 
2.   Class implements Use-interface 
3.   Class can be adapted from Resource 
4.   Class can be adapted from Request

           we will see the implementation of all these in separate articles\

• Sightly is HTML5 : A Sightly file is itself a valid HTML5 file. All Sightly-specific syntax is expressed either within a data attribute, or within HTML text. Any Sightly file opened as HTML in an editor will automatically benefit from any features provided by that editor for regular HTML.

         Example :

         Basic logic can be implemented using HTML5 attributes

        <div data-sly-test="${wcmmode.edit}">   This will be shown in edit mode... </div> 

         Bindings :-

        <h2>${currentPage.title}</h2> 

         <h3>${pageProperties.jcr:title || 'No title'}</h3> 

         <ul data-sly-list="${currentPage.listChildren}">

         <li>Page title: ${item.title}</li> 

        </ul>