Sunteți pe pagina 1din 29
Deep Dive into Sightly, 
 an open source templating language @GabrielWalt , Product Manager Adobe
Deep Dive into Sightly, 
 an open source templating language @GabrielWalt , Product Manager Adobe
Deep Dive into Sightly, 
 an open source templating language @GabrielWalt , Product Manager Adobe

Deep Dive into Sightly, an open source templating language

@GabrielWalt, Product Manager

Adobe Experience Manager

Deep Dive into Sightly, 
 an open source templating language @GabrielWalt , Product Manager Adobe Experience
Deep Dive into Sightly, 
 an open source templating language @GabrielWalt , Product Manager Adobe Experience
Speci f cation and TCK open sourced to GitHub . 
 Reference implementation donated to

Specifcation and TCK open sourced to GitHub. Reference implementation donated to Apache Sling.

Follow @sightlyio on Twiter.

Apache Sling . Follow @si g htlyio on Twi t er. 
 h t
Apache Sling . Follow @si g htlyio on Twi t er. 
 h t
@si g htlyio on Twi t er. 
 h t p://docs.adobe.com/docs/en/aem/6-2/develop/sightly.html Adobe Experience Manager

Adobe Experience Manager

§ 1 Expression contexts 2 Passing data to client libs 3 Use statement § 4

§ 1 Expression contexts 2 Passing data to client libs 3 Use statement

§ 4 Template & Call statements

§ 5 Parameters for sub-resources

§

§

libs 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources §

Adobe Experience Manager

libs 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources §
libs 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources §
Display Context Option T e context option o ff ers control over escaping and XSS

Display Context Option

Display Context Option T e context option o ff ers control over escaping and XSS protection.
Display Context Option T e context option o ff ers control over escaping and XSS protection.

Te context option oers control over escaping and XSS protection.

Allowing some HTML markup (fltering out scripts)

<div>${properties.jcr:description @ context='html'}</div>

Adding URI validation protection to other atributes than src or href

<p data-link="${link @ context='uri'}">text</p>


 <p data-link = " ${ link @ context = 'uri' } " > text </p>

Adobe Experience Manager

Display Context Option <a href = " ${ myLink } " title = " ${

Display Context Option

Display Context Option <a href = " ${ myLink } " title = " ${ myTitle
Display Context Option <a href = " ${ myLink } " title = " ${ myTitle

<a href="${myLink}" title="${myTitle}">${myContent}</a> <script> var foo = "${myVar @ context='scriptString'}"; </string> <style> a { font-family: "${myFont @ context='styleString'}"; } </style>

= 'styleString' } " ; } </style> Most useful contexts and what they do: number uri
= 'styleString' } " ; } </style> Most useful contexts and what they do: number uri

Most useful contexts and what they do:

number

uri

attribute

text

XSSAPI.getValidNumber XSSAPI.getValidHref (default for src and href atributes) XSSAPI.encodeForHTMLAttribute (default for other atributes)

XSSAPI.encodeForHTML (default for element content)

scriptString XSSAPI.encodeForJSString

styleString

html

unsafe

XSSAPI.encodeForCSSString

XSSAPI.filterHTML

disables all protection, use at your own risk.

Adobe Experience Manager

Display Context Option <a href = " ${ myLink } " title = " ${

Display Context Option

Display Context Option <a href = " ${ myLink } " title = " ${ myTitle
Display Context Option <a href = " ${ myLink } " title = " ${ myTitle

<a href="${myLink}" title="${myTitle}">${myContent}</a> <script> var foo = "${myVar @ context='scriptString'}"; </string> <style> a { font-family: "${myFont @ context='styleString'}"; } </style>

Preferred method for each context:

src and href atributes: number, uri, attribute, unsafe

other atributes: number, uri, attribute, unsafe

element content:

JS scripts :

CSS styles :

number, text, html, unsafe number, uri, scriptString, unsafe

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.

style contexts. 
 Don’t set the context manually unless you understand what you are doing. Adobe

Adobe Experience Manager

§
§
§ 1 Expression contexts § 2 Passing data to client libs § 3 Use statement §
§ 1 Expression contexts § 2 Passing data to client libs § 3 Use statement §

1 Expression contexts

§ 2 Passing data to client libs

§ 3 Use statement

§ 4 Template & Call statements

§ 5 Parameters for sub-resources

libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources

Adobe Experience Manager

Passing data to client libs <!-- template.html --> 
 <div data-sly-use.logic = "logic.js" 


Passing data to client libs

<!-- template.html --><div data-sly-use.logic="logic.js" data-json="${logic.json}"></div>

data-json = " ${ logic.json } " ></div> /* logic.js */ 
 use( function () {
data-json = " ${ logic.json } " ></div> /* logic.js */ 
 use( function () {

/* logic.js */ use(function () { return { json: JSON.stringify({ foo: "bar",arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

, 
 arr : [ 1 , 2 , 3 , 4 , 5 , 6

});

};

Adobe Experience Manager

})

Server-side JavaScript logic <!-- template.html --> 
 <script id = "my-handlebar-template" 


Server-side JavaScript logic

<!-- template.html --><script id="my-handlebar-template" type="text/x-handlebars-template"data-sly-include="handlebar.html"></script>

<!-- handlebar.html --><p>${properties.jcr:title}</p>

<!-- handlebar.html --> 
 <p> ${ properties.jcr:title } </p> Adobe Experience Manager

Adobe Experience Manager

<!-- handlebar.html --> 
 <p> ${ properties.jcr:title } </p> Adobe Experience Manager
<!-- handlebar.html --> 
 <p> ${ properties.jcr:title } </p> Adobe Experience Manager
Passing data to client libraries h t p://bit.ly/sightly-data-json h t p://bit.ly/sightly-script-angular Adobe

Passing data to client libraries

to client libraries h t p://bit.ly/sightly-data-json h t p://bit.ly/sightly-script-angular Adobe Experience Manager

Adobe Experience Manager

to client libraries h t p://bit.ly/sightly-data-json h t p://bit.ly/sightly-script-angular Adobe Experience Manager
to client libraries h t p://bit.ly/sightly-data-json h t p://bit.ly/sightly-script-angular Adobe Experience Manager
§
§
§ 1 Expression contexts § 2 Passing data to client libs § 3 Use statement §
§ 1 Expression contexts § 2 Passing data to client libs § 3 Use statement §

1 Expression contexts

§ 2 Passing data to client libs § 3 Use statement

§ 4 Template & Call statements

§ 5 Parameters for sub-resources

libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources

Adobe Experience Manager

Use Statement Initializes a helper object. 
 <div data-sly-use.logic = "logic.js" > ${ logic.hi }

Use Statement

Use Statement Initializes a helper object. 
 <div data-sly-use.logic = "logic.js" > ${ logic.hi }
Use Statement Initializes a helper object. 
 <div data-sly-use.logic = "logic.js" > ${ logic.hi }

Initializes a helper object.

<div data-sly-use.logic="logic.js">${logic.hi}</div>

Output:

<div>Hello World</div>

> ${ logic.hi } </div> Output: 
 <div> Hello World </div> Adobe Experience Manager

Adobe Experience Manager

Server-side JavaScript logic <!-- template.html --> 
 <div data-sly-use.logic = "logic.js" >

Server-side JavaScript logic

<!-- template.html --><div data-sly-use.logic="logic.js">${logic.hi}</div>

/* logic.js */ use(function () { return { hi: "Hello World"

});

};

return { 
 hi: "Hello World" 
 }); }; 
 Like for the Sightly template, the
return { 
 hi: "Hello World" 
 }); }; 
 Like for the Sightly template, the

Like for the Sightly template, the objects available in the logic fle are the same ones as in JSP with global.jsp

template, the objects available in the logic f le are the same ones as in JSP

Adobe Experience Manager

<!-- template.html --> 
 <div data-sly-use.logic = "Logic" > ${ logic.hi } </div> When

<!-- template.html --><div data-sly-use.logic="Logic">${logic.hi}</div>

= "Logic" > ${ logic.hi } </div> When the Java f les are located in the
= "Logic" > ${ logic.hi } </div> When the Java f les are located in the
= "Logic" > ${ logic.hi } </div> When the Java f les are located in the

When the Java fles are located in the content repository, next to the Sightly template, only the class name is needed.

/* Logic.java in component */package apps.my_site.components.my_component;import org.sling…sightly.WCMUsePojo;

public class Logic extends WCMUsePojo { private String hi;

@Override public void activate() throws Exception { hi = "Hello World";

}

public String getHi() { return hi;

}

}


 hi = "Hello World" ; 
 } public String getHi() { 
 return hi; 


Adobe Experience Manager

<!-- template.html --> 
 <div data-sly-use.logic = "com.foo.Logic" > ${ logic.hi }

<!-- template.html --><div data-sly-use.logic="com.foo.Logic">${logic.hi}</div>

= "com.foo.Logic" > ${ logic.hi } </div> /* Logic.java in OSGi bundle */ 
 package com.foo;

/* 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;


 import org.apache.sling.models.annotations.Model; When embedded in 
 an OSGi bundle, the fully quali f ed

 import org.apache.sling.models.annotations.Model; When embedded in 
 an OSGi bundle, the fully quali f ed

When embedded in an OSGi bundle, the fully qualifed Java class name is needed.

@Model(adaptables = Resource.class)public class Logic { private String hi;

@PostConstruct protected void init() { hi = "Hello World";

Te Use-API accepts classes that are adaptable from Resource or Request.

accepts classes that are adaptable from Resource or Request. } public String getHi() { 
 return

}

public String getHi() {return hi;

}

are adaptable from Resource or Request. } public String getHi() { 
 return hi; 
 }

}

Adobe Experience Manager

What kind of Use-API? Model logic 
 T is logic is not tied to a

What kind of Use-API?

Model logic

What kind of Use-API? Model logic 
 T is logic is not tied to a template
What kind of Use-API? Model logic 
 T is logic is not tied to a template

Tis logic is not tied to a template and is potentially reusable among components. It should aim to form a stable API that changes litle, even in case of a full redesign.

Java located in OSGi bundle

View logic

Tis logic is specifc 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 component

If performance is critical (e.g. when many requests are not cached by the dispatcher).


 If performance is critical (e.g. when many requests are not cached by the dispatcher). Adobe

Adobe Experience Manager

Start simple: f rst, no code! OSGi (Model) Resource API Page API Resource sling: resourceType
Start simple: f rst, no code! OSGi (Model) Resource API Page API Resource sling: resourceType

Start simple: frst, no code!

Start simple: f rst, no code! OSGi (Model) Resource API Page API Resource sling: resourceType

OSGi (Model)

Resource

API

OSGi (Model) Resource API Page API

Page

API

OSGi (Model) Resource API Page API
Resource sling: resourceType Content Structure Content Repository Template Component (View)
Resource sling: resourceType Content Structure Content Repository Template Component (View)
Resource sling: resourceType Content Structure Content Repository Template Component (View)
Resource sling: resourceType Content Structure Content Repository Template Component (View)
Resource

Resource

sling:

resourceType

Resource sling: resourceType Content Structure Content Repository

Content Structure

Content Repository

Resource sling: resourceType Content Structure Content Repository Template Component (View)
Resource sling: resourceType Content Structure Content Repository Template Component (View)

Template

Component (View)

Sling plays the role of the controller and resolves the sling:resourceType, deciding which component will render the accessed resource.

Te component plays the role of the view and it’s Sightly template builds the corresponding markup.

Te Resource and Page APIs play the role of the model, which are available from the template as variables.

and Page APIs play the role of the model , which are available from the template

Adobe Experience Manager

Add logic only where needed Resource API OSGi (Model) Page API Model Logic Resource sling:
Add logic only where needed Resource API OSGi (Model) Page API Model Logic Resource sling:

Add logic only where needed

Add logic only where needed Resource API OSGi (Model) Page API Model Logic Resource sling:

Resource

API

Resource API OSGi (Model) Page API Model Logic

OSGi (Model)

Page

API

Resource API OSGi (Model) Page API Model Logic

Model Logic

Resource API OSGi (Model) Page API Model Logic
Resource sling: resourceType Content Structure Component (View) Content Repository View Logic
Resource sling: resourceType Content Structure Component (View) Content Repository View Logic
Resource sling: resourceType Content Structure Component (View) Content Repository View Logic
Resource sling: resourceType Content Structure Component (View) Content Repository View Logic
Resource
Resource

sling:

resourceType

Resource sling: resourceType Content Structure Component (View) Content Repository

Content Structure

Resource sling: resourceType Content Structure Component (View) Content Repository

Component (View)

Content Repository

Resource sling: resourceType Content Structure Component (View) Content Repository View Logic
Resource sling: resourceType Content Structure Component (View) Content Repository View Logic

View Logic

Template

Template data-sly-use

data-sly-use

Template data-sly-use

Model Logic is needed only if the logic to access the data is dierent to what existing APIs provide.

View Logic is needed only when the template needs additional data preparation.

provide. – View Logic is needed only when the template needs additional data preparation. Adobe Experience

Adobe Experience Manager

Use-API Bindings T e logic can access the same variables than exist in the template.

Use-API Bindings

Use-API Bindings T e logic can access the same variables than exist in the template. JavaScript:
Use-API Bindings T e logic can access the same variables than exist in the template. JavaScript:

Te 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 @Optional private String title;

, String .class); Java with SlingModels: 
 @Inject @Optional 
 private String title; Adobe Experience Manager

Adobe Experience Manager

Use-API Parameters With the same notation as for template parameters, named parameters can be passed

Use-API Parameters

Use-API Parameters With the same notation as for template parameters, named parameters can be passed to
Use-API Parameters With the same notation as for template parameters, named parameters can be passed to

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.

the global binding (like properties or resource ) as they can be accessed from the logic

Adobe Experience Manager

Use-API Parameters T ese parameters can then be read in from the various Use-API. JavaScript:

Use-API Parameters

Use-API Parameters T ese parameters can then be read in from the various Use-API. JavaScript: 

Use-API Parameters T ese parameters can then be read in from the various Use-API. JavaScript: 


Tese 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);


 String path = get( "path" , String .class); Java with SlingModels (works only when adapting

Java with SlingModels (works only when adapting from Request):

@Inject @Optional private String path;

Adobe Experience Manager

Use with Template & Call T e use statement can also load data-sly-template markup snippets

Use with Template & Call

Use with Template & Call T e use statement can also load data-sly-template markup snippets located
Use with Template & Call T e use statement can also load data-sly-template markup snippets located

Te use statement can also load data-sly-template markup snippets located in other fles.

<!-- 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>


 <div><span class = "example" > Hi </span></div> Adobe Experience Manager

Adobe Experience Manager

§ 1 Expression contexts § 2 Passing data to client libs § 3 Use statement

§ 1 Expression contexts
§ 2 Passing data to client libs
§ 3 Use statement

§ 4 Template & Call statements § 5 Parameters for sub-resources

libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources

Adobe Experience Manager

libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources
libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources
Template & Call Statements Declaring template name De f ning template parameters Declare and call
Template & Call Statements Declaring template name De f ning template parameters Declare and call
Template & Call Statements Declaring template name De f ning template parameters Declare and call

Template & Call Statements

Declaring template name

Template & Call Statements Declaring template name De f ning template parameters Declare and call a

Defning template parameters

Declaring template name De f ning template parameters Declare and call a markup snippet with named

Declare and call a markup snippet with named parameters.

<template data-sly-template.foo="${@ class, text}"> <span class="${class}">${text}</span>

</template>

> ${ text } </span> 
 </template> Template content <div data-sly-call = " ${ foo @
> ${ text } </span> 
 </template> Template content <div data-sly-call = " ${ foo @

Template content

<div data-sly-call="${foo @

Template content <div data-sly-call = " ${ foo @ Calling template by name Output: 
 class

Calling template by name

Output:

class='example',

text='Hi'}"></div>
text='Hi'}"></div>

Passing named parameters

<div><span class="example">Hi</span></div>

<div><span class = "example" > Hi </span></div> Adobe Experience Manager

Adobe Experience Manager

Template & Call Statements Advanced example of a recursive site map with template, call and

Template & Call Statements

Advanced example of a recursive site map with template, call and list.

of a recursive site map with template, call and list. 
 <ol data-sly-template.listChildren = " ${@
of a recursive site map with template, call and list. 
 <ol data-sly-template.listChildren = " ${@

<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>

<ol data-sly-call = " ${ listChildren @ page = currentPage } " ></ol> Adobe Experience Manager

Adobe Experience Manager

§ 1 Expression contexts § 2 Passing data to client libs § 3 Use statement

§ 1 Expression contexts
§ 2 Passing data to client libs
§ 3 Use statement

§ 4 Template & Call statements

§ 5 Parameters for sub-resources

libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources

Adobe Experience Manager

libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources
libs § 3 Use statement § 4 Template & Call statements § 5 Parameters for sub-resources
Parameters for sub-resources h t p://bit.ly/sightly-a t ributes h t p://bit.ly/sightly-synthetic Adobe Experience

Parameters for sub-resources

for sub-resources h t p://bit.ly/sightly-a t ributes h t p://bit.ly/sightly-synthetic Adobe Experience Manager

Adobe Experience Manager

for sub-resources h t p://bit.ly/sightly-a t ributes h t p://bit.ly/sightly-synthetic Adobe Experience Manager
for sub-resources h t p://bit.ly/sightly-a t ributes h t p://bit.ly/sightly-synthetic Adobe Experience Manager
T ank you! @GabrielWalt , Product Manager • Documentation 
 h t

Tank you!

@GabrielWalt, Product Manager

Documentation

REPL (Read-Eval-Print Loop) live Sightly execution environmenthtps://github.com/Adobe-Marketing-Cloud/aem-sightly-repl

execution environment 
 h t ps://github.com/Adobe-Marketing-Cloud/aem-sightly-repl 
 Adobe Experience Manager

Adobe Experience Manager

execution environment 
 h t ps://github.com/Adobe-Marketing-Cloud/aem-sightly-repl 
 Adobe Experience Manager
execution environment 
 h t ps://github.com/Adobe-Marketing-Cloud/aem-sightly-repl 
 Adobe Experience Manager