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.
So today we will talk about some advantages that can help me in development
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”.
HTL Maven Plugin
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:
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:
Fig - Synchronization settings |
This is automatically generated “brackets.json” file in brackets which contains all the configurations,added in the above dialog.
Fig - configuration file |
Advantages of AEM Brackets Extension:
- 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.
- 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.
- 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.
- 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.
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.
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:
|
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 .
Hi Shivani,
ReplyDeleteWhat tool are you using to show markup and result on same browser window? at 2:18
AEM HTL Read–Eval–Print Loop
DeleteGreat....!
ReplyDeleteVery useful
Wow, great post.
ReplyDeleteThis 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.
ReplyDeleteweb development company uk
Nice article for Sightly information.
ReplyDeleteAlso found one more article for Adobe AEM with defined information
https://aemintroduction.blogspot.com
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".אבחון אישיות
ReplyDeleteIts really very nice website. Thank you for giving full information about AEM Online Training.
ReplyDeleteWant to know to Gmail Sync Error then you can read this article and follow these method or call us on our toll free number +1 888 509 9555.
ReplyDeleteThanks for sharing the great content. It will helps a lot.
ReplyDeleteThanks
Web Development Company India