This is Chapter 2 of the multi-part tutorial. Chapter 1 can be found here and an overview can be found here.
Note you will need Eclipse or an IDE setup. Instructions for setting up a development environment can be found in Chapter 1.
You can view Chapter 1 on GitHub or you can download the solution package:
Descargar
The archetype has created a component to be used as a base for all Pages created. The base page is responsible for ensuring that global areas of the site are consistent. This includes loading of global CSS and Javascript, as well as the inclusion of code that will ensure the page can be edited using AEM authoring tools.
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 named structure.
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.
-
Name Value Description
componentGroup .hidden indicates that this is not an authorable component jcr:title WKND Site Page title sling:resourceSuperType core/wcm/components/page/v2/page
will inherit functionality from the Core Page component jcr:primaryType cq:Component primary node type (read-only) The sling:resourceSuperType property is critical in that it allows the WKND's page component to inherit all of the functionality of the Core Component page component. This is the first example of something called the Proxy Component Pattern. More information can be found here.
Next a Header component will be created to be integrated into the Base page. The goal is just to establish a basic structure, so the code will be minimal. In later tutorials this component will be built in full.
-
You may see an error like the following: Unable to validate node types since project aem-guides-wknd.ui.apps is not associated with a server or the server is not started.
Double check and ensure that the aem-guides-wknd.ui.apps project is associated with an AEM eclipse server and that the server is started.
If you continue to encounter the error:
- Right+Click the aem-guides-wknd.ui.apps project in the Project explorer
- Open Properties > Project Facets
- Uncheck Dynamic Web Module
This should resolve the error and you should then get a drop down of node types when creating new nodes.
uncheck Dynamic Web Module under Properties > Project FacetsAlso ensure that the content sync root directory beneath the AEM tab is pointed to the jcr_root folder:
-
Update the header component with additional JCR properties. Select the header component and then Right+Click in the JCR Propertied panel to add new properties.
Add the following properties to the header component.
Name Type Value Tutorial Description
(don't copy, info only)componentGroup String WKND.Structure All components meant for the structure of Templates will use this group. jcr:description String Page Header with navigation description of component jcr:title String WKND Page Header title jcr:primaryType Name cq:Component primary node type Nota:
Pro Tip!
You can Double+Click the component in the Project Explorer and edit the XML configuration directly. This is preferrable when many edits must be made, but it can be error prone.
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Component" componentGroup="WKND.Structure" jcr:description="Page Header with navigation" jcr:title="WKND Page Header"/>
-
-
This file is is actually an HTL script. There are a set of global objects that are always available to HTL scripts within a component. currentPage represents the current content page. Using the dot notation .title a method named .getTitle() is called. This will print the current page's title. Conditional logic can be used to print out 'header' if the page title can't be found. The name of the file header.html is important for Sling resource resolution, as it matches the name of the component. More information about Sling resource resolution can be found here.
Add the following contents to the header.html file:
<!--/* Header Component for WKND Site */--> <header class="wknd-header"> <div class="container"> <a class="wknd-header-logo" href="#">WKND</a> <h1>${currentPage.title ? currentPage.title : 'header'}</h1> </div> </header>
-
Deploy to AEM
Its a good idea to periodically publish to AEM to verify/test your code changes. With Eclipse AEM dev tools you can publish the ui.apps project from within Eclipse.
You can also always publish using Maven. It is a good idea deploy using Maven as well since this will ultimately be how you deploy to a Dev/Production environment and Maven will also run through unit tests and other code style checks prior to installing.
More details about pushing code between the IDE and AEM instance can be found on Part 1.
$ mvn -PautoInstallPackage -Padobe-public clean install
See the Page node in CRXDE Lite after deploying code changesIn CRXDE-Lite verify that the header component has been pushed to your local AEM instance.
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.
In the first few parts of the tutorial the following Core Components will be used:
The Core Components themselves can be viewed in CRXDE Lite under /apps/core/
-
Expand /apps/wknd/components/content
Notice that several Core Components have already been included in the project. 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. -
Inspect cq:editConfig beneath image component
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.
1. View the node beneath the image component named cq:editConfig with a type of cq:EditConfig
2. 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:editConfg.
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. There are examples of template type structures that can be found beneath: /libs/settings/wcm/template-types/
The AEM Project archetype creates an Empty Page Template Type to start with. Inspect a few areas of the Empty Page Template Type in the ui.content module.
-
/conf/wknd/settings/wcm/template-types/empty-page/structure/jcr:content
Note on the jcr:content node that the sling:resourceType points to the base page component (created earlier in this part). Also notice that the breakpoints for Phone and Tablet are defined here. Desktop will be considered larger than 1200.
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".

-
Each of these templates include a fixed Header component and an unlocked Layout Container. The Layout Container is configured with the following allowed components:
- Breadcrumb
- Image
- List
- Text
- Title
- Layout Container
Reuse the Layout Container Policy from the Article Page Template on the Landing Page Template.
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.
-
Open CRXDE Lite http://localhost:4502/crx/de/index.jsp and navigate to /content/wknd/jcr:content
-
Name Type Value Tutorial Description
(don't copy, info only)cq:allowedTemplates String[] /conf/wknd/settings/wcm/templates/.* Will allow any templates created under the WKND folder to be used cq:deviceGroups String[] /etc/mobile/groups/responsive
defines the device groups used in Layout Mode. Will use the default settings. jcr:title String WKND Site title jcr:primaryType Name cq:pageContent primary node type redirectTarget String /content/wknd/en redirect target sling:redirect Boolean true sling:redirectStatus Long 302 sling:resourceType String foundation/components/redirect will use the Foundation Redirect component to perform the 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.
If you get stuck or have additional questions make sure to check out the Experience League forums for AEM or view existing GitHub issues.
Didn't find what you were looking for? Think you found an error? Please file a GitHub issue for the WKND project.
Next part in the tutorial:
- Getting Started with AEM Sites Chapter 3 - Client-Side Libraries and Responsive Grid
- View the finished code on GitHub or download the solution package:
Descargar