Download - Sightly Component Development in AEM
![Page 1: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/1.jpg)
Adobe Experience Manager
@GabrielWalt, Product Manager
AEM6+ Component Development
![Page 2: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/2.jpg)
Adobe Experience Manager
Specification and TCK open sourced to GitHub.Reference implementation donated to Apache Sling.
Follow @sightlyio on Twitter.http://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html
![Page 3: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/3.jpg)
Adobe Experience Manager
§ 1 Why Sightly § 2 Features § 3 Tooling
![Page 4: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/4.jpg)
Adobe Experience Manager
DesignHTML/CSS
Template JSP
LogicJava
DesignHTML/CSS
Template Sightly HTML
LogicUse-API
ProjectManagementSightly
JSP ProjectManagement
~25%
Effort / Cost
Adobe.com estimated that it reduced their project costs by about 25%
Project Efficiency
![Page 5: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/5.jpg)
Adobe Experience Manager
DesignHTML/CSS
Component
BusinessLogic
Inefficient Static HTML beinghanded over…
Front-end Developer – HTML – CSS/JS
Java Developer – Java/OSGi – Business logic
Improves project efficiency by removing the pain of JSP and Java development
Development Workflow
![Page 6: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/6.jpg)
Adobe Experience Manager
DesignHTML/CSS
Component
BusinessLogic
Front-end Developer – HTML – CSS/JS
Java Developer – Java/OSGi – Business logic
Efficient APIs to OSGi bundles
Improves project efficiency by removing the pain of JSP and Java development
Development Workflow
![Page 7: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/7.jpg)
Adobe Experience Manager
Can be edited by front-end developers:
✓ Client Libraries (CSS & JS) ✕ JSP (markup & logic)
Component
Development Workflow
![Page 8: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/8.jpg)
Adobe Experience Manager
Component
Development WorkflowCan be edited by front-end developers:
✓ Client Libraries (CSS & JS) ✕ JSP (markup & logic) ✓ HTML markup (Sightly template) ✓ View logic (server-side JS or Java)
![Page 9: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/9.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly basic example
![Page 10: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/10.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly basic example
1︎1︎ Automatic contextual HTML escaping and XSS protection of all variables
2︎ Fallback value if property is empty
3︎ Remove HTML attribute if value is empty
2︎ 3︎
![Page 11: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/11.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly basic example
![Page 12: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/12.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly
<%@include file="/libs/foundation/global.jsp"%><a href="<%= xssAPI.getValidHref(properties.get("link", "#")) %>" <% String title = properties.get("jcr:title", ""); if (title.length() > 0) { %>title="<%= xssAPI.encodeForHTMLAttr(title) %>"<% } %>> <%= xssAPI.encodeForHTML(properties.get("jcr:description", "")) %></a>
JSP – Scriptlets
Sightly VS JSP
Please
try ag
ain…
![Page 13: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/13.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly
JSP – Expression Language & JSTL<%@include file="/libs/foundation/global.jsp"%><a href="${!empty properties.link ? xss:href(properties.link) : '#'}" <c:if test="${!empty properties['jcr:title']}"> title="${xss:attr(properties['jcr:title'])}" </c:if>> ${xss:text(properties['jcr:description'])}</a>
Still c
omplex
Sightly VS JSP
No automati
c sec
urity
![Page 14: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/14.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly
JSP – Custom Tag Libraries<%@include file="/libs/foundation/global.jsp"%><a href="<out:href property='link' default='#'/>" <c:if test="${!empty properties['jcr:title']}"> title="<out:attr property='jcr:title'/>" </c:if>> <out:text property='jcr:description'/></a> Man
y tag
s with
in tags
No automati
c sec
urity
Sightly VS JSP
![Page 15: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/15.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly
JSP – TagLibs for whole HTML elements<%@include file="/libs/foundation/global.jsp"%><my:link urlProperty="link" urlDefault="#" titleProperty="jcr:title"> <my:text property="jcr:description"/></my:link> W
hat does it
reall
y do?
Sightly VS JSP
![Page 16: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/16.jpg)
Adobe Experience Manager
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> ${properties.jcr:description}</a>
Sightly
Readab
le
Explici
t
Secu
re
Sightly FTW!
![Page 17: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/17.jpg)
Adobe Experience Manager
§ 1 Why Sightly § 2 Features § 3 Tooling
![Page 18: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/18.jpg)
Adobe Experience Manager
Building Blocks
Comments<!--/* This will disappear from the output */-->
Expression Language${properties.myProperty}
Block Statements<div data-sly-include="other-template.html"></div>
![Page 19: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/19.jpg)
Adobe Experience Manager
Expressions• Literals
• Variables
• Bindings
• Operators
• Options
• Contexts
![Page 20: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/20.jpg)
Adobe Experience Manager
ExpressionsTo avoid malformed HTML, expressions can only be used in attribute values, in element content, or in comments.<!-- ${component.path} --><a href="${properties.link}"> ${properties.jcr:description}</a>
For setting element or attribute names, see the element and attribute block statements.
Standard bindings are available (same variables as in JSP); see the list of available variables.
![Page 21: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/21.jpg)
Adobe Experience Manager
Literals (positive integers, booleans, strings, arrays) ${42}${true} ${false}${'Hello World'} ${"Hello World"}${[1, 2, 3]} ${[42, true, 'Hello World']}
Variables (and accessing object properties) ${myVar}${properties.propName}${properties.jcr:title}${properties['my property']}${properties[myVar]}
Expression Fundamentals
![Page 22: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/22.jpg)
Adobe Experience Manager
Most useful available variables
${properties}${pageProperties}${inheritedPageProperties}
${request} The Sling Request API${resource} The Sling Resource API${currentPage} The WCM Page API${currentDesign} The WCM Design API${component} The WCM Component API${wcmmode} The WCM Mode – use it like that: ${wcmmode.edit}
Expression Bindings
Properties of the resource, page or inherited from the page structure. Access properties with the dot notation: ${properties.foo}
To avoid complex expressions in templates, Sightly doesn’t support passing arguments. So only zero argument methods can be called from the template.
![Page 23: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/23.jpg)
Adobe Experience Manager
Logical operations (not, and, or) ${!myVar}${conditionOne || conditionTwo}${conditionOne && conditionTwo}
Equality / Inequality (only for same types) ${varOne == varTwo} ${varOne != varTwo}
Comparison (only for integers)${varOne < varTwo} ${varOne > varTwo}${varOne <= varTwo} ${varOne >= varTwo}
Expression Operators
![Page 24: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/24.jpg)
Adobe Experience Manager
Conditional${myChoice ? varOne : varTwo}
Grouping${varOne && (varTwo || varThree)}
Expression Operators
![Page 25: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/25.jpg)
Adobe Experience Manager
Options allow to manipulate the result of an expression, or to pass parameters to a block statement.
Everything after the @ are comma separated options${myVar @ optOne, optTwo}
Options can have a value (literals or variables) ${myVar @ optOne='value', optTwo=[1, 2, 3]}
Parametric expression (containing only options) ${@ optOne='value', optTwo=[1, 2, 3]}
Expression Options
![Page 26: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/26.jpg)
Adobe Experience Manager
String formatting${'Page {0} of {1}' @ format=[current, total]}
Internationalization${'Page' @ i18n}${'Page' @ i18n, hint='Translation Hint'}${'Page' @ i18n, locale='en-US'}
Array Join${['one', 'two'] @ join='; '}
Expression Options
![Page 27: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/27.jpg)
Adobe Experience Manager
The context option offers control over escaping and XSS protection.
Allowing some HTML markup (filtering out scripts) <div>${properties.jcr:description @ context='html'}</div>
Adding URI validation protection to other attributes than src or href <p data-link="${link @ context='uri'}">text</p>
Display Context Option
![Page 28: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/28.jpg)
Adobe Experience Manager
Most useful contexts and what they do: number XSSAPI.getValidNumber uri XSSAPI.getValidHref (default for src and href attributes) attribute XSSAPI.encodeForHTMLAttribute (default for other attributes) text XSSAPI.encodeForHTML (default for element content) scriptString XSSAPI.encodeForJSString styleString XSSAPI.encodeForCSSString html XSSAPI.filterHTML unsafe disables all protection, use at your own risk.
Display Context Option<a href="${myLink}" title="${myTitle}">${myContent}</a><script> var foo = "${myVar @ context='scriptString'}"; </string><style> a { font-family: "${myFont @ context='styleString'}"; } </style>
safer
![Page 29: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/29.jpg)
Adobe Experience Manager
Preferred method for each context: – src and href attributes: number, uri, attribute, unsafe
– other attributes: number, uri, attribute, unsafe
– element content: number, text, html, unsafe – JS scripts ⊛: number, uri, scriptString, unsafe – CSS styles ⊛: number, uri, styleString, unsafe⊛ An explicit context is required for script and style contexts. Don’t set the context manually unless you understand what you are doing.
Display Context Option<a href="${myLink}" title="${myTitle}">${myContent}</a><script> var foo = "${myVar @ context='scriptString'}"; </string><style> a { font-family: "${myFont @ context='styleString'}"; } </style>
![Page 30: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/30.jpg)
Adobe Experience Manager
Block Statements
• Markup Inclusion: Include, Resource
• Control Flow: Test, List, Template, Call
• Markup Modification: Unwrap, Element, Attribute, Text
• Object Initialization: Use
![Page 31: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/31.jpg)
Adobe Experience Manager
Block StatementsTo keep the markup valid, block statements are defined by data-sly-* attributes that can be added to any HTML element of the markup.
<input data-sly-STATEMENT="foo"/>
<div data-sly-STATEMENT.identifier="${bar}"> <p>Example</p></div>
Despite using data attributes, this is all executed on the server, and no data-sly-* attribute is sent to the client.
What follows the dot declares an identifier to control how the result of the statement gets exposed.
Block statements can have no value, a static value, or an expression.
![Page 32: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/32.jpg)
Adobe Experience Manager
Includes the rendering of the indicated template (Sightly, JSP, ESP, etc.)<section data-sly-include="other-template.html"></section>
Output:<section><!-- Result of the rendered script --></section>
Include Statement
![Page 33: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/33.jpg)
Adobe Experience Manager
Includes the result of the indicated resource.<article data-sly-resource="path/to/resource"></article>
Output:<article><!-- Result of the rendered resource --></article>
Resource Statement
![Page 34: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/34.jpg)
Adobe Experience Manager
Manipulating selectors (selectors, addSelectors, removeSelectors) <article data-sly-resource="${'path/to/resource' @ selectors='mobile'}"></article>
Overriding the resource type<article data-sly-resource="${'path/to/resource' @ resourceType='my/resource/type'}"></article>
Changing WCM mode<article data-sly-resource="${'path/to/resource' @ wcmmode='disabled'}"></article>
Resource Statement Options
![Page 35: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/35.jpg)
Adobe Experience Manager
Conditionally displays or removes the element and it's content. <p data-sly-test="${properties.showText}">text</p>
Output:<p>text</p> … or nothing
Test Statement
![Page 36: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/36.jpg)
Adobe Experience Manager
The identifier declares a variable that holds the result of the test statement.
Test Statement
=
The result of a test statement can be assigned to an identifier and reused; e.g. for something similar to an else statement.<p data-sly-test.show="${properties.showText}">text</p> <p data-sly-test="${!show}">No text</p>
Output:<p>text</p> … or nothing
![Page 37: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/37.jpg)
Adobe Experience Manager
Repeats the content for each enumerable item.<ol data-sly-list="${currentPage.listChildren}"> <li>${itemList.count}: ${item.title}</li> </ol>
Output:<ol> <li>1: Triangle Page</li> <li>2: Square Page</li></ol>
List Statement
itemList has following members: index: zero-based counter. count: one-based counter. first: true for the first item. middle: true when not first or last. last: true for the last item. odd: true if index is odd. even: true if index is even.
In that example, the item object is a Page object.
![Page 38: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/38.jpg)
Adobe Experience Manager
With the block statement dot notation, the item* variables can also be named explicitly, which can be useful for nested lists.<ol data-sly-list.child="${currentPage.listChildren}"> <li>${childList.count}: ${child.title}</li> </ol>
Output:<ol> <li>1: Triangle Page</li> <li>2: Square Page</li></ol>
List Statement
![Page 39: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/39.jpg)
Adobe Experience Manager
Declare and call a markup snippet with named parameters.<template data-sly-template.foo="${@ class, text}"> <span class="${class}">${text}</span></template>
<div data-sly-call="${foo @ class='example', text='Hi'}"></div>
Output:<div><span class="example">Hi</span></div>
Template & Call Statements
![Page 40: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/40.jpg)
Adobe Experience Manager
Declare and call a markup snippet with named parameters.<template data-sly-template.foo="${@ class, text}"> <span class="${class}">${text}</span></template>
<div data-sly-call="${foo @ class='example', text='Hi'}"></div>
Output:<div><span class="example">Hi</span></div>
Template & Call StatementsDefining template parametersDeclaring template name
Template content
Calling template by namePassing named parameters
![Page 41: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/41.jpg)
Adobe Experience Manager
Advanced example of a recursive site map with template, call and list.<ol data-sly-template.listChildren="${@ page}" data-sly-list="${page.listChildren}"> <li> <div class="title">${item.title}</div> <ol data-sly-call="${listChildren @ page=item}"></ol> </li></ol>
<ol data-sly-call="${listChildren @ page=currentPage}"></ol>
Template & Call Statements
![Page 42: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/42.jpg)
Adobe Experience Manager
Removes the host element while retaining its content.<div data-sly-test="${properties.showText}" data-sly-unwrap>text</div>
Output:text … or nothing
Use unwrap only when there’s no other way to write your template: prefer as much as possible to add statements on existing elements than to add elements for the sightly statements and removing them again with unwrap. This will help making the template look as close as possible to the generated output.
Unwrap Statement
![Page 43: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/43.jpg)
Adobe Experience Manager
Unwrap can also conditionally remove the outer element.<div class="editable" data-sly-unwrap="${!wcmmode.edit}"> text</div>
Output in edit mode:<div class="editable"> text</div>
Output on publish:text
Unwrap Statement
![Page 44: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/44.jpg)
Adobe Experience Manager
Changes the name of the current element.<h1 data-sly-element="${titleElement}">Title</h1>
Output:<h3>Title</h3>
There’s a whitelisted number of allowed elements that can be used. This security can be disabled with the @ context='unsafe' option.
Use element with care as it allows to define parts of the markup from the logic, which can lessen the separation of concerns.
Element Statement
![Page 45: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/45.jpg)
Adobe Experience Manager
Sets multiple attributes to the current element.<input data-sly-attribute="${keyValueMapOfAttributes}"/>
Output:<input type="text" name="firstName" value="Alison"/>
Use attribute with care as it allows to define parts of the markup from the logic, which can lessen the separation of concerns.
Attribute Statement
![Page 46: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/46.jpg)
Adobe Experience Manager
The attribute statement can be used with an identifier to indicate one single attribute to set/overwrite.<a href="#" data-sly-attribute.href="${link}">link</a>
Would have been equivalent to:<a href="${link}">link</a>
Output:<a href="link.html">link</a>
But the first example is valid HTML5, while second one fails the W3C HTML5 validation, because the expression is an invalid URL path.
Attribute Statement
![Page 47: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/47.jpg)
Adobe Experience Manager
Replaces the content of the element with the provided text.<div data-sly-text="${content}">Lorem ipsum</div>
Would have been equivalent to:<div>${content}</div>
Output:<div>Hello World</div>
The text statement can be interesting to “annotate” with behavior a static HTML that has been handed over by a designer, while keeping it visually unchanged when the file is opened in a browser.
Text Statement
![Page 48: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/48.jpg)
Adobe Experience Manager
Initializes a helper object.<div data-sly-use.logic="logic.js">${logic.hi}</div>
Output:<div>Hello World</div>
Use Statement
![Page 49: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/49.jpg)
Adobe Experience Manager
<!-- template.html --><div data-sly-use.logic="logic.js">${logic.hi}</div>
/* logic.js */use(function () { return { hi: "Hello World" };});
Like for the Sightly template, the objects available in the logic file are the same ones as in JSP with global.jsp
Server-side JavaScript logic
![Page 50: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/50.jpg)
Adobe Experience Manager
<!-- template.html --><div data-sly-use.logic="Logic">${logic.hi}</div>
/* Logic.java in component */package apps.my_site.components.my_component;import com.adobe.cq.sightly.WCMUse;
public class Logic extends WCMUse { private String hi;
@Override public void activate() throws Exception { hi = "Hello World"; }
public String getHi() { return hi; }}
Java
logi
cWhen the Java files are located in the content repository, next to the Sightly template, only the class name is needed.
POJO
ext
endi
ng W
CMU
se
![Page 51: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/51.jpg)
Adobe Experience Manager
<!-- template.html --><div data-sly-use.logic="com.foo.Logic">${logic.hi}</div>
/* Logic.java in OSGi bundle */package com.foo;import javax.annotation.PostConstruct;import org.apache.sling.api.resource.Resource;import org.apache.sling.models.annotations.Model;
@Model(adaptables = Resource.class)public class Logic { private String hi;
@PostConstruct protected void init() { hi = "Hello World"; }
public String getHi() { return hi; }}
Java
logi
cAd
apta
ble
with
Slin
gMod
els
When embedded in an OSGi bundle, the fully qualified Java class name is needed.
The Use-API accepts classes that are adaptable from Resource or Request.
![Page 52: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/52.jpg)
Adobe Experience Manager
Model logicThis logic is not tied to a template and is potentially reusable among components. It should aim to form a stable API that changes little, even in case of a full redesign.
➔ Java located in OSGi bundle
View logic This logic is specific to the templates and is likely to change if the design changes. It is thus a good practice to locate it in the content repository, next to the template.
➔ JavaScript located in component If components are to be maintained by front-end devs (typically with Brackets).
➔ Java located in componentIf performance is critical (e.g. when many requests are not cached by the dispatcher).
What kind of Use-API?
![Page 53: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/53.jpg)
Adobe Experience Manager
Start simple: first, no code!OSGi (Model)
ResourceAPI
PageAPI
Content Repository
Component (View)Content Structure
sling:resourceType
Resource Template
– Sling plays the role of the controller and resolves the sling:resourceType, deciding which component will render the accessed resource.
– The component plays the role of the view and it’s Sightly template builds the corresponding markup.
– The Resource and Page APIs play the role of the model, which are available from the template as variables.
![Page 54: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/54.jpg)
Adobe Experience Manager
Add logic only where needed– Model Logic is
needed only if the logic to access the data is different to what existing APIs provide.
– View Logic is needed only when the template needs additional data preparation.
OSGi (Model)
ResourceAPI
PageAPI
Model Logic
Content Repository
Component (View)Content Structure
sling:resourceType data-sly-use
Resource Template View Logic
![Page 55: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/55.jpg)
Adobe Experience Manager
The logic can access the same variables than exist in the template.
JavaScript: var title = properties.get('title');
Java extending WCMUse:String title = getProperties().get("title", String.class);
Java with SlingModels:@Inject @Optionalprivate String title;
Use-API Bindings
![Page 56: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/56.jpg)
Adobe Experience Manager
With the same notation as for template parameters, named parameters can be passed to the Use-API.<a data-sly-use.ext="${'Externalize' @ path='page.html'}" href="${ext.absolutePath}">link</a>
Output:<a href="/absolute/path/to/page.html">link</a>
Don’t pass variables that are part of the global binding (like properties or resource) as they can be accessed from the logic too.
Use-API Parameters
![Page 57: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/57.jpg)
Adobe Experience Manager
These parameters can then be read in from the various Use-API.
JavaScript: var path = this.path;
Java extending WCMUse:String path = get("path", String.class);
Java with SlingModels (works only when adapting from Request):@Inject @Optionalprivate String path;
Use-API Parameters
![Page 58: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/58.jpg)
Adobe Experience Manager
The use statement can also load data-sly-template markup snippets located in other files.<!-- library.html --><template data-sly-template.foo="${@ text}"> <span class="example">${text}</span></template>
<!-- template.html --><div data-sly-use.library="library.html" data-sly-call="${library.foo @ text='Hi'}"></div>
Output:<div><span class="example">Hi</span></div>
Use with Template & Call
![Page 59: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/59.jpg)
Adobe Experience Manager
Sightly Don’ts
• Don’t use the option context="unsafe", unless there’s no other choice. When doing so, carefully assess the consequences.
• Don’t use data-sly-unwrap if there’s another HTML element on which you can put the Sightly instructions.
• Avoid to use data-sly-element and data-sly-attribute in a way that makes the logic define parts of the generated markup.
![Page 60: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/60.jpg)
Adobe Experience Manager
Sightly FAQWhat does Sightly enable that isn’t possible with JSP? – Systematic state-of-the-art protection against cross-site scripting injection. – Possibility for front-end developers to easily participate on AEM projects. – Strictly enforced separation of concern, yet with flexible binding for logic. – Tailored to the Sling use-case.
Should JSPs be refactored to Sightly? Refactoring can be expensive, which goes against the goal of Sightly to increase development efficiency. If the quality of existing JSPs is sufficient, it is rather advised to use Sightly for newly built/improved components.
Will JSP go away? As of today, there are no plans for that.
![Page 61: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/61.jpg)
Adobe Experience Manager
§ 1 Why Sightly § 2 Features § 3 Tooling
![Page 62: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/62.jpg)
Adobe Experience Manager
• Improve learning curve and efficiency of developers
• An IDE plugin for each developer role
Brackets plugin for the Front-End developershttp://docs.adobe.com/docs/en/dev-tools/sightly-brackets.html
Eclipse pluginfor the Java developershttp://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
IDE & Developer Mode
![Page 63: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/63.jpg)
Adobe Experience Manager
IDE Sync
Version Control System (Git / Svn) File System
Content Repository
Work on file system + transparent sync & content editing
sync
manual pull
Brackets / Eclipse IDE
auto push
IDE works onthe File System
![Page 64: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/64.jpg)
Adobe Experience Manager
Thank you!Sightly – Documentation – Specification – Sightly AEM Page Example (requires instance on localhost:4502) – TodoMVC Example
Tools – Live Sightly execution environment – Sightly Brackets extension – AEM Developer Tools for Eclipse – AEM Developer Mode
![Page 65: Sightly Component Development in AEM](https://reader031.vdocument.in/reader031/viewer/2022012307/554bbb6ab4c9053a298b4d54/html5/thumbnails/65.jpg)