Sightly – The AEM Templating Language

Sightly – The AEM Templating Language

(AEM 6 + Component Development)

Why Sightly?

In a typical Web Content development project, after the design of HTML/CSS/JS we have to convert it to a JSP, edit and hack it together to fit the JS and CSS, and then implementing the server side calls and logic in the JSP. Though not every AEM component development process follow this paradigm, for most it can increase component design time and cost significantly. Given this paradigm, the workflow is a three step process

What if there were only two design processes? That would certainly cut down on development time and cost. With Sightly, that is now possible.

Sightly is valid HTML5 markup. It is implemented through data attributes and parsed HTML text. This allows the business logic and simple UI logic or control to be elegantly separated.

Sightly consists of very simple presentation logic and anything beyond that will have to reside as a separate helper class. The Sightly ‘Use API’ defines the structure for external helper classes. These can be Java, other supported JVM languages, and now Javascript!!

Now, with the development split clearly into the Component front-end design and the Business server side logic, development time and costs can be reduced. This allows your developers to focus on what they’re good at and become more efficient in their day-to-day work.

Sightly differs from other templating systems in three main ways:

  • Security by Default:Sightly automatically filters and escapes all variables being output to the presentation layer to prevent cross-site-scripting (XSS) vulnerabilities. As Sightly understands the HTML syntax, 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.
  • Separation of Concerns:The expressiveness of the Sightly template language is purposely limited, in order to make sure that a real programming language is used to express the corresponding presentation logic. This optional logic is invoked from Sightly expressions with the Use-API pattern, making it easy to understand what is called for a given view, and to potentially have different logic for different views of the same resource.
  • 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.

Comments in Sightly Files

Sightly comments are HTML comments with additional syntax. They are delimited like this:

<!–/* A Sightly Comment */–>

Anything within a Sightly comment will be entirely ignored by the Sightly processor and removed from the output.

However, the content of standard HTML comments, delimited like this:

<!– An HTML Comment –>

Different Expressions in Sightly

  • Boolean

${true} ${false}

  • Variables
    • Accessing members dynamically:

${properties[myVar]}

    • Accessing members with special characters (in this case a space):

${properties[‘my property’]}

    • Simple member access:

${properties.text}

  • Operators
    • Logical NOT:

${!var}

    • Logical AND:

${varOne && varTwo}

    • Logical OR (can be used to provide string defaults):

${varOne || varTwo}

    • Conditional:

${varChoice ? varOne : varTwo}

    • Comparison (only supports integers):

${varOne < varTwo}

${varOne > varTwo}

${varOne <= varTwo}

${varOne >= varTwo}

    • Grouping parentheses:

${varOne && (varTwo || varThree)}

  • Internationalization

${‘Page’ @ i18n}

  • The hint option

${‘Page’ @ i18n, hint=’Translation Hint’}

  • The default source for the language is ‘resource’, meaning that the text gets translated to the same language as the content. This can be changed to ‘user’, meaning that the language is taken from the browser locale or from the locale of the logged-in user:

Accessing properties of the dialog.

<!-- /* Access to simple component property defined in dialog.xml */ -->

${properties.my_property}

<!-- /* Access to JCR property */ -->

${properties.jcr:title}

<!-- /* Access to page property */ -->

${pageProperties.name}

<!-- /* Access to inherited page property */ -->

${inheritedPageProperties.inherited_property}

<!-- /* Visualize all accessible properties */ -->

${properties}
  • In Sightly, we can create a component with two methods. By using Java Class or Javascript Server-Side File. It’s best to create a java file but you can go with your as per your requirement

Sightly component with Java

  • Creating a java file in the component itself.
package apps.mycomponent;

import com.adobe.cq.sightly.WCMUse;

public class MyComponent extends WCMUse {

    private String title;

    private String description;

    @Override

    public void activate() throws Exception {

        title = getProperties().get("title", "");      

        description = getProperties().get("description", "");

    }

      // Must have to get back the value in html file

    // Explanation : 'get' + capitalize method name

    public String getTitle() {

        return title;

    }

    public String getDescription() {

        return description;

    }

}
  • In HTML:- In html file we can use that java class
<div id="my-component" data-sly-use.tnt="apps.mycomponent.MyComponent">

    <!-- /* Here you call the Java Method */ -->

    <!-- /* Explanation : Imported Class + '.' + Uncapitalized java method name withoud 'get' */ -->

    <h1>${tnt.title}</h1>

    <p>${tnt.description}</p>

</div>

Sightly Component with server side Javascript

  • Create a js file name “tnt.js” in the component level
use(function () {

    var title = currentPage.getTitle();

    var description = properties.get("jcr:description", "default desc");

    return {

        title: title,

        description: description

    };

});
  • In HTML:- Use of that js file in html below
<div id="my-component" data-sly-use.cpt="tnt.js">
   <h1>${tnt.title}</h1>
    <p>${tnt.description}</p>
</div>

Tags: