Hello World: A Deep Dive Tutorial

You are reading the AEM 6.2 version of Hello World: A Deep Dive Tutorial.
This documentation is also available for the following versions:  AEM 6.1  AEM 6.0  AEM 5.6.1  AEM 5.6  CQ 5.5  CQ 5.4 

This tutorial is intended for people who have some software programming experience but who are beginners when it comes to CQ development. We call it a "deep dive" because it takes you quickly from the most basic aspects of CQ quickly through the deeper levels of the system, giving you a taste of most of CQs major features, but without going into comprehensive detail on each one. The tutorial does not try to comprehensively cover each topic encountered, but rather just give you a taste of the major features offered by CQ.

Before You Begin

To follow this tutorial you will need to have CQ installed on your local system. Go to Download and Start Working for information on how to install the software.

A Blank Slate

To get an idea of how CQ works at the development level we will begin with a blank slate and build a simple functioning website from scratch.

First Steps

When you first open CQ you will see the welcome page:

Click on CRXDE Lite to open the in-browser development environment:

On the left side of the console you will see the CQ repository tree. Open the apps folder and you will see a subfolder called geometrixx. This is the app for the built-in example website that comes with CQ. A CQ website can be thought of as specific instance of a CQ app. An app (or application) in CQ defines the general form and function of the pages of a website, without any actual content.

Hello World Website

Our website will be called Hello World. The first step is to create a new app that will implement our website.

First highlight the apps folder by clicking on it. Then, click Create, above on the menu bar within the console, and select Create Folder.

When prompted for the name of the new folder, enter helloworld. Below that create two subfolders called components and templates.

Create a Template

Now navigate to /apps/helloworld/templates and select Create Template from the Create menu. In the dialog box that comes up enter the following information for each field:

Label: contentpage
Title: Content Page
Description: This is a standard content page for the Hello World website
Resource Type: helloworld/components/contentpage
Ranking: 100

Click Next through the Allowed Paths, Allowed Children and Allowed Parents steps and then click OK. The template node is created at helloworld/templates/contentpage. Click Save All in the menu to persist the changes to the repository.

Let's take a look at the new template we just created. The repository structure (excluding system properties) now looks like this:

apps
   helloworld
      components
      templates
         contentpage
            jcr:description = "A standard content page for the
                               Hello World website"
            jcr:title = "Content Page"
            ranking = 100
            jcr:content
               sling:resourceType = "helloworld/components/contentpage"

Note that fields that we filled in using the Create Template dialog are recorded as properties of the template node (/apps/helloworld/templates/contentpage) and its subnode (/apps/helloworld/templates/contentpage/jcr:content).

The jcr:description and jcr:title properties are used to display information about this template in the authoring UI. The key functional property is jcr:content/sling:resourceType which has the value "helloworld/components/contentpage". When a page based on this template is requested, CQ uses this value to find the component that will render the page. We will look at this in more detail later (and for full details see the Sling Resolution Process), but for now let's move on to creating the component itself.

Create a Component

To create the component, navigate to /apps/helloworld/components and and select Create Component from the Create menu. In the dialog box that comes up, fill in the fields as follows:

Label: contentpage
Title: Content Page
Description: A Content Page Component
Super Type: foundation/components/page
Group: .hidden

Click Next and fill in the next set of fields as follows:

Is Container: Yes
No Decoration: ?
Cell Name: ?
Dialog Path: ?

Click through Allowed Parents and Allowed Children without adding anything. Then click OK and then Save All. The repository structure now looks like this (the bold items are the ones that we just added):

apps
   helloworld
      components
         contentpage
            jcr:title = "Content Page"
            jcr:description = "A Content Page Component"
            isContainer = true
            componentGroup = ".hidden"
            sling:resourceSuperType = "foundation/components/page"
            contentpage.jsp
               jcr:content

      templates
         contentpage
            jcr:description = "A standard content page for the
                               Hello World website"
            jcr:title = "Content Page"
            ranking = 100
            jcr:content
               sling:resourceType = "helloworld/components/contentpage"

As with the template, the jcr:title and jcr:description properties are used to identify this component in the authoring UI.

Any questions?

Have a question about this or any other AEM topic? Ask our Community.
Learn more about AEM topics on our help hub.
Was this helpful?

By submitting your feedback, you accept the Adobe Terms of Use.

Thank you for submitting your feedback.