Created

Jan 23, 2014

Sightly intro part1

Posted by Feike Visser

In this article I want to give you an introduction into Sightly. This is the new way to develop components and templates in the AEM6 release.

I won't go much into text, but want to show you 10 code samples, and compare these to the existing way of component development via JSP.

The main objectives of sightly are :
- giving back the markup, and not mixing it with code
- everything is secure, by default
- smoothen the workflow between the designer and the developer

Ready for the first code sample?, here we go!

sample1.html

currentPageName : ${currentPage.name}

Well that looks like a JSP, but not quite. Two main differences:

  1. extension of the file is changed to .html
  2. we have only markup in the file, no inclusion of a global.jsp, just markup. So in case a designer wants to look at the file he can just open it in his toolset.

Next one...

sample2.html

Show this only in edit mode to the author

Now it is getting more interesting, we have now a data-sly-test attribute and a wcmmode object.

When the expression inside data-sly-test evaluates to false the whole tag while be hidden in the markup.

sample3.html

Show this to the author
Not in author mode anymore..

data-sly-test also supports the naming and reuse of tests, we have an expression 'author' that we want to reuse in other data-sly-test attributes.

These are very common use-cases and can now be done without writing any code are extension.

sample4.html

Mock page title

data-sly-text will replace the value of the HTML-element with the expression of the data-sly-text.

In the example above the page-title will be printed. But the mock value can still be in there to make it easier to view the file in HTML-editors.

sample5.html

  • ${child.title}

Here you see an example of a loop, the list object is passed to the data-sly-list attribute. Based on the name ('child') you can reference each item in the loop.

The output is here that see you a list of the subpages with all the page-titles.

This is quite a basic list example, let go to a more advanced one!

sample6.html

  • ${child.title}

In this sample you see a few new elements:

  1. inside a data-sly-list you have access to a list-variable that contain things like : index, count, odd, even, first, last, middle
  2. in the expression you see the use of the ternary operator
sample7.html

With data-sly-resource you can include components and resources. In the above sample you include of standard cq parsys in your template.

sample8.html

So you are in need to disable the wcmmode for a specific component? That can now be done via the wcmmode-option when including a component.

sample9.html

${pageProperties.jcr:title || properties.title || "No title"}

Within an expression you can use the 'or' operator to define fallbacks in case properties are empty. You read the expression from left to right, in the example here "No title" is shown when jcr:title and properties.title are both empty.

sample10.html

Via data-sly-include you can include other files like the cq:include tag. From sightly you can still use and re-use JSP files if you want. Like shown here for the author-environment.

In my next article I will explain more advanced topics on how to use your custom Java-classes with Sightly.

Next articles: part 2, part 3, part 4, part 5

@heervisscher

COMMENTS

  • By Tattoos - 4:54 PM on Jun 08, 2014   Reply
    Many Thanks.
  • By Obat Keputihan - 9:50 AM on Jun 22, 2014   Reply
    Many Thanks.
    • By replacement birth certificate - 4:37 AM on Jul 24, 2014   Reply
      Great Information. Really helpful.
      • By marriage certificates - 4:46 AM on Jul 24, 2014   Reply
        Great Information..
        • By Copy Birth Certificate - 4:48 AM on Jul 24, 2014   Reply
          Great Blog..
          • By Judi Bola - 3:33 AM on Aug 06, 2014   Reply
            Great blog! I really love how it is easy on my eyes and the information are well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your rss feed which really should do the trick! Have a nice day!
            • By Sbobet Casino - 3:38 AM on Aug 06, 2014   Reply
              Hello, i am glad to read the whole content of this blog and am very excited and happy to say that the webmaster has done a very good job here to put all the information content and information at one place.
              • By Piala Dunia 2014 - 3:43 AM on Aug 06, 2014   Reply
                This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the good work. I have been meaning to write something like this on my website and you have given me an idea.
                • By tamsulosin drug class - 1:45 PM on Aug 14, 2014   Reply
                  Interesting article. The article affects many "burning" issues in our society. We cant be uninvolved to these issues. There are many articles on the web on this particular point, but you have highlighted different sides of the subject. Your article gives good ideas and concepts. I really enjoyed simply reading.

                  ADD A COMMENT