Arti­cle updat­ed on July 27, 2016.

Wel­come to the sec­ond part of the intro­duc­tion to the HTML Tem­plate Lan­guage (HTL), for­mer­ly known as Sight­ly.

In this arti­cle I will go through some more data-sly attrib­ut­es, and show you how to write cus­tom Java class­es to inte­grate with your HTL com­po­nents.

Inter­est­ed in the oth­er parts? Here they are: part 1, part 3, part 4, part 5.

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

I got this ques­tion from @snemarch based on my first arti­cle.

No, you can use all the data-sly attrib­ut­es every­where you like.

Here an exam­ple to show data-sly-list with HTML5 arti­cle and sec­tion 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 snip­pet from a design­er 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 snip­pet and you lost the con­text of it.

Now with HTL, you can pre­serve the markup includ­ing the mock data, and still make it ful­ly func­tion­al.

In the sam­ple below, I have received a nav­i­ga­tion HTML snip­pet, and inte­grat­ed this with HTL. Via the emp­ty data-sly-test attrib­ut­es the ele­ments are sup­pressed com­plete­ly.

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 ele­ment.

What you also can do is to name your expres­sion and reuse that in oth­er data-sly-test expres­sion.

In the exam­ple below I have data-sly-test-valid, that then can used as ‘valid’ in the oth­er data-sly-test expres­sion.

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 cas­es you have a need to hide a con­tain­er ele­ment, for exam­ple hid­ing the <ul> for a list, or not gen­er­at­ing a sur­round­ing <div>

For these cas­es you can use the data-sly-unwrap attribute, or in AEM 6.1 and lat­er the <sly> ele­ment.

In this exam­ple we gen­er­ate a list of <li> items, with­out the <ul>:

sample4.html

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

In AEM 6.1 or lat­er, with the <sly> ele­ment, we can also write the fol­low­ing:

sample5.html

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

And in AEM 6.2, the data-sly-repeat ele­ment has been intro­duced to repeat the ele­ment itself, as opposed to data-sly-list that repeats only the con­tent:

sample6.html

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

One ben­e­fit of data-sly-unwrap is that you can also pass an expres­sion to it, in order to make it con­di­tion­al. Here you see that only in edit-mode the <ul> is hid­den:

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 your­self in need to write some cus­tom code to sup­port your com­po­nents. 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 cus­tom class, the first option is that your Java-class is extend­ing the “WCMUse­Po­jo” class.

When extend­ing this class you are able to call meth­ods like “getRe­source()”, “getCur­rent­Page()”, “get­Page­M­an­ag­er()” etc.

Here an exam­ple of a Java-class that extends WCMUse­Po­jo:

MyCompo​nent​.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 com­fort­able to extend a class, you can also imple­ment the “Use” inter­face.

Via the init() method you can access all the bind­ings that are avail­able. These are things like “cur­rent­Page”, “resource”, “request” etc:

MyCompo​nent​.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 imple­ment Java-class­es, but I will cov­er that in a next arti­cle (see HTL Intro­duc­tion part 4 and Using serv­er-side JavaScript with HTL).

In this final exam­ple you can see how you can access a ser­vice from the “WCMUse­Po­jo” class:

MyCompo​nent​.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 arti­cle, I am plan­ning to give you more sam­ples, and intro­duce some options to inte­grate your Java-class­es.

Read-on

Here are the oth­er arti­cles of my intro­duc­tion series:

Oth­er posts on the top­ic:

And here oth­er resources to learn more about it:

@heervisscher

0 comments