How to use data-sly attributes in Sightly with AEM

Here we will discuss some scenarios which are related to using the data-sly attributes to specific HTML-elements.
We can use all the data-sly attributes everywhere you like.
These scenarios will explain, data-sly-list with HTML5 article and section tags

Scenrio-1:  
<article data-sly-list="${currentPage.listChildren}">
  <section>
    <h1>${item.title}</h1>
    <h2>${item.properties.subtitle}</h2>
    <h3 data-sly-test="${item.listChildren}">My page has subpages</h3>
  </section>
</article>

Preserve the markup from the designer
How many times do you get an HTML snippet from a designer with some nice mock data in there? And what do we with that? we rip it apart and you just end up with a small snippet and you lost the context of it.
Now with Sightly, you can preserve the markup including the mock data, and still make it fully functional.
In the scenario below I have received a navigation HTML snippet and integrated this with sightly. Via the empty data-sly-test attributes the elements are suppressed completely.

Scenrio-2:
<ul data-sly-list="${currentPage.listChildren}">
  <li data-sly-text="${item.title}">This is the first menu item from my page</li>
  <li data-sly-test><a href="#">This is the second menu item from my page </a></li>
  <li data-sly-test><a href="#">This is the third menu item from my page </a></li>
  <li data-sly-test><a href="#">This is the fourth menu item from my page </a></li>
</ul>

Naming your data-sly-test expression:
With data-sly-test you can show or hide an HTML element.
What you also can do is to name your expression and reuse that in another data-sly-test expression.
In the scenario below I have data-sly-test-valid, which then can be used as ‘valid’ in the other data-sly-test expression.

Scenrio-3:
<div data-sly-test.valid="${pageProperties.name}">${pageProperties.name}</div>
<div data-sly-test="${!valid && wcmmode.edit}">Please enter a name for this page</div>

Hiding container elements
If some cases you have a need to hide a container element, for example hiding the <ul> for a list, or not generating a surrounding <div>
For these cases you can use the data-sly-unwrap attribute.
In this example, we generate a list of <li> items, without the <ul>.

Scenrio-4:
<ul data-sly-list.child="${currentPage.listChildren}" data-sly-unwrap>
  <li>${child.title}</li>
</ul>

You can also pass an expression to the data-sly-unwrapped attribute to make it conditional.
Here you see that only in edit-mode the <ul> is hidden.

Scenrio-5:
<ul data-sly-list-child="${currentPage.listChildren}" data-sly-unwrap="${wcmmode.edit}">
  <li>${child.title}</li>
</ul>

Custom Java-classes
In most projects, you will find yourself in need to write some custom code to support your components. With sightly, you can use the data-sly-use attribute for that.

Scenrio-6:
<div data-sly-use.comp1="com.myproject.SightlyComponent">
  <h1>${comp1.myTitle}</h1>
</div>

Java-class, option 1
We have a few options on how you can write your custom class, the first option is that your Java-class is extending the “WCMUse” class from Sightly.
When extending this class you are able to call methods like “getResource()”, “getCurrentPage()”, “getPageManager()” etc.
Here an example of a Java-class that extends WCMUse.

SightlyComponent.java
public class SightlyComponent extends WCMUse  {
  private String myTitle;
  @Override
  public void activate() {
    myTitle = "My Project " + getCurrentPage().getTitle();
  }
  public String getMyTitle() {
    return myTitle;
  }
}

Java-class, option 2
If you don’t feel comfortable to extend a class, you can also implement the Use-interface.

Via the init() method you can access all the bindings that are available. These are things like “currentPage”, “resource”, “request” etc.
Here an example of this implementation.

SightlyComponent.java
public class SightlyComponent implements Use {
  private String myTitle;
  @Override
  public void init(Bindings bindings) {
    Page currentPage = (Page) bindings.get(WCMBindings.CURRENT_PAGE);
    myTitle = currentPage.getTitle() + "new";
  }
  public String getMyTitle() {
    return myTitle;
  }
}

We have some more options on how you can implement Java-classes, but I will cover that in the next article.
In this final example, you can see how you can access a service from the WCMuse-class

SightlyComponent.java
public class SightlyComponent extends WCMUse  {
  private String myTitle;
  @Override
  public void activate() {
    myTitle = "My Project " + getCurrentPage().getTitle();
    MyService service = getSlingScriptHelper().getService(MyService.class);
    service.action(myTitle);
  }
  public String getMyTitle() {
    return myTitle;
  }
}

We can explore more things about sightly in the next article !!!