Slightly, some Sightly

AEM 6.0 introduces Sightly – a new templating language. Sightly replaces JSP as the most preferred templating language for AEM. Sightly helps you to separate your design from your code. The intention is to bring more front-developers to AEM component development. By providing a demarcation between the design and the development departments, Adobe expects to reduce the go-to-market time for AEM development projects.

For more information on Sightly, visit Adobe documentation.

Sightly can used in three ways:

  • Pure HTML
  • HTML + server-side JavaScript
  • HTML + Java

In the following example, Sightly is used as pure HTML to display the name of a page:

Code in template

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

The same example can be rewritten in Sighlty and JavaScript. This example doesn’t represent the best practice. However, it shows how to demarcate the logic using JavaScript:

Code in template

<div class="component-name" data-sly-use.component="component.js">
<h1>Page Title</h1>
${component.title}</div>
</div>

component.js

use(function() 
{
        return {
        title: currentPage.getTitle()
        };
});

The next example shows how the same logic is implemented using Sightly + Java combination:

Code in template

<div class="component-name" data-sly-use.component="Component">
<h1>Page Title</h1>
<p>${component.CurrentPageTitle}</p>
</div>

Component.java

package apps.your.directory.structure;
import com.adobe.cq.sightly.WCMUse;
import com.day.cq.wcm.api.Page;
public class Component extends WCMUse
{
private String CurrentPageTitle;

@Override
   public void activate() throws Exception 
   {
   final Page currentPage = getCurrentPage();
   CurrentPageTitle=currentPage.getTitle();
   }

   public String getCurrentPageTitle()
   {
   return CurrentPageTitle;
   }
}

Comments are closed.