Sunday, July 23, 2017

Tips and Tricks of HTL(Sightly) Development in AEM 6.3


Hello Everyone,
In the AEM world, There are a lot of changes in every moment. As the technology is growing , Adobe has done a wonderful job in the field of developer tools and maven-plugins that can make the development easier. I am not a great fan of developer tools, But what if
  • They made our manual tasks automatic.
  • They just speed up our development.
  • They saves our time and stop it at the same place where we are doing wrong.
If all the above reasons exist, so yes i would like to give some time from my hectic schedule  to install that on my machine and take a lot of long term advantage of it.

So today we will talk about some advantages that can help me in development
HTL Maven Plugin
Before this plugin, There was not any way to validate our sightly (HTL) templating language. Either it is right or wrong(syntactically) ,the code gets build and when we see the page we got to know...ah… something is wrong.This plugin came in picture as “Prevention is better than cure”.
  We just add this plugin in our content’s pom.xml and it validates HTL at the time of build. So there is no possibility of syntactical error at run time and saves a lot of effort of developer to find out that which syntax he/she has missed out.
<plugin>
<groupId>org.apache.sling</groupId>
<artifactId>htl-maven-plugin</artifactId>
<version>1.0.6</version>
<configuration>
<sourceDirectory>${basedir}/src/main/content/jcr_root</sourceDirectory>
</configuration>
<executions>
<execution>
<id>validate-scripts</id>
<goals>
<goal>validate</goal>
</goals>
<phase>compile</phase>
</execution>
</executions>
</plugin>
AEM Brackets Extension
Before this tool,I was always using VLT tool but this can be a great alternative of vault in AEM.

Benefits over Vault:
  • Automatic Syncing
  • List each and every file you have changed in brackets, so that unnecessary changes won’t go.
  • Easy to use console
Steps by Steps installation of Brackets AEM Extension:
  • The AEM Brackets Extension supports Brackets version 1.0 or greater.Download the Latest Brackets from http://brackets.io/
  • Add AEM Brackets Extension:
    • Go to File-> Extension Manager
    • Search AEM Brackets Extension in the Search Bar.
    • Install the software

Important to Note:
  • Sometimes install become failed so you can use “install from URL “ and give the github path here.
installed software.PNG
Fig - AEM Brackets Extension 
  • If this also doesn’t work,you can download the zip from github and put it on “drag zip here”.Drag zip here worked for me.
  • After the installation of extension, you can open content package folder (jcr_root)of the project in brackets.

Connect Brackets with Server:

    In order to synchronize your content to and from development AEM instance , You need to define your project Settings.
      • Go to AEM->Project Settings
      • Add configurations like this:
    project_settings.PNG
    Fig - Synchronization settings
    This is automatically generated “brackets.json” file in brackets which contains all the configurations,added in the above dialog.
    brackets.PNG
    Fig - configuration file

    Advantages of AEM Brackets Extension:

    1. Synchronization Content:
    The AEM Brackets Extension provides synchronization based on the rules written in filter.xml . So filter.xml play a very important role in syncing the content.
      • Automatic Synchronization of Changed Files:
    This synchronize changes from Brackets editor to AEM but the automatic synchronization is not applicable from AEM instance to brackets editor.
      • Manual Bidirectional Synchronization:
    In the Project Explorer, You can Export to Server and Import from Server options which right clicking on a file and folder.

    1. Synchronization Status:The AEM Bracket Extension provides a notification icon on the right hand side of console, which indicates the status of the synchronization.
    Different colors represent different status of synchronization:
    Green : All data has been synchronized
    Blue: Data synchronization is in progress.
    Red: Data is unable to synchronized.
    Yellow: Some of the files are not synchronized.
    1. The full content package(whole project) can be synchronized by using the options like Export Content Package and Import Content Package in the AEM Menu.
    2. The AEM Brackets Extension provides some auto completion options that helps to write “HTL attributes” and “expressions”.
    The Demonstration video on AEM Bracktes Extension:


    AEM HTL Read–Eval–Print Loop

    This is also an interesting tool which provides a live coding environment to test HTL scripts and see outputs.For Learning perspective it is quite easy to see the output on the same page.
    To install this on your AEM instance:
    1.Download the Package
    2. Install it in AEM Package Manager.

    Now you can see the console from here.
    repl.png
    Fig - REPL tool
    New features of HTL in AEM 6.3
    HTL (HTML templating Language) is in a great demand nowadays, in terms of features it is growing after every new version of AEM .
    So here we will discuss what happiness AEM 6.3 bring for us:
    1.Fetch the properties of a resource : I think this is the best feature till date as when we need to fetch some properties of a resource, we need to go for a Java class( either Sling Model and WCMPojo) .But now what we can do:
    <sly data-sly-use.node="/etc/commerce/">${node.jcr:title}</sly>

    2. Request Attributes: In the data-sly-include and data-sly-resource you can now pass requestAttributes in  order to use them in the receiving HTL-script.
    Note: You can also Download the Package for this and do it at your place.
    3. Date Formatting: Before AEM 6.3 ,If there is a need to format any date in HTL, you need to use a java class to do that.But now this work has also become very easier to us as HTL provides a support of date-format,timezone and locale.
    Examples:
    1. <h2>${ 'dd-MM-yyyy' @ format=currentPage.jcr:created}</h2>

    1. <h2>${ 'dd-MMM-yyyy hh:mm:ss' @ format=currentPage.jcr:created, timezone='PST'}</h2>

    1. <h2>${ 'dd-MMMM-yyyy hh:mm:ss' @ format=currentPage.jcr:created, timezone='PST', locale='fr'}</h2>

    4.Number Formatting:In HTL, now we can show the number in decimal format:

    <h2>${ '#.00' @ format=300}</h2>

    The Demonstration video on new Features of HTL:


    References: http://blogs.adobe.com/experiencedelivers/experience-management/new-htl-features-aem6-3


    If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com


    Hope it will help you guys !!
    Thanks and Happy Learning .

    9 comments:

    1. Hi Shivani,

      What tool are you using to show markup and result on same browser window? at 2:18

      ReplyDelete
    2. Great....!

      Very useful

      ReplyDelete
    3. This information really worth saying, I think you are master of the content and thank you so much sharing that valuable information and get new skills after referring that post.
      web development company uk

      ReplyDelete
    4. Nice article for Sightly information.

      Also found one more article for Adobe AEM with defined information

      https://aemintroduction.blogspot.com


      ReplyDelete
    5. The focal point of development changed from internal development to concentrate on the external attributes of an individual or personality qualities, for example, a "satisfying personality", or "having a constructive personality".אבחון אישיות

      ReplyDelete
    6. Its really very nice website. Thank you for giving full information about AEM Online Training.

      ReplyDelete