Showing posts with label overlay. Show all posts
Showing posts with label overlay. Show all posts

Saturday, 4 June 2016

Sling Cheatsheet


This tutorial is to learn how Apache Sling Resource Resolution is done in AEM.

URL Decomposition :


URL – http://localhost:4502/cf#/content/aemTutorials/sightlyPage.test.html/a/b?x=12

Protocol: http
Host: localhost:4502
Content path : content/aemTutorials/sightlyPage
Selector(s) : .test
Extension : html
Suffix : a/b
Param : x=12


Sling Resource Resolution – Mapping URL to Respective JCR Node :



Step-1: Double click on a page in siteadmin , to open respective page in browser.

Step-2-3-4-5:  Analyse the URL /contents/aemTutorials/sightlyPage it is known as content path.

  • The /content path refers to the path of content folder in crx de.
  • /aemTutorials refers to the package under contents folder.
  • /sightlyPage refers to our page that we have created under siteadmin. jcr:content of sightlyPage contains a property sling:ResourceType. Which tells sling where our component is located. As shown in above figure it is at training/components/myComponent , means sling needs to check for myComponent under /apps folder.
Step-6: Analyse selector and extension  test.html.
  • Sling appends the selector and extension after the component name i.e myComponent.test.html If it found this component then it render it else it drops the extension and search again.
Note:- Sling decides rendering of script on the basis of selector + extension . First priority goes to selector, if no selector is available then priority goes to extension.

Now if we double click our page http://localhost:4502/cf#/content/sample/testing.html  then by default myComponent.jsp script will be called because here .html is an extension not selector .

Between jsp and html first priority goes to jsp as by default a component is linked to jsp at the time of creation.

So the final priority order will be myComponent.html.jsp–>html.jsp–>myComponent.jsp –>myComponent.html

Thursday, 3 March 2016

Customize Left Navigation for Projects.html

Goal:

Add one more menu for the http://localhost:4502/projects.html



New in AEM(CQ) 6.1 is Sling Resource MergerWith resource merger you overlay the path in /apps and add only new nav items (in this case, Users)

1) Create the following folders in CRXDE Lite (http://localhost:4502/crx/de) or use the overlay creator servlet discussed here

            /apps/cq - nt:folder
            /apps/cq/core - nt:folder
            /apps/cq/core/content - sling:OrderedFolder
            /apps/cq/core/content/nav - nt:unstructured

  The structure above is an overlay of /libs/cq/core/content/nav

2) Create node /apps/cq/core/content/nav/onemkhomepage of type nt:unstructured with the following properties

             id - onemk-homepage-link
             href - /content/geometrixx-sightly/English.html
             jcr:description - Open Home Page
             jcr:title - OneMk HomePage

     All properties are self-explanatory. Property id is to uniquely identify the nav item.