Article updated on July 27, 2016.

Welcome to the second part of the introduction to the HTML Template Language (HTL), formerly known as Sightly.

In this article I will go through some more data-sly attributes, and show you how to write custom Java classes to integrate with your HTL components.

Interested in the other parts? Here they are: part 1, part 3, part 4, part 5.

Are data-sly attributes bound to specific HTML-elements?

I got this question from @snemarch based on my first article.

No, you can use all the data-sly attributes everywhere you like.

Here an example to show data-sly-list with HTML5 article and section tags:

sample1.html

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

Preserve the markup from the designer

How many times do you get a 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 HTL, you can preserve the markup including the mock data, and still make it fully functional.

In the sample below, I have received a navigation HTML snippet, and integrated this with HTL. Via the empty data-sly-test attributes the elements are suppressed completely.

sample2.html

<ul data-sly-list="${currentPage.listChildren}">
    <li data-sly-text="${item.title}">This is the first menu item</li>
    <li data-sly-test><a href="#">This is the second menu item</a></li>
    <li data-sly-test><a href="#">This is the third menu item</a></li>
    <li data-sly-test><a href="#">This is the fourth menu item</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 other data-sly-test expression.

In the example below I have data-sly-test-valid, that then can used as ‘valid’ in the other data-sly-test expression.

sample3.html

<div data-sly-test.valid="${pageProperties.title}">${pageProperties.title}</div>
<div data-sly-test="${!valid && wcmmode.edit}">Please enter a title 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, or in AEM 6.1 and later the <sly> element.

In this example we generate a list of <li> items, without the <ul>:

sample4.html

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

In AEM 6.1 or later, with the <sly> element, we can also write the following:

sample5.html

<sly data-sly-list.child="${currentPage.listChildren}">
    <li>${child.title}</li>
</sly>

And in AEM 6.2, the data-sly-repeat element has been introduced to repeat the element itself, as opposed to data-sly-list that repeats only the content:

sample6.html

<li data-sly-repeat.child="${currentPage.listChildren}">${child.title}</li>

One benefit of data-sly-unwrap is that you can also pass an expression to it, in order to make it conditional. Here you see that only in edit-mode the <ul> is hidden:

sample7.html

<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 HTL you can use the data-sly-use attribute for that.

sample8.html

<div data-sly-use.comp1="com.myproject.MyComponent">
    <h1>${comp1.myTitle}</h1>
</div>

Java-class, option 1

We have a few options how you can write your custom class, the first option is that your Java-class is extending the “WCMUsePojo” class.

When extending this class you are able to call methods like “getResource()”, “getCurrentPage()”, “getPageManager()” etc.

Here an example of a Java-class that extends WCMUsePojo:

MyComponent.java

import com.adobe.cq.sightly.WCMUsePojo;

public class MyComponent extends WCMUsePojo {

    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:

MyComponent.java

import org.apache.sling.scripting.sightly.pojo.Use;

public class MyComponent 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 how you can implement Java-classes, but I will cover that in a next article (see HTL Introduction part 4 and Using server-side JavaScript with HTL).

In this final example you can see how you can access a service from the “WCMUsePojo” class:

MyComponent.java

import com.adobe.cq.sightly.WCMUsePojo;

public class MyComponent extends WCMUsePojo {

    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;
    }
}

This is already the end of part 2 of my HTL intro. In my next article, I am planning to give you more samples, and introduce some options to integrate your Java-classes.

Read-on

Here are the other articles of my introduction series:

Other posts on the topic:

And here other resources to learn more about it:

@heervisscher

0 comments