Introduction to Sightly
1 like•928 views
Sightly is a new HTML templating system introduced with AEM 6.0 designed for Apache Sling, emphasizing the separation of presentation logic from business logic. It ensures security by default, automatically filtering output to prevent vulnerabilities, and utilizes an expression language for dynamic HTML content. Sightly also employs HTML5 data attributes to manage structural elements within the template.
Introduction to Sightly
- 1. Introduction to Sightly (By Ankit Gubrani)
- 3. Agenda : lWhat is sightly ? lWhy sightly ? lsightly Expression Language lsightly Data Attributes
- 4. What is sightly ?
- 5. Sightly is the new HTML templating system, introduced with AEM 6.0. It is a new templating engine for apache sling.
- 7. 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 text lbeing output to the presentation layer to prevent cross-site-scripting lvulnerabilties.
- 8. But hey ! Why not any other template engine ?
- 9. lNo Other templating system forces developer to keep lmarkup (Presentation) saperate from code (Business logic) lAny other templating engine would not proivde felixibility to luse extensive features of JCR. lAny other templating engine would not provide felixibility lto use SLING.
- 10. Current Scenario
- 11. After sightly
- 13. lsightly expressions are delimited by characters ${ and }. At l runtime, these expressions are evauated and their value is l injected into the outgoing HTML stream. They can occur lwithin 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 that l provide the dynamic elements of the HTML output.
- 14. List of some useful objects available lProperties lpageProperties lComponent lcurrentDesign lcurrentPage llog lout lpageManager lrequest lresource lresponse lsling lwcmmode
- 15. DEMO
- 17. To define structural elements within the template Sightly employs the HTML data attribute, which is an HTML5 attribute syntax purposely intended for custom use by third-party applications. All sightly-specific attributes are prefixed with data-sly-
- 18. data-sly-list: Repeats the content of the host element for each enu <ul data-sly-list="${currentPage.listChildren}"> <li>index: ${item.path}</li> </ul> List
- 19. Test data-sly-test: Conditionally removes the host element and it's conte <p data-sly-test.abc="${a || b || c}">is true</p> <p data-sly-test="${!abc}">or not</p>
- 20. Use data-sly-use: Initializes a helper object (defined in JavaScript or J <div data-sly-use.nav="Navigation">${nav.foo}</div>
- 21. DEMO
- 22. Any Questions?
- 24. 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; }
- 25. Thank You Please contact me at : [email protected]