Test template 2 page

When you start to develop new components, you need to understand the basics of their structure and configuration.

This process involves reading the theory and looking at the wide range of component implementations in a standard AEM instance. This latter approach is slightly complicated by the fact that although AEM has shifted to a new standard, modern, touch-enabled UI, it continues to support the classic UI.

Overview

This section covers key concepts and issues as an introduction to the details needed when developing your own components.

Planning

Before starting to actually configure or code your component, you should ask:

• What exactly do you need the new component to do?

  • A clear specification helps at all stages of development, testing, and handover. Details may change over time, but the specification can be updated (though changes should be documented too).

• Do you need to create your component from scratch, or can you inherit the basics from an existing component?

  • There is no need to reinvent the wheel.
  • There are several mechanisms provided by AEM that lets you inherit and extend details from another component definition including override, overlay, and the Sling Resource Merger.

• Does your component require logic to select or manipulate the content?

  • Logic should be kept separate from the user interface layer. HTL is designed to help ensure this happens.

• Does your component need CSS formatting?

  • CSS formatting should be kept separate from the component definitions. Define conventions for naming your HTML elements so that you can modify them through external CSS files.

• What security aspects should I consider?

  • See Security Checklist - Development Best Practices for more details.

Touch-Enabled vs Classic UI