Sling Models in sightly

Its very easy to fetch values from sling model classes in sightly. Here is the sample example how we can bind the sling and sightly for multicomposite values.

Above is the content screen shot for the multicomposite header menu

Tab will store the properties as label and link. These values are fetched easily using sling model

Sling Model Class:

package com.shoppingcart.models;

import javax.inject.Inject;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;

@Model(adaptables=Resource.class)
public class Header {

@Inject
public Resource multiComp;


}

Sightly Code:

<div class="top-menu" data-sly-use.headerMenu="${'com.shoppingcart.models.Header'}">
<ul data-sly-list=${headerMenu.multiComp.listChildren}>
<li href="${item.link}"> ${item.label}</li>
</ul>

</div>

Sightly WCMUse Class

Having question in mind ??

How can we link our sightly component file with Java Class ?

Here we go ... Follow the steps below

1. Create a sightly component

Above screenshot is the sample headermenu component which will take label and link as multicomposite xtype

2.Create a Java(WCMUsePojo) Class which will fetch the configured values as below

Below class will fetch the values from the data page which are configured.

package com.shoppingcart.util;

import java.util.ArrayList;
import java.util.Iterator;

import javax.jcr.Node;
import javax.jcr.RepositoryException;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.adobe.cq.sightly.WCMUsePojo;
import com.day.cq.wcm.api.Page;

import com.shoppingcart.models.Link;

public class HeaderMenu extends WCMUsePojo{

private static final Logger LOGGER = LoggerFactory.getLogger(HeaderMenu.class);
private static final String dataPagePath = "/content/shopping-cart-/headerfooter";
private ArrayList<Link> headerList = new ArrayList<Link>();

@Override
public void activate() throws Exception {
// TODO Auto-generated method stub
ResourceResolver resourceResolver = getResourceResolver();
Page dataPage = resourceResolver.getResource(dataPagePath).adaptTo(Page.class);
LOGGER.debug("Page {}",dataPage.getName());
if(dataPage !=null){
Resource headerMenu = dataPage.getContentResource();
LOGGER.debug("Jcr {}",headerMenu.getName());
if(headerMenu != null && headerMenu.hasChildren()){
Node multiComp = headerMenu.getChild("data-page/headermenu/multiComp").adaptTo(Node.class);
LOGGER.debug("multiComp {}",multiComp.getName());
if(multiComp != null){
buildHeaderLinks(multiComp);
}
}
LOGGER.debug("End");
}
}
public void buildHeaderLinks(Node multiComp) {
// TODO Auto-generated method stub
try {
if(multiComp.hasNodes()){
Iterator<Node> itemNodes = multiComp.getNodes();
while(itemNodes.hasNext()){
Node itemNode = itemNodes.next();
generateBean(itemNode);

}
}
} catch (RepositoryException e) {
// TODO Auto-generated catch block
LOGGER.error("Error while fetching the header links {}",e.getMessage());
}
}

public void generateBean(Node childNode){
String label = checkProperty(childNode,"label");
String link = checkProperty(childNode,"link");
Link itemBean = new Link();
itemBean.setLabel(label);
itemBean.setLink(link);
getHeaderList().add(itemBean);
}

public String checkProperty(Node childNode, String property) {
// TODO Auto-generated method stub
try {
if(childNode.hasProperty(property)){
return childNode.getProperty(property).getString();
}
} catch (RepositoryException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;

}
public ArrayList<Link> getHeaderList() {
return headerList;
}
public void setHeaderList(ArrayList<Link> headerList) {
this.headerList = headerList;
}



}

Bean Class:

package com.shoppingcart.models;

public class Link {

private String label;
private String link;
public String getLabel() {
return label;
}
public void setLabel(String label) {
this.label = label;
}
public String getLink() {
return link;
}
public void setLink(String link) {
this.link = link;
}


}

3.Iterate the above values in headermenu component using sightly coding as below

<div class="top-menu" data-sly-use.headerMenu="${'com.shoppingcart.util.HeaderMenu'}">

    <span class="menu"><img src="/content/dam/shoppingcart/nav.png" alt=""/> </span>

<ul data-sly-list.itemBean="${headerMenu.headerList}">

   <li data-sly-test="${itemBeanList.index == 0}" >

    <a   href="${itemBean.link}" class="active">${itemBean.label}</a>

    </li>

    <li data-sly-test="${itemBeanList.index != 0}" >

    <a   href="${itemBean.link}" >${itemBean.label}</a>

    </li>

</ul>

</div>

Below is the screenshot how you can get the values fetched.

Creating Component using sightly

We have to follow basic two differences while creating the sightly component:

1. Extension of the file should be .Html
2. No inclusion of the global.jsp in the component file.

Follow those above steps while creating the component and create a component in the normal fashion

Project Structure:

Then include some of the data-sly attributes for the samples as below

Hello Welcome to sightly Components
<div data-sly-test="${currentPage.name}"> currenPageName:${currentPage.name} </div>


<div data-sly-test.author="${wcmmode.edit || wcmmode.design}">
Show this to the author in Edit and Design Mode
</div>
<div data-sly-test="${!author}">
    Show this in Publish Mode
</div>

In the Component you created 

Then next create a page with some template drag and drop the component into the template then you can see the output as Shown below 

This is how you can create a new sample sightly component..


Important Links:

https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl/releases/download/aem-sightly-repl-1.0.2/com.adobe.granite.sightly.repl-1.0.2.zip
https://docs.adobe.com/docs/en/aem/6-1/develop/sightly.html
http://adobeaemclub.com/guide-for-working-with-templates-and-call-in-sightly-aem-6-1/
http://adobeaemclub.com/movie-component-using-sightly-and-wcmuse-api-in-aem-6-1/

https://github.com/edubey1/atesightly
http://bit.ly/AEMHelpForum
http://bit.ly/AEMTechGroup
http://bit.ly/GzKDsp
http://adobeaemclub.com/sightly-pagination-component-using-sling-model-and-javascript-use-api-in-aem-6-1/
http://adobe-marketing-cloud.github.io/tag/aem/

Intro to sightly

Objectives of sightly are:

1. Giv­ing back the markup, and not mix­ing it with code.
2. Every­thing is secure, by default.
3. Smoothen the work­flow between the designer and the developer

Some the basic tags used in sightly:

1. <div> currenPageName:${currentPage.name} </div>
2. <div data-sly-test="${wcmode.edit}">This message is only shown in edit mode</div>
3. <div data-sly-test.mode="${wcmmode.edit || wcmmode.design}"> This message is shown in edit and design mode </div><div data-sly-test="${!mode}">This message can be shown for other than edit and design modes</div>
4. <div data-sly-text="${currentPage.title}">Default Title</div>
5. <ul data-sly-list.childpage="${currentPage.listChildren}"><li>${childpage.path}</li><li>${childpage.title}</li></ul>
6. <ul data-sly-list.childpage="${currentPage.listChildren}"><li class="${childpageList.odd ? 'odd' :'even'}"></li></ul>
7. <div data-sly-resource="${ @path='par' , resourceType='foundation/components/parsys'}"></div>
8. <footer data-sly-resource="${@path='usercomponent' , resourceType='project/usercomponent'}"></footer>
9. ${pageProperties.jcr:title || properties.title || "No Title"}
10. <div data-sly-include="{index.html or any index.jsp}"></div>