So far you have learned how to create components and authoring interfaces for them. But components are just building blocks that are used for creating full-featured pages. In this lesson, we will learn how pages are built in AEM.
No page can function without a page component. A page component is mostly similar to any other component: it consists of one or more script files, it can have an authoring dialog, and it can include other components and function as a container. Usually, the page component defines <head>
and <body>
tags, includes <meta>
tags, style and script files.
Let’s create a simple page component and a page that uses it. For demonstration purposes, we will do everything in CRXDE, but keep in mind that page creation is usually done in an IDE and the resulting files are then deployed to environments via a package.
Note: We are using the sample project as the base and assume that you have it already installed on your AEM instance.
-
Go to CRXDE, open /apps/sample-project/components. Right-click on the ‘components’ folder, choose “Create” -> “Create Component”
-
Specify the following component properties:
Label: simplePageComponent
Title: Simple Page Component
Group: .hidden -
Click “Next”, then “OK”, then save the changes.
-
Rename
simplePageComponent.jsp
intosimplePageComponent.html
and double-click on the file to open it for editing. -
Replace the existing code with the following markup:
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
Save the changes
Now we will create a page that will be rendered by this page component.
-
Open /content/sample-project/us/en
-
Right-click on the ‘en’ node, choose “Create” -> “Create Node”
-
Specify the following properties:
Name: simple-page
Type: cq:PageSave the Changes
-
Right-click on the ‘simple-page’ node, choose “Create” -> “Create Node”
-
Specify the following properties:
Name: jcr:content
Type: cq:PageContentSave the changes
-
Add the following properties to the
jcr:content
node
sling:resourceType - /apps/sample-project/components/simplePageComponent (the path to the page component we have created).
jcr:title - Simple Page
As you already know,sling:resourceType
is one of the most important properties of a node - it links the content with the scripts that can render this contentSave the changes
-
Open http://localhost:4502/content/sample-project/us/en/simple-page.html and you will be able to see that the page uses the markup of the page component
Real page components are usually more complex. The page markup includes meta tags, JS and CSS scripts, etc. Page components have one or more editable regions where the authors can add new components. Also, page components usually have an authoring dialog that is used for specifying properties of the whole page. We could create all these elements from scratch, but instead of doing that, let’s save us some time and use native AEM capabilities.
AEM offers an override mechanism that allows us to “inherit” one component from another and override only the parts that we need to customize. Let’s extend our page component from an OOTB one to see the advantages of this approach.
-
Go to CRXDE, open the page component /apps/sample-project/components/simplePageComponent that we have previously created.
-
Add a new property to the component node
sling:resourceSuperType - /apps/core/wcm/components/page/v3/pageSave the changes.
sling:resourceSuperType
is the analogue of the “extends” keyword in Java - it allows us to extend one component from another. Let’s examine the page component we are planning to extend and decide, which parts we want to override -
Open /apps/core/wcm/components/page/v3/page and examine the list of files it includes.
First of all, we have a README.md file which contains the detailed documentation of the component. Secondly, we have a
cq:dialog
node that allows authors to specify page properties. You already know about component dialogs from lessons 2.5 and 2.6, these dialogs are almost identical. Thirdly, we havepage.html
script. Since the node is named ‘page’,page.html
script is the entry point from which AEM starts rendering the component. -
Examine
page.html
scriptWe see that this script serves the same purpose as our
simplePageComponent.html
- it defines the page “skeleton”.This script includes other scripts -head.html
,body.html
,footer.html
. This gives us more flexibility - we can override what we want to customize while inheriting other parts of the patent page component.
For now, we will override only thebody.html
part of the page - we want our page to have one layout container. -
Return to /apps/sample-project/components/simplePageComponent. Delete
simplePageComponent.html
and addbody.html
Paste the following code intobody.html
:<sly data-sly-resource="${'parsys_0' @ resourceType='wcm/foundation/components/responsivegrid'}"/>
Save the changes.
-
Now let’s open the page we created earlier and see, how these changes are reflected in the page itself. http://localhost:4502/editor.html/content/sample-project/us/en/simple-page.html
As we can see, instead of static “Hello world” markup, we now have an editable region of the page, where we will soon be able to add new components. Also, we are now able to define page properties.
-
Click on the equalizer icon and open the page properties dialog
Here we can see the Page properties dialog, which allows us to define meta information, page permissions and other page metadata.
This page properties dialog is inherited from the parent component, but we could also customize it on simplePageComponent level. Customizing page properties is out of this lesson’s scope, but you can read more about it here.
The page above is still quite simple. Real pages usually have a defined layout and pre-existing components (such as header and footer).
Ideally, we don’t want to duplicate these structural elements on every page, we would like to define them in one place in order to avoid duplication. But how can we do it? The answer is templates. AEM templates are a flexible mechanism for defining the structure, initial content and allowed components for groups of similar pages.
AEM has 2 types of templates - static and editable. Static templates are the original templating system that was built on the assumption that the developers define all templates for a project. Editable templates were developed later with the new paradigm in mind: authors should be able to create and edit templates too. Editable templates also provide more abilities to edit page structure for all pages created on the template (hence the name - “editable” template.
There is almost no difference between these two template variations when you are creating a new page, editing content, publishing the changes. But they are vastly different from the development point of view. We will cover both template types, but let’s start with the older flavour - static templates.