Introduction to Sightly
-
Upload
ankit-gubrani -
Category
Software
-
view
216 -
download
1
description
Transcript of Introduction to Sightly
![Page 1: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/1.jpg)
Introduction to Sightly(By Ankit Gubrani)
![Page 2: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/2.jpg)
![Page 3: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/3.jpg)
Agenda :
lWhat is sightly ?lWhy sightly ?lsightly Expression Languagelsightly Data Attributes
![Page 4: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/4.jpg)
What is sightly ?
![Page 5: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/5.jpg)
Sightly is the new HTML templating system, introduced withAEM 6.0. It is a new templating engine for apache sling.
![Page 6: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/6.jpg)
Why sightly ?
WHY?!?!
![Page 7: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/7.jpg)
Don't Mess with my Markup
lFirst reason would be to keep my presenstation logic away from my business logic.
lsightly is HTML5: A Sightly template is itself a valid HTML5 file.
lSecurity by Default : Sightly automatically filters and escapes all textlbeing output to the presentation layer to prevent cross-site-scripting lvulnerabilties.
![Page 8: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/8.jpg)
But hey ! Why not any other template engine ?
![Page 9: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/9.jpg)
lNo Other templating system forces developer to keeplmarkup (Presentation) saperate from code (Business logic)
lAny other templating engine would not proivde felixibility toluse extensive features of JCR.
lAny other templating engine would not provide felixibilitylto use SLING.
![Page 10: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/10.jpg)
Current Scenario
![Page 11: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/11.jpg)
After sightly
![Page 12: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/12.jpg)
sightly Expression Language
![Page 13: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/13.jpg)
lsightly expressions are delimited by characters ${ and }. Atl runtime, these expressions are evauated and their value isl injected into the outgoing HTML stream. They can occurlwithin the HTML text or within attribute values.
l Sample Code :
l <h1>Page Title</h1>l <p>${currentPage.Title}</p>
lsightly expressions are used to access the data structures thatl provide the dynamic elements of the HTML output.
![Page 14: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/14.jpg)
List of some useful objects available
lPropertieslpagePropertieslComponent lcurrentDesign lcurrentPage llog lout lpageManager lrequestlresource lresponse lsling lwcmmode
![Page 15: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/15.jpg)
DEMO
![Page 16: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/16.jpg)
sightly Data Attributes
![Page 17: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/17.jpg)
To define structural elements within the template Sightlyemploys the HTML data attribute, which is an HTML5attribute syntax purposely intended for custom use bythird-party applications. All sightly-specific attributes areprefixed with data-sly-
![Page 18: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/18.jpg)
data-sly-list: Repeats the content of the host element for each enumerable property in the provided object.
<ul data-sly-list="${currentPage.listChildren}"><li>index: ${item.path}</li>
</ul>
List
![Page 19: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/19.jpg)
Test
data-sly-test: Conditionally removes the host element and it's content. A value of false removes the element; a value of true re
<p data-sly-test.abc="${a || b || c}">is true</p><p data-sly-test="${!abc}">or not</p>
![Page 20: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/20.jpg)
Use
data-sly-use: Initializes a helper object (defined in JavaScript or Java) and exposes it through a variable
<div data-sly-use.nav="Navigation">${nav.foo}</div>
![Page 21: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/21.jpg)
DEMO
![Page 22: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/22.jpg)
Any Questions?
![Page 23: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/23.jpg)
![Page 24: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/24.jpg)
lAbout Me
.about-me{name: Ankit Gubrani !Sr. AEM Developer;email-id: [email protected];LinkedIn: in.linkedin.com/in/ankitgubrani;twitter: @ankitgubrani90;blog: codebrains.blogspot.in;website : codebrains.co.in;
}
![Page 25: Introduction to Sightly](https://reader034.fdocuments.in/reader034/viewer/2022052307/559444f91a28abfa2f8b47b9/html5/thumbnails/25.jpg)
Thank YouPlease contact me at : [email protected]