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

    for a list, or not gen­er­at­ing a sur­round­ing

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

In this exam­ple we gen­er­ate a list of

  • items, with­out the
      :
  • 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 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

      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