Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Introduction to Sightly
(By Ankit Gubrani)
Agenda :
lWhat is sightly ?
lWhy sightly ?
lsightly Expression Language
lsightly Data Attributes
What is sightly ?
Sightly is the new HTML templating system, introduced with
AEM 6.0. It is a new templating engine for apache sling.
Why sightly ?
WHY?!?!
Don't Mess with my Markup
lFirst reason would be to keep my presenstation logic away from my business logic.
lsightly is H...
But hey ! Why not any other template engine ?
lNo Other templating system forces developer to keep
lmarkup (Presentation) saperate from code (Business logic)
lAny other...
Current Scenario
After sightly
sightly Expression Language
lsightly expressions are delimited by characters ${ and }. At
l runtime, these expressions are evauated and their value is...
List of some useful objects available
lProperties
lpageProperties
lComponent
lcurrentDesign
lcurrentPage
llog
lout
lpageMa...
DEMO
sightly Data Attributes
To define structural elements within the template Sightly
employs the HTML data attribute, which is an HTML5
attribute syn...
data-sly-list: Repeats the content of the host element for each enu
<ul data-sly-list="${currentPage.listChildren}">
<li>i...
Test
data-sly-test: Conditionally removes the host element and it's conte
<p data-sly-test.abc="${a || b || c}">is true</p...
Use
data-sly-use: Initializes a helper object (defined in JavaScript or J
<div data-sly-use.nav="Navigation">${nav.foo}</d...
DEMO
Any Questions?
lAbout Me
.about-me{
name: Ankit Gubrani !Sr. AEM Developer;
email-id: ankit.gubrani@codebrains.co.in;
LinkedIn: in.linked...
Thank You
Please contact me at : ankit.gubrani@codebrains.co.in
Introduction to Sightly
Introduction to Sightly
Próxima SlideShare
Cargando en…5
×

Introduction to Sightly

751 visualizaciones

Publicado el

Introduction to new templating language Sightly, by adobe. This slide gives you an good idea about " what sightly is all about? ".

Publicado en: Software
  • Inicia sesión para ver los comentarios

Introduction to Sightly

  1. 1. Introduction to Sightly (By Ankit Gubrani)
  2. 2. Agenda : lWhat is sightly ? lWhy sightly ? lsightly Expression Language lsightly Data Attributes
  3. 3. What is sightly ?
  4. 4. Sightly is the new HTML templating system, introduced with AEM 6.0. It is a new templating engine for apache sling.
  5. 5. Why sightly ? WHY?!?!
  6. 6. 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.
  7. 7. But hey ! Why not any other template engine ?
  8. 8. 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.
  9. 9. Current Scenario
  10. 10. After sightly
  11. 11. sightly Expression Language
  12. 12. 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.
  13. 13. List of some useful objects available lProperties lpageProperties lComponent lcurrentDesign lcurrentPage llog lout lpageManager lrequest lresource lresponse lsling lwcmmode
  14. 14. DEMO
  15. 15. sightly Data Attributes
  16. 16. 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-
  17. 17. 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
  18. 18. 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>
  19. 19. Use data-sly-use: Initializes a helper object (defined in JavaScript or J <div data-sly-use.nav="Navigation">${nav.foo}</div>
  20. 20. DEMO
  21. 21. Any Questions?
  22. 22. lAbout Me .about-me{ name: Ankit Gubrani !Sr. AEM Developer; email-id: ankit.gubrani@codebrains.co.in; LinkedIn: in.linkedin.com/in/ankitgubrani; twitter: @ankitgubrani90; blog: codebrains.blogspot.in; website : codebrains.co.in; }
  23. 23. Thank You Please contact me at : ankit.gubrani@codebrains.co.in

×