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 AEM Project Structure using lazybones

Facing difficulties in creating AEM project structure using maven and eclipse no worries here is the easy way to create the basic AEM structure using ACS Commons, includes default config options.

Steps to create the project structure :

1. Naviagate to link https://bintray.com/pledbrook/lazybones-templates/lazybones#files download the zip file for windows operating system.
2. Extract the zip file and set the environment path variable to \lazybones-0.8.1\bin
3. open the command then type lazybones command, you will be able to see some of the commands used in lazybones.
4. once you have installed lazybones for creating the AEM project structure type the command lazybones create aem-multimodule-project <directory name>.
5. CMD will prompt some of the question as below.

Description	Default	Parameter Name
Maven Group ID	com.myco	groupId
Maven Artifact ID	example-project	artifactId
Maven Version	0.0.1-SNAPSHOT	Version
Project Name	My AEM Project	projectName
Target AEM Version	6.0	aemVersion
Bundle Artifact ID	example-project-bundle	bundleArtifactId
Content Package Artifact ID	example-project-content	contentArtifactId
Folder to create under /apps	My-aem-project	appsFolderName
Folder to use under /content	My-aem-project	contentFolderName
Create a site design?	Yes	createDesign
Design folder name	my-aem-project	designFolderName
Create a main client library?	Yes	createMainClientLib
Create a dependencies client library	Yes	createDependenciesClientLib
Enable code quality checks?	Yes	enableCodeQuality
Set root mapping to /welcome (Classic UI)?	yes in 5.6.1, no in 6.0	reconfigureRootMapping
Set Default Authoring UI to Classic? (6.0 only)	Yes	enableClassicAuthoringAsDefault
Include ACS AEM Commons?	Yes	includeAcsAemCommons
Include ACS AEM Commons as a sub-package?	Yes	includeAcsAemCommonsSubPackage
Enable ACS AEM Commons Error Handler?	Yes	enableErrorHandler
Default Error Page Path	/content/my-aem-project/errors/404	defaultErrorPath
Define Error Page Folder for /content/my-aem-project ?	No	defineErrorPageFolder
Error Page Folder for /content/my-aem-project	Errors	errorFolder
Enable ACS AEM Commons Pages Reference Provider?	yes	enablePagesReferenceProvider
Enable ACS AEM Commons Design Reference Provider?	Yes	enableDesignReferenceProvider
Enable ACS AEM Commons Design Html Library Manager?	Yes	enableDhlm
Enable ACS AEM Commons Versioned Client Libraries?	Yes	enableVersionedClientLibs
Create Environment-Specific Config Folders?	Yes	createRunModeConfigFolders
Environment Names	localdev,dev,qa,stage,prod	envNames
Create Author and Publish Config Folders per Environment?	Yes	createAuthorAndPublishPerEnv
Using Sling Models?	Yes	usingSlingModels
Sling Models Package	''	slingModelsPackage
Purge DAM Workflows?	Yes	purgeDamWorkflows
DAM Workflow Retention Period (days)	7	purgeDamWorkflowRetention

Once this is done you can now see the sample AEM project structure.

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>