Here are some tips of using Sightly in AEM6
Passing arguments
- To avoid comlex expressions inside emplates, Sightly does not allow passing arguments to functional call. Only zero argument calls are allowed from templates
- Java Use-API doesn’t support passing parameters to the getter method You may pass parameters once, during the Use class initialization. Take a look on this example inspired by the Sightly documentation
<!– info.html –>
< div data-sly-use.info=”${‘Info’ @ text=’Some text’}” >
< p>${info.reversed}< /p>
< /div>// Info.java
public class Info extends WCMUse {private String reversed;
@Override
public void activate() throws Exception {
String text = get(“text”, String.class);
reversed = new StringBuilder(text).reverse().toString();
}public String getReversed() {
return reversed;
}
}
Make page to be authorable
Put < div data-sly-include=”/libs/wcm/core/components/init/init.jsp”>< /div> in header
Loading Client Libraries
The client libraries helper template library (/libs/granite/sightly/templates/clientlib.html) can be loaded through data-sly-use and stored in a clientLib block element variable. Loading the library’s CSS style sheets and JavaScript is done through data-sly-call. The clientLib template library exposes three templates:
- css – loads only the CSS files of the referenced client libraries
- js – loads only the JavaScript files of the referenced client libraries
- all – loads all the files of the referenced client libraries
Each helper template defines a categories option that accepts either an array of string values or a string containing a comma separated values list for referencing the desired client libraries. Example:
Referencing client libraries components in different sections of a page
< head data-sly-use.clientLib=”${‘/libs/granite/sightly/templates/clientlib.html’}” >
< css data-sly-call=”${clientLib.css @ categories=[‘category1’, ‘category2’]}” data-sly-unwrap/ >
< /head>
< body>
< !– content — >
< js data-sly-call=”${clientLib.js @ categories=[‘category1’, ‘category2’]}” data-sly-unwrap/ >
< /body>Referencing client libraries in the <head> tag of a page
< head data-sly-use.clientLib=”${‘/libs/granite/sightly/templates/clientlib.html’}”>
< clientlib data-sly-call=”${clientLib.all @ categories=[‘category1’, ‘category2’]}” data-sly-unwrap / >
< /head>
Pass params between htmls via data-sly-template and data-sly-call
renderer.html: this page has html template blocks
< div data-sly-use.lib=”renderer.html” data-sly-unwrap data-sly-call=”${lib.simpleTextRenderer @ foods=[‘Coffee’,’Tea’,’Milk’,’Rice’,’Other’]}”>< /div>sightly-cmponent.html
< div data-sly-template.simpleTextRenderer=”${@ foods}”>
< ul data-sly-list.food=”${foods}” class=”simple-list”>
< li>${food}< /li>
< /ul>
< /div>
5. Great resrouces
- Great tool to learn Sightly: Access /content/repl.html after the package is installed.
- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md#22101-template
- http://aemtuts.com/aem-sightly-quick-reference
- http://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-java.html
AEM Treasury 