Introduction to AEM developers, and their templates and components

In this post, we will see the very basic responsibilities of developers. Developers create templates and components.

Let us first take a recap: a template defines the layout of a web page. Authors select a specific template before they create a page. A component allows authors to display specific information in a certain format. For example, a bulleted list is a component. An image is a component. We have seen that you can drag and drop an image to an Image component and it will get displayed in the page.

Authors use SiteAdmin as a tool to create web pages. Similarly, there is a web console that developers use a lot – CRXDE Lite. In one of the previous posts, I have mentioned that the data in AEM is saved as Tar files. AEM uses Apache Oak for saving the data. These data is saved as nodes and properties. CRXDE Lite provides you with an interface where you can see these nodes and properties. It allows you to create and update the nodes and properties.

Let us start our exploration on CRXDE Lite: http://localhost:4502/crx/de
Log in as admin and admin as the credentials.

Let us first examine the web page that you created in the previous session. You created a web page – MyNewPage. In the left pane, move to the Content folder. Then navigate Geomtrixx > en.
You can see the web page you created there. Select the page and then select the jcr:content node. The properties associated with the node gets displayed in the right pane.

You can see a cq:template property which provides the location of the template you used. /apps/geometrixx/templates/contentpage
Scroll down to see the jcr:title property – the title of your page. Now select the par node. It represents a node inside which you can add other components. Inside this node, you will see the Text component you added.

In short, the pages an author creates goes to the Content folder. Normally, it’s created through SiteAdmin. Developers won’t play around with these pages.

Developers create templates and components. Where are they hidden? Go to the apps folder. This is the folder where you create templates and components associated with your project. Then go to Geometrixx. You will see various folders: components, config, install, src, and templates. We will learn more about the components and templates in this session. Go inside the template folder. You will see all the templates associated Geometrixx site. These were the templates you saw while you were creating a new web page. Select the contentpage node – The template you used for creating a new page. Note that the jcr:primaryType property is cq:Template. It also got a Tile and Description properties. Now select jcr:content property. It has a sling:resourceType property. It points to geometrixx/components/contentpage. It means that the node pointed, basically a script, provides the layout to render the content.

Let us see how this script looks like. Go to components and select the contentpage. You will see a content.jsp. This is the script using which the basic layout is created. All of the existing templates are created using JSP. In AEM’s context, it’s called a templating language. In AEM 6.0 release, Adode introduced a new templating language called Sightly. Sightly is HTML 5 and is very easy to use.

Let us wind up this session here. In the next session, we will create a template using Sightly.

To give you a summary:
CRXDE Lite is developers' web console: http://localhost:4502/crx/de
content is the folder where all author-generated pages exist.
apps is the folder where you create templates and components associated with your project.
cq:template is a property associated with all templates.
sling:resourceType property of a template points the script that is used to render the layout.
JSP is the templating language in which all templates are written.
AEM 6.0 provides a new templating language – Sightly.