1. What is Sightly?
- Sightly is a templating language and runtime introduced in Adobe Experience Manager (AEM) 6.0. It provides a simpler and more secure way to develop components and templates by separating the markup (HTML) from the logic (Java) using a syntax that closely resembles HTML5.
2. How does Sightly differ from JSP in AEM?
- Sightly differs from JSP (JavaServer Pages) in several ways:
- Syntax: Sightly uses an HTML-like syntax, while JSP uses a mix of Java and HTML.
- Separation of concerns: Sightly enforces a clear separation of markup and logic, making the code more maintainable. In JSP, the logic is embedded within the markup.
- XSS protection: Sightly provides automatic output escaping, which reduces the risk of cross-site scripting (XSS) attacks. In JSP, developers need to manually escape output.
- Strictness: Sightly enforces a stricter template structure and syntax, ensuring cleaner code and better performance. JSP is more flexible but can lead to less readable and optimized code.
3. How do you define a Sightly component in AEM?
- In AEM, a Sightly component is defined by creating a file with a `.html` extension under the component's folder structure. This file contains the Sightly template, which consists of HTML markup enhanced with Sightly's data-sly-* attributes for adding logic and data manipulation.
4. What is the purpose of the Sightly data-sly-* attributes?
- The Sightly data-sly-* attributes provide a way to embed logic and expressions within the Sightly templates. They allow you to perform actions such as iterating over collections, conditionally rendering content, setting variables, including templates, and accessing component properties.
5. How do you include Sightly templates within other Sightly templates?
- To include Sightly templates within other Sightly templates, you can use the `data-sly-include` attribute. By specifying the path to the template as the attribute value, the content of the included template will be rendered at that location.
6. How do you iterate over a collection using Sightly?
- To iterate over a collection using Sightly, you can use the `data-sly-list` attribute. This attribute takes a collection and allows you to define a loop that iterates over each item in the collection, rendering the desired content for each iteration.
7. How can you conditionally display content in Sightly?
- Sightly provides the `data-sly-test` attribute to conditionally display content. You can specify an expression as the attribute value, and the content within the element will only be rendered if the expression evaluates to true.
8. How do you use variables in Sightly?
- Sightly allows you to declare and use variables using the `data-sly-use` and `data-sly-attribute` attributes. The `data-sly-use` attribute is used to create a variable and bind it to a Java object, while the `data-sly-attribute` attribute is used to assign a value to a variable.
9. What is the purpose of the Sightly Use API?
- The Sightly Use API allows you to define Java classes that encapsulate the logic and data for a Sightly component. By implementing the Use API, you can bind Sightly templates to specific Java objects and perform complex logic and data operations within the Sightly component.
10. What are the best practices for writing efficient Sightly code?
- Some best practices for writing efficient Sightly code include:
- Minimize logic in templates: Move complex logic to Java classes or services.
- Use data-sly-resource sparingly: Overuse of `data-sly-resource` can impact performance. Use it judiciously.
- Leverage caching: Utilize AEM's caching mechanisms to improve performance.
- Optimize loops: Avoid unnecessary iterations and keep loops as efficient as possible.
- Use appropriate output options: Utilize the appropriate output options, such as `text`, `html`, or `attribute`, depending on the context of the output.
11. Provide an example of using the data-sly-template attribute in Sightly
Suppose you have a Sightly template that displays a list of products. You want to reuse this template to display different sets of products in different parts of your application. You can achieve this using the `data-sly-template` attribute.
1. Define the template:
```html
<!-- Template: product-list.html -->
<div data-sly-template.productList="${products}">
<h2>${title}</h2>
<ul>
<!-- Iterate over the products -->
<li data-sly-repeat="${productList}">
<h3>${item.name}</h3>
<p>${item.description}</p>
</li>
</ul>
</div>
```
In the above example, we define a template with the name `productList` and a parameter `${products}`. It displays the title and iterates over the `products` list to display each product's name and description.
2. Use the template:
```html
<!-- Usage: home.html -->
<div data-sly-use.productsModel="com.example.ProductsModel">
<!-- Call the template and pass the products parameter -->
<div data-sly-call="${productList @ products=productsModel.getFeaturedProducts(), title='Featured Products'}"></div>
</div>
```
In the usage example, we use the `data-sly-use` attribute to bind a Java object (`com.example.ProductsModel`) to the variable `productsModel`. Then, we call the `productList` template using `data-sly-call`. Here, we pass the `products` parameter by invoking the `getFeaturedProducts()` method from the `productsModel` object. Additionally, we set the `title` parameter to "Featured Products". The template will be called with the provided parameters, rendering the list of featured products with the specified title.
By using `data-sly-template` and `data-sly-call`, you can reuse templates across different parts of your application and dynamically pass parameters to customize the output. This allows for more modular and flexible development in AEM Sightly.
12. What's the difference between data-sly-repeat and data-sly-list with example
In Sightly, both `data-sly-repeat` and `data-sly-list` are used to iterate over a collection. However, there are subtle differences between the two:
1. `data-sly-repeat`:
- `data-sly-repeat` is used when you want to repeat a block of code for each item in a collection.
- It requires an iterable object or a JavaScript array.
- It creates a new scope for each iteration, allowing you to access properties specific to each item.
- It provides the `index` variable, which represents the current iteration index.
- Example:
```html
<ul>
<li data-sly-repeat="${items}">
<!-- Access properties of each item -->
${item.name}
</li>
</ul>
```
2. `data-sly-list`:
- `data-sly-list` is used when you want to generate a string by concatenating values from a collection.
- It requires an iterable object or a JavaScript array.
- It does not create a new scope for each iteration, so you cannot directly access properties of each item.
- It provides the `itemList` variable, which represents the joined string of values.
- Example:
```html
<p>
<!-- Concatenate values from each item -->
The list of items: ${itemList}
</p>
```
Here's a more detailed example to illustrate the difference:
```html
<!-- Template: collection.html -->
<ul>
<li data-sly-repeat="${items}">
<!-- Using data-sly-repeat -->
<h3>${item.name}</h3>
<p>${item.description}</p>
</li>
</ul>
<p>
<!-- Using data-sly-list -->
The list of items: ${itemList}
</p>
```
```html
<!-- Usage: home.html -->
<div data-sly-use.itemsModel="com.example.ItemsModel">
<!-- Call the template with a collection of items -->
<div data-sly-call="${collection @ items=itemsModel.getItems()}"></div>
</div>
```
In the above example, we have a template called `collection.html` that defines both `data-sly-repeat` and `data-sly-list`. When we call this template in `home.html`, we pass a collection of items using `itemsModel.getItems()`.
- The `data-sly-repeat` section iterates over the `items` collection and displays each item's name and description within `<li>` tags.
- The `data-sly-list` section concatenates the values from each item into a string, which will be displayed in a `<p>` tag.
By understanding the differences between `data-sly-repeat` and `data-sly-list`, you can choose the appropriate attribute based on your specific requirements.
These answers should provide you with a good understanding of AEM Sightly.
