The goal for this multi-part tutorial is to teach a developer how to implement a website using the latest standards and technologies in Adobe Experience Manager (AEM). After completing this tutorial a developer understands the basic foundation of the platform and has knowledge of common design patterns in AEM.
The implementation works as-is on AEM 6.3.1 + the Style System Feature Pack. Many of the topics apply to all versions of AEM. The site is implemented using:
- Sling Models
- Touch UI
- Core Components v2
- Editable Templates
- Style System New!
Estimate 1-2 hours to get through each part of the tutorial.
A previous version of this tutorial existed that used Core Components v1. The code for each chapter of the previous tutorial can continue to be found here.
Developers are encouraged to revisit the new version as it includes the latest Core Components and Style System.
All of the code for the project can be found on Github in the AEM Guide repo:
In addition, each part of the tutorial has its own branch in GitHub. A user can begin the tutorial at any point by simply checking out the branch that corresponds to the previous part.
Any issues or problems with the tutorial please create an Issue on Github.
The WKND is a fictional online magazine and blog that focuses on nightlife, activities, and events in several international cities. To make this tutorial closer to a real-world scenario one of Adobe's talented UX designers created the mockups for the site. Over the course of the tutorial various pieces of the mockup are implemented into a fully authorable AEM site. Special thanks to Lorenzo Buosi who created the beautiful design for the WKND site.
Below is an overview video of the site and functionality.
Project Setup - Covers the creation of a Maven Multi Module Project to manage the code and configurations for an AEM Site.
Maven, Lazybones Template, Eclipse IDE, Core Components, SCM, and Github.
Creating a Base Page and Template - Covers the creation of a base page and an editable template. Core Components are proxied into the project.
Editable Templates, Core Components, Content Authoring
Developing with the Style System - Covers extending Core Components with brand-specific CSS and leveraging the Style System to create multiple variations of components. This part also uses Content Fragments for long form article content and covers some advanced policy configurations of the Template Editor.
CSS, Style System, Template Editor Policies
Navigation and Search - Covers dynamic navigation driven by the content hierarchy and fixed navigation populated by content authors. Sling Models, HTL templating language, and dialogs are used to implement the Header and Footer navigation. A Quick Search component is also added to the Header.
HTL, Design Dialogs, Composite Components
Sling Models and Card Component - Covers the end to end creation of a custom card component that displays a teaser image, title, and description backed by an article page. Includes developing a Sling Model to encapsulate business logic to dynamically populate the card component and corresponding HTL to render the component. Also includes the creation of a design dialog to integrate the Style System in a custom component.
Sling Models, HTL, Style System, Custom Components