Article summary

Summary

Discusses how to build an Adobe Experience Manager 6.4 web site that represents a travel site.  This article uses Editable Templates to build the example Experience Manager site as opposed to Static Templates. It's recommended that all new Experience Manager 6.4 projects use Editable Templates over Static Templates. For more information, see Templates

A special thank you to Ratna Kumar Kotla and Navin Kaushal, top Experience Manager community members, for testing this article to ensure it works.

The code used in this article was based on code created by Adobe employee Dennis selfridge. Thank you Dennis!  

Digital Marketing Solution(s) Adobe Experience Manager 6.4
Audience Developer
Required Skills CSS, HTML 
Version 6.4
Video https://bit.ly/2QdnsbG

Note:

This article uses CRXDE lite to build the example Adobe Experience Manager site. The objective of this article is to show you basic development patterns of building an Experience Manager site by using editable templates as opposed to the tools you can use. Typically, you use a tool such as Eclipse to start an Experience Manager project. This article does not use Eclipse to create the sample site. All work is done within Experience Manager

Note:

For additional Experience Manager Getting Started Content, including how to use the Eclipse developer plug-in, see Getting Started with AEM Sites - WKND Tutorial

Download

Introduction

In this Adobe Experience Manager 6.4 article, you create an Experience Manager site that contains a header section, a body section (in this article, the leadarticles component is used), and a footer section. In addition, you are going to learn how to promote reuse of Experience Manager content by:

  • Leveraging Editable Template Structures
  • Making use of core components
  • Understanding Template and Content Policies  

The following illustration shows the site that is created by following this article. 

HomePage
An Experience Manager 6.4 web site

The Experience Manager site created in this article uses editable templates, as shown in this illustration. 

editableTemplate

The following specifies the advantages of editable templates:

  • Can be created and edited by your authors.
  • After the new page is created, a dynamic connection is maintained between the page and the template. This means that changes to the template structure are reflected on any pages created with that template (changes to the initial content will not be reflected).
  • Uses content policies (edited from the template editor) to persist the design properties (does not use Design mode within the page editor).
  • Are stored under /conf

Create an Experience Manager Maven 13 archetype project

You can create an Experience Manager archetype project by using the Maven archetype plugin. In this example, assume that the working directory is C:\AdobeCQ.

maven
Maven generated files

To create an Experience Manager archetype project, perform these steps:

1. Open the command prompt and go to your working directory (for example, C:\AdobeCQ).

2. Run the following Maven command:

mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=13 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

3. When prompted, specify the following information:

  • groupId - travel
  • artifactId - travel
  • version - 1.0-SNAPSHOT
  • package - com.aem.community
  • appsFolderName - travel
  • artifactName - travel
  • componentGroupName -travel
  • contentFolderName - travel
  • cssId - travel
  • packageGroup - travel
  • siteName - travel

4. WHen prompted, specify Y.

5. Once done, you will see a message like:

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:42 min
[INFO] Finished at: 2016-04-25T14:34:19-04:00
[INFO] Final Memory: 16M/463M
[INFO] ------------------------------------------------------------------------

6. Change the working directory to travel.

Note:

This section assumes that you have setup Maven. If you have not, see this article Creating an Adobe Experience Manager 6.4 Project using Adobe Maven Archetype 13.

Note:

In this article, there is no need to modify the default Java files. If you are interested in knowing about the Java files created by the Maven Archetype 13 project, see the article listed in the previous note. 

Modify the Maven POM file

Add the following POM dependency to the POM file located at C:\AdobeCQ\travel.

<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.0</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>
               
  <dependency>
       <groupId>org.apache.geronimo.specs</groupId>
       <artifactId>geronimo-atinject_1.0_spec</artifactId>
       <version>1.0</version>
       <scope>provided</scope>
   </dependency>

When you add new Java classes under core, you need to modify a POM file to successfully build the OSGi bundle. You modify the POM file located at C:\AdobeCQ\travel\core.

The following code represents this POM file.

<?xml version="1.0" encoding="UTF-8"?>
<!--
 |  Copyright 2017 Adobe Systems Incorporated
 |
 |  Licensed under the Apache License, Version 2.0 (the "License");
 |  you may not use this file except in compliance with the License.
 |  You may obtain a copy of the License at
 |
 |      http://www.apache.org/licenses/LICENSE-2.0
 |
 |  Unless required by applicable law or agreed to in writing, software
 |  distributed under the License is distributed on an "AS IS" BASIS,
 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 |  See the License for the specific language governing permissions and
 |  limitations under the License.
-->
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>travel</groupId>
        <artifactId>travel</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>travel.core</artifactId>
    <packaging>bundle</packaging>
    <name>travel - Core</name>
    <description>Core bundle for travel</description>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.sling</groupId>
                <artifactId>maven-sling-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <!-- Import any version of javax.inject, to allow running on multiple versions of AEM -->
                        <Import-Package>javax.inject;version=0.0.0,*</Import-Package>
                        <Sling-Model-Packages>
                            com.adobe.community.core
                        </Sling-Model-Packages>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <!-- OSGi Dependencies -->
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>apis</classifier>
        </dependency>
      
        <dependency>
            <groupId>org.apache.geronimo.specs</groupId>
            <artifactId>geronimo-atinject_1.0_spec</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.cmpn</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.annotation</artifactId>
        </dependency>
        <!-- Other Dependencies -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.jcr</groupId>
            <artifactId>jcr</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>apis</classifier>
        </dependency>
        <dependency>
            <groupId>org.apache.sling</groupId>
            <artifactId>org.apache.sling.models.api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-core</artifactId>
        </dependency>
        <dependency>
            <groupId>junit-addons</groupId>
            <artifactId>junit-addons</artifactId>
        </dependency>
    </dependencies>
</project>

Deploy the Project to Experience Manager

To deploy the project to Experience Manager, perform these steps:

  1. Open the command prompt and go to the C:\AdobeCQ\travel.
  2. Run the following maven command: mvn -PautoInstallPackage clean install.

The command -PautoInstallPackage automatically deploys the project to Experience Manager.

Once deployed to Experience Manager, you can view the project under /apps. as shown in this illustration. 

Travel
The travel project displayed in CRXDE lite

Another set of default files to inspect is the templates unders under /config, as shown in this illustration. This default editable template files were generated by the Maven Archetype 13 project. 

Travel55
Editable Template files under /config

Note:

Using the Adobe Maven 13 archetype project, you have the starting files required to produce Editable Templates. There is no longer a need to create Experience Manager projects by using Static Templates. When using Experience Manager 6.4, it is best practice to use Editable Templates.

Create components used in the Experience Manager site

Create the following Experience Manager components that are used in the editable template: 

  • header
  • footer
  • leadarticles

The header and footer components are created under components/structure. The leadarticles components is created under components/content. The componentGroup for all of these components is travel

Travel56
Experience Manager components used in the Editable Templates

Note:

Ensure that a dialog appears under the component. Otherwise the component does not show up in the component category and you are not able to use it within an editable template. For information about adding a dialog to a Touch UI component, see this article: Building Experience Manager Components using Granite/Coral Resource Types.

header component

Create the header component by performing these tasks:

1. Navigate to /apps/travel/components/structure.

2. Right click and select Component.

3. Name the component header.

4. Add the value travel for the Group (this will place the component in the Group named travel).

5. Rename the header.jsp to header.html.

6. Add a Touch UI dialog to the component. 

6. Add the following code to this file.

<div class="wrapper bgded overlay" style="background-image:url('/content/dam/travel/banner_lake.png');">
  <div id="pageintro" class="hoc clear"> 
    <!-- ################################################################################################ -->
    <div class="flexslider basicslider">
      <ul class="slides">
        <li>
          <article>
            <p>Praesent justo at sem</p>
            <h3 class="heading">Aliquam adipiscing faucibus</h3>
            <p>Lacus urna consectetuer nisi donec lorem metus lobortis eu lacinia nec dignissim sed pede aliquam eget ligula nulla bibendum  nullam lacinia purus eget posuere tristique sapien neque blandit nisl.</p>
            <footer><a class="btn" href="#">Nulla tortor sed</a></footer>
          </article>
        </li>
      </ul>
    </div>
    <!-- ################################################################################################ -->
  </div>
</div>

Footer component

Create the footer component by performing these tasks:

1. Navigate to /apps/travel/components/structure.

2. Right click and select Component.

3. Name the component footer.

4. Add the value travel for the Group.

5. Rename the footer.jsp to footer.html.

6. Add a Touch UI dialog to the component.

7. Add the following code to this file.

<div class="wrapper row4 bgded overlay" style="background-image:url('/content/dam/travel/matt-howard-185303.jpg');">
  <footer id="footer" class="hoc clear"> 
    <!-- ################################################################################################ -->
    <div class="center btmspace-50">
      <h2 class="heading">Summit Getaways</h2>
      <nav>
        <ul class="nospace inline pushright uppercase">
          <li><a href="#"><i class="fa fa-lg fa-home"></i></a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Cookies</a></li>
          <li><a href="#">Disclaimer</a></li>
        </ul>
      </nav>
    </div>
    <!-- ################################################################################################ -->
    <hr class="btmspace-50">
    <!-- ################################################################################################ -->
    <div class="group">
      <div class="one_third first">
        <h6 class="heading">Curabitur varius cursus</h6>
        <ul class="nospace btmspace-30 linklist contact">
          <li><i class="fa fa-map-marker"></i>
            <address>
            Street Name &amp; Number, Town, Postcode/Zip
            </address>
          </li>
          <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
          <li><i class="fa fa-fax"></i> +00 (123) 456 7890</li>
          <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
        </ul>
      </div>
      <div class="one_third">
        <h6 class="heading">Magna mattis nibh ut</h6>
        <figure><a href="#"><img class="borderedbox inspace-10 btmspace-15" src="/content/dam/travel/dawid-zawila-232726.jpg" alt=""></a>
          <figcaption>
            <h6 class="nospace font-x1"><a href="#">Proin commodo semper</a></h6>
            <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
          </figcaption>
        </figure>
      </div>
      <div class="one_third">
        <h6 class="heading">Potenti ullamcorper</h6>
        <p class="nospace btmspace-30">Vel dolor vestibulum consequat nullam porttitor suspendisse potenti.</p>
        <form method="post" action="#">
          <fieldset>
            <legend>Newsletter:</legend>
            <input class="btmspace-15" type="text" value="" placeholder="Name">
            <input class="btmspace-15" type="text" value="" placeholder="Email">
            <button type="submit" value="submit">Submit</button>
          </fieldset>
        </form>
      </div>
    </div>
    <!-- ################################################################################################ -->
  </footer>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row5">
  <div id="copyright" class="hoc clear"> 
    <!-- ################################################################################################ -->
    <p class="fl_left">Copyright &copy; 2018 - All Rights Reserved - <a href="#">Summit Getaways</a></p>
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
    <!-- ################################################################################################ -->
  </div>
  
</div>

leadarticles

Create the leadarticles component by performing these tasks:

1. Navigate to /apps/travel/components/content.

2. Right click and select Component.

3. Name the component leadarticles.

4. Add the value travel for the Group.

5. Rename the leadarticles.jsp to leadarticles.html.

6. Add a Touch UI dialog to the component.

7. Add the following code to this file.

<div class="wrapper row3">
  <main class="hoc container clear"> 
    <!-- main body -->
    <!-- ################################################################################################ -->
    <div class="sectiontitle">
      <h6 class="heading">Suspendisse venenatis</h6>
      <p>Lectus aliquam quis urna vel quam sagittis vestibulum.</p>
    </div>
    <ul class="nospace group">
      <li class="one_third first">
        <article><i class="btmspace-30 fa fa-3x fa-laptop"></i>
          <h6 class="heading font-x1">Integer sodales odio</h6>
          <p class="btmspace-30">Mattis erat pede at magna maecenas ut eros vel tortor viverra auctor phasellus ligula lobortis vivamus ultricies [&hellip;]</p>
          <footer><a class="btn" href="#">Read More &rsaquo;</a></footer>
        </article>
      </li>
      <li class="one_third">
        <article><i class="btmspace-30 fa fa-3x fa-lastfm"></i>
          <h6 class="heading font-x1">Ultrices feugiat ligula</h6>
          <p class="btmspace-30">Massa eget sapienfusce ornare suscipit massa duis sed magnacras condimentum tempor tortor integer id urna [&hellip;]</p>
          <footer><a class="btn" href="#">Read More &rsaquo;</a></footer>
        </article>
      </li>
      <li class="one_third">
        <article><i class="btmspace-30 fa fa-3x fa-codiepie"></i>
          <h6 class="heading font-x1">Augue tempor orci</h6>
          <p class="btmspace-30">Eros mauris cursus quam consectetuer tincidunt est mi bibendum risus nec rutrum mi justo sit amet mi suspendisse [&hellip;]</p>
          <footer><a class="btn" href="#">Read More &rsaquo;</a></footer>
        </article>
      </li>
    </ul>
    <!-- ################################################################################################ -->
    <!-- / main body -->
    <div class="clear"></div>
  </main>
</div>

Integrate Style into the Experience Manager template

Add CSS and other files such as images to Experience Manager so your site becomes richer in terms of look and feel. Style drives the user experience so it is important that you add CSS that enhances the user experience. Once you add the CSS and other dependencies, the travel site looks like the following illustration.

HomePage
CSS is added to the travel site

The Experience Manager Clientlib that contains the CSS is located at the following JCR location.

/apps/travel/components/getaways

The following illustration shows the Clientlib.

ClientLib
Client libs under the travel app

Download

Download and deploy this package by using Package Manager.

Note:

The Clientlibs is included in the site by this line of code in the structure/page/customheaderlibs.html file:  <sly data-sly-call="${clientLib.all @ categories='summit.author'}" />

Create an Editable Templates for the Travel site

Create an Experience Manager editable template by using the Experience Manager Template Editor. A template created with the template editor acts as a container for the components. In addition, you can define the way the template looks by setting styles and also define which components are allowed to be used within the template (and those pages that are based on the template).

To create an editable template, perform these tasks:

1. From the Start page, click the Tools icon (a hammer) and click on Templates.

2. Click on the travel folder to open it (this represents the project that was created by using the Maven Archetype 13 project).

Travel45
Click the Travel folder

3. Click the Create button to create a template.

4. In the Create Template wizard, select the Travel Empty Page template type and click the Next button.

TemplateType
The Travel Empty Page Template

5. On the Template Details step, provide a title (specify HomeTemplate) for your template and click the Create button. Once your template has been created, click the Open button to open the template.

The following illustration shows the HomeTemplate template that was created.  

TemplateHome
A template created by using the Template Editor

Add Structural Components to the template

You can define a layout in the new template. In this example, you are going to add the header and footer components to the template. In addition, a Layout component is added (where authors are allowed to add or remove components).

To start, mouse over the white area around the box labeled Drag components here. An orange bounding box appears. Then click the mouse button to show the component toolbar (click where the arrow points to). Finally, click on the Policy icon, the first item in the toolbar (red square).

Pol1
A policy associated with the template

When you click the Policy icon, this action opens the travel Default dialog. Here you can specify the set of components which are allowed to be placed into the Layout Containers. For now, specify only Layout Container (under General) and the travel components (under travel category). 

In the dialog, keep the default title for the policy (travel Default). Then open the General category in the right panel and check the box next to Layout Container. Then Select the Travel category. Finally, click the check mark in the top-right corner.

Travel46
Select the Layout Container for the policy

You will now be back in the Template Editor. Drag the Layout Container component from the left panel onto the box labeled Drag components here. Once done, the template looks like the following image.

Travel47
Add a layout container component to the template

Finally, you need to unlock the Layout container component so that an author can add components to it (if the Layout container remains locked, then an author is not able to add components). Click on the first layout container to expose the toolbar and click on the lock icon. Now the template looks like the following illustration.  

Travel48
The Layout container is unlocked

Set a Policy for the Layout component

You can set a policy for the Layout container that defines which components an author is allowed to use within the Layout container. To set the Policy for the Layout container, click on the Layout container, as shown here.

Pol4
A policy for the Layout container.

Name the Policy LayoutPol1 and select the travel category. Click the checkmark to close the dialog.

Pol6
A policy for the Layout container

Set the header component in the template

Next, drag the header component from the side rail above the layout container component. See the following illustration. 

Travel49
Drag the header component into the template

Once done, you see the header component rendered in the template. 

pol8
The Template with the header component displayed

Set the footer component in the template

Drag the footer component below the layout container component, as shown in this illustration. 

Travel50
Drag the footer component into the template

The footer component renders in the template, as shown in this illustration. 

pol10
The footer component rendered in the template

Set the leadarticles component in the Layout container

In the Layout container, right click and select the Cross Icon. 

Travel51
Click the cross icon

Next, select the Lead Articles component, as shown in this illustration. 

Travel52
Select the Lead Articles component

Now you will see the Lead Articles component rendered in the template. 

Pol12
The Lead Articles component rendered in the Template

Enable the Template

Before an Experience Manager author can use the template to create pages, you must enable it. To perform this task, switch to the browser tab which contains the template list (http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/travel). Mouse over the template and click the three dot icon and then select Enable.

pol13
Enable the template

Click the Enable button in the message that appears.  

Travel53
Click the Enable button

Create a page that is based on the editable template

You can create an Experience Manager page that is based on the editable template. Perform these steps. 

1. Click on the Experience Manager logo on the top left corner of the screen to open the global navigation.

2. Click the compass icon to switch out of the Tools menu.

3. Click on the Sites icon to open the Sites console in the Touch UI environment.

4. Select the travel folder in the First column. Delete the default en and fr pages under the travel page. These files were automatically created. Before creating the new page. ensure that these two files are deleted.

5. Click the Create button and select Page. Click on the HomeTemplate template to select it. Click the Next button.

 

Travel54
Creating a page using the editable template

6. Specify a title for your page and click the Create button. In this example, specify Home for the title and and en for the name.

pol15
Create a page

7. Click the Create button and then open the page. You will see the page with the header, the lead article and the footer compoennt (all defined in the template). 

HomePage
The Home Page

Access Core components in Edit mode

When you click on the Edit mode, notice that components defined in the Travel category are displayed in the side rail, as shown in this illustration. Some of these components are based on the Experience Manager Core components. For example, the Image component is based on the Core Component Image component. This is how this project uses Core components. 

Pol17
The components in the side rail are defined in the policy of the layout container

View the travel site in mobile emulators

You can view the travel site in a mobile emulator. The following illustration shows the Experience Manager page in an emulator.  

Pol20
The site displayed in a mobile emulator

You can view the emulator by placing the mode to Layout and then clicking the different options in the toolbar. 

Note:

You can follow the procedure in this article to create additional editable templates. Then you can create additional pages that are based on an additional template. The procedure is the same as the one that is shown in the article. 

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy