Chapter 2 - Pages and Templates
Understand the relationship between a base page component and editable templates. Understand how Core Components are proxied into a project. Two different templates are created. Core Components of Text, Image, and Title are used to author an initial page.
This is Chapter 2 of the multi-part tutorial. Chapter 1 can be found here and an overview can be found here .
View the finished code on GitHub or download the finished package for the previous part of the tutorial: WKND Chapter Solutions .
Note you will need Eclipse or an IDE setup. In this chapter and in the following chapter the Eclipse IDE with AEM Developer tool plugin will be used. Follow the instructions here to set up an integrated development environment .
- Understand the underlying code that generates a page in AEM.
- Add a custom Header to extend the page component.
- Learn how to leverage Editable Templates.
Inspect Base Page Component
In Eclipse (or in the IDE of your choice) you will be viewing nodes beneath /apps/wknd in the ui.apps project.
- View the folder beneath /apps/wknd/components/structure named page .The AEM project archetype creates a component named page . Editable templates will be used for the WKND site. The name structure matches a specific mode of Editable template and is the common convention when using Editable templates. Any component added into the structure folder indicates that the component is meant to be used when constructing a template, and not to be used when authoring a page.
- View the properties of the page component:NameValueDescriptioncomponentGroup.hiddenindicates that this is not an author-able componentjcr:titleWKND Site Pagetitlesling:resourceSuperTypecore/wcm/components/page/v2/pagewill inherit functionality from the Core Page componentjcr:primaryTypecq:Componentprimary node type (read-only)
Inspect Proxy Components
AEM Core Components provide several basic building blocks for creating content. This includes Text, Image and Title and several other components. The AEM project archetype includes these in the WKND project automatically.
Each component added has a sling:resourceSuperType property to point to the Core Component. This is known as creating proxy components and is the recommended way of using Core Components in your project.
- Notice that several Core Components have already been included in the project in the ui.apps module beneath /apps/wknd/components/content .Each component included will have a sling:resourceSuperType property that points to the equivalent Core Component. The exception is the helloworld component which is a sample component.Breadcrumb Component for creating navigation breadcrumbs.Notice the property componentGroup that is set to WKND.Content . componentGroup will be used by a template policy to determine if the component can be added to a page. More on this later in the chapter.
- View the node beneath the /components/content/image component named cq:editConfig with a type of cq:EditConfig .The cq:editConfig defines various behavior including Drag+Drop functionality from the Asset Finder in the Sites Editor. It is a required configuration for the Image component.Notice the cq:dropTargets/image/parameters node. This tells AEM what component resource type to use when dragging an Image on to the page. If you are extending the Image component for custom component it will be important to update the cq:editConfig .
- Core Components also include a set of components for building HTML forms. These components are also proxied into the project, like the components under /content . Notice also that these components have a unique componentGroup.Button form component
Update Empty Page Template Type
Template Types are effectively a template for a template. They are necessary in order to take advantage of AEM's Editable Template feature. Templates and Template Types are stored beneath /conf . The AEM project archetype creates a template type to get started with. Nodes in /conf can be updated in AEM directly via the UI. Thus any template related nodes are stored in the ui.content project.
There are 3 main areas of Editable Templates:
- Structure - defines components that are a part of the template. These will not be editable by content authors.
- Initial Content - defines components that the template will start with, these can be edited and/or deleted by content authors
- Policies - defines configurations on how components will behave and what options authors will have available.Since Template Types can be thought of as a template of a template you will find the same structure for the template type. Examples of template type structures can be found beneath: /libs/settings/wcm/template-types/ .
The AEM Project archetype creates an Empty Page Template Type to start with. We will update a few areas of the Empty Page Template Type in the ui.content module.
- In the ui.content module view the Empty Page Template Type under: /conf/wknd/settings/wcm/template-types/empty-page .
- Expand the structure node and select the jcr:content node.Note on the jcr:content node that the sling:resourceType points to the base page component (viewed earlier in the ui.apps module).
- Beneath /conf/wknd/settings/wcm/template-types/empty-page/structure/jcr:content/cq:responsive/breakpoints are nodes for Tablet and Phone breakpoints. These breakpoints will be used in conjunction with AEM's Responsive Grid feature in the next chapter. The default Tablet breakpoint is 1200 .
- Update the Phone breakpoint from 650 to 768 :
- Inspect the jcr:content node beneath template-types/empty-page/initial . Notice that the jcr:content node beneath the initial page also points back to the base page component inspected earlier.
- Inspect the nodes beneath template-types/empty-page/policies . The policies node defines how policies will be mapped to various components. This structure is standard across template types and not unique to the wknd's empty page template type.
- (Optional) Add a thumbnail for the Empty Page Template Type.Thumbnails are great! This thumbnail will show up for users in the AEM author environment in order to easily identify the Template Type. Recommended dimensions are 460 x 460.
- Create a file named thumbnail.png (or save the above image and rename to thumbnail.png ).
- Add the thumbnail.png file beneath /conf/wknd/settings/wcm/template-types/empty-page :
- Deploy the ui.content module to your local AEM instance using AEM Dev tools or your Maven skills.
- The next part of the tutorial will take place within AEM.
Create Article and Landing Page Templates
The AEM project archetype pre-created a sample Content Template. The next few steps will detail creating 2 new templates:
- Article Page Template
- Landing Page Template
This will take place in AEM. The short video below details the steps.
Note the role of creating a template being done as a development task. However once the implementation reaches a level of maturity, additional templates may be created by a select group of "power-users".
Landing Page Template Thumbnail
Use the above video to complete the following tasks:
- Create Article Page Template and Landing Page TemplateEach of these templates include a fixed Header component and an unlocked Layout Container. The Layout Container is configured with the following allowed components:
Reuse the Layout Container Policy from the Article Page Template on the Landing Page Template.
- Layout Container
- Create the Home PageThe Home page should be created at /content/wknd/en (or the language locale of your choice). It should be created using the Landing Page Template .
- The First Article page should be created beneath the Home Page at /content/wknd/en/first-article . It should be created using the Article Page Template .
- In order to re-deploy these templates to other environments it is possible to make them part of source control. Use the Eclipse Dev Tools, as outlined in the video, to import the templates created in AEM into the ui.content module.
Inspect Content Root
The AEM project archetype created a content root for the WKND site automatically at /content/wknd . The content root defines the allowed templates for the site and is used to set other global configurations. By convention the content root is not intended to be the Home page for the site and instead will redirect to the true home page. It is a good idea to understand the properties on the content root.
- View the following properties on the jcr:content node at /content/wknd/jcr:content :
Will allow any templates created under the WKND folder to be used
Primary node type
HTTP Status code
Use foundation component for redirect
As you can see some of the properties such as allowedTemplates on the Content Root are critical to the behavior of the site. In many implementations root configurations such as this are saved into SCM to provide some baseline content structure. In other cases offline content packages are created and provide a similar role.
- Using Eclipse Dev Tools, in the ui.content module Right + Click /content/wknd page and **Import from server...**.
Next part in the tutorial: