Daily Archives: November 12, 2015

Standard

Posted by

Posted on

November 12, 2015

Posted under

Cheat Sheet, How to

Comments

Leave a comment

Tips of using Sightly in AEM6

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