Available Block Statements in Sightly :
Sightly Block statements are custom data attributes added directly to existing HTML element and converting it to a functional dynamic template without breaking the quality of the HTML code.
To know more about useful tools and plugins to learn Sightly , read its previous article
Sightly Beautiful Markup
Sightly Beautiful Markup
1.Use - data-sly-use :
It is used to initialize a helper object (defined in Javascript or Java class) and exposes it through a identifier.
Examples for data-sly-use :
We define a component ,sample , located at
/apps/my-project/components/sample
Javascript Logic
It contains JS logic file and sightly component html file located at
/apps/my-project/components/sample/sample.js
/apps/my-project/components/sample/sample.html
use(function(){
return{
text:"Hello Sightly"
};
});
${sample.text}
Hello Sightly
Java Class LogicIt contains Java file located at
/apps/my-project/components/sample/sample.java
/apps/my-project/components/sample/sample.html
package apps.my_project.components.sample;
import com.adobe.cq.sightly.WCMUse;
public class Sample extends WCMUse {
private String text;
@Override
public void activate() throws Exception {
text="Hello Sightly";
}
public String getText() {
return text;
}
}
${sample.text}
Hello Sightly
Initialize a Java class, where that class is installed as part of an OSGi bundle then its fully-qualified class name must be used:<div data-sly-use.sample="com.myproject.Sample">${sample.text}</div>
Parameters can be passed to the Use-API by using expresion options :
Scope of the data-sly-use identifier(here sample) is used anywhere after its declaration
The Use statement can also be used to load external templates. We can see this briefly in data-sly-templates.${sample.text}${sample.text}Hello SightlyHello Sightly
2. Text - data-sly-text
i.It is used to replaces the content of its host element with the specified text
ii.Its element(Ex : <div></div>) is always shown.
iii.Its element's content(Ex: <div>This is element's content</div>) is replaced with its evaluated result and there is no identifier.
iv.The content of the data-sly-text attribute is automatically XSS-protected with the text context.
Example :
sample.html : <div data-sly-text=${currentPage.title}>This is sample content</div>
output : <div>Available Block Statements</div><!--/* It replaces content with currentpage title */-->
And it is not treated specially if it has false or empty variables like
<p data-sly-text="${''}"></p> <!--/* outputs: */--> <p></p> <p data-sly-text="${[]}"></p> <!--/* outputs: */--> <p></p> <p data-sly-text="${0}"></p> <!--/* outputs: */--> <p>0</p> <p data-sly-text="${false}"></p> <!--/* outputs: */--> <p>false</p>
3. Element - data-sly-element
i.It is used to replaces the element's tag name
ii.Always shown Content of the host element but replaced element's tag name
iii.To consider safety reasons, data-sly-element accepts only the below element names:
a abbr address article aside b bdi bdo blockquote br caption cite code col colgroup data dd del dfn div dl dt em figcaption figure footer h1 h2 h3 h4 h5 h6 header i ins kbd li main mark nav ol p pre q rp rt ruby s samp section small span strong sub sup table tbody td tfoot th thead time tr u var wbr |
Example :
<div data-sly-element="h1">This is Content</div> <!--/* outputs: */--> <h1>This is content</h1> |
i.It is used to hide its HTML element and show only its content.
ii.If we need HTML elements only on Sightly presentation logic but doesn't need to display in output then we would use this block statement.
Example :
ExamTem.htmlTo know more about Template & calls, click AdobeAEMClubTemplates supports Recursion : ExamRec.html${title}
