AEM Development - Component Development in AEM

 AEM Development - Component Development in AEM

1. How to generate a Standard Component in AEM
2. What are the Standards to follow while creating a New Component
3. Component Structure - Component Elements
4. Component Types

In AEM Development - Component is the basic term used to frequently, in AEM everything is a Component.

Most of the time, every one thinks like Components are used by Content authors by dragging and dropping on a Page from the Side Kick / Side Rail, when they are authoring a page.

Component Development and Design Standards

whenever a developer to start a new component development, it is better to understand following things before starting the development.

• Business requirement and functionality
• Compatibility of these requirements with AEM OOB / Core Components
• Some times, it will be useful, if you explain the business owner about the AEM Standards and limitations for a component development
• Component Types 
• Drag and Drop Component (Draggable Components)
• Embedded Components (These will be embedded directly to a Page, instead of allowing author to Drag and Drop)
• Page Component ( It is the initial component that loads the page. )

AEM Development - Configuring System User / Login Service

 AEM Development - Configuring System User / Login Service

1. How to create a System User in AEM
2. How to set up access rights to System User - accessing JCR Repository / Nodes
3. How to set up a user with Usermapper Service

System User Background:

Prior to AEM 6.2 version, System Users are not required to access OSGi Services in AEM

After depreciation of Login Administrative method , now Adobe suggested to create and configure System User for all session to access OSGi services.

To access the JCR nodes in the repository , authentication is required to properly set up access control and secure the data from unauthorized access or corruption.

For regular request processing authentication is handled by Sling Authentication subsystem 

On the other hand there are also some background tasks to be executed with access to the resources. Such tasks cannot in general be configured with user names and passwords: Neither hard coding the passwords in the code nor having the passwords in – more or less – plain text in some configuration is considered good practice. 

Reference:

https://sling.apache.org/documentation/the-sling-engine/service-authentication.html

AEM Development with Sling Models

 AEM Component Development using Sling Models

• How to build a Sling Model That Injects a variable 
• How to pass a variable / parameter to the Sling Model

Sling Models:

• Sling Models Provide a Framework for development
• Sling Models are completely driven with Annotations based
• It uses Annotations Based Plain Old Java Objects (POJOs)
• They are adaptable to multiple objects, including Resource and SlingServletRequest
• Annotations in Sling Models handle inputs
• OOB - Out of the box, Sling Models work with:
• Sling Bindings
• OSGi Services
• Request Attributes

AEM 6.5 - Create and Use Templates to Build A Page

 AEM 6.5 - How to Create Templates to Build a Page in your Site

Editable Template vs Static Templates

Template Types

1) Static Templates - Must be defined, develop and configured by AEM Developers

• Static templates are stored under /apps folder in crx/de repository
• We have to use Design Mode to do changes
• Uses Design mode to persist the design properties
• Changes / Modification to the static template will not apply or reflect directly / immediately to the pages created using the respective template

 2) Editable Templates - Can be created and modified by Authors - Template editors

• Editable Templates are stored under /conf folder in crx/de repository
• Uses content policies to persist the design properties
• Changes to editable templates should use policy
• Any changes to Editable Templates will directly impact / apply  on the pages created

How to Create Static Templates and Editable Templates and Configure content policies

To create a Static template - in your AEM author instance open crx/de --> then go to /apps folder

• /apps/<your project folder> / templates
• select templates node - right click and select Create Template option
• In the Create Template Dialog enter Label, Title, Description 
• Resource Type **  this filed defines the page component which will be rendering the pages which are created using this template
• we will provide page rendering component path in this Resource Type
• /apps/<your project folder>/components/structure/rootPage
• The ranking defines the order of this template
• Allowed paths - we have to provide the path, where this template can be available - /content/*
• Allowed Parents - To restrict the usage of the template by giving allowed parents
• Allowed Children - same like allowed parents to restrict the usage of template (you can leave empty for now)

Now - we have to create the rootPage component under apps

• go to crx/de /apps/<your project folder>/component/structure
• right click and select create component option

in Component create dialog enter details

• label - root-age
• Title - Root Page
• Description - Root Page Component
• Super Type - Super Type defines the parent of the component
• we can use the OOB component available /libs/foundation/components/page

Now go to your Sites and your project site, Create Page and Select Template to create a new page

==========================================================================

Editable Templates

1) How to create Editable Templates

2) How to set up initial content

3) What are the benefits using Editable Templates

Editable Templates and Its Benefits:

• Editable Templates allow Template Author to Create and Edit Templates , remove dependency on developers
• Editable Templates maintain the relation between the pages created using editable templates, it means, any changes or updates to the editable template will apply or reflect immediately to the pages created of that template
• Make the page component more generic so that the core page component can be used without customization

How to Create Editable Templates?

• To create editable templates - first we have to create a project folder in Configuration Browser
• Go to AEM Sites (AEM Landing Page) , then go to side navigation click Tools icon (Hammer)
• Then Select / Click on Configuration Browser
• Then Click on Create - in pop up window, enter your website name and select Editable Template Check box and click on Create.

Pop up 

Now go to Main Navigation Tools --> General --> Templates

you can see your created folder

Also - Goto - crx/de --> conf --> <your project> --> settings --> wcm

you can see 

1) templates

2) policies

3) template-types

Template node will be empty as we haven't created any template for this project

Now go back to AEM Templates folder you created in Touch UI and click on Create and then select an available Template Type 

(These template types will be available by default when you create your project with any of the AEM Arch type)

The editable templates are based on the template types

In Next window give Title and Description click on Create

Now the newly created template available in Template Editor , now we can work on this template.

In this template editor we will have 3 options

• Structure - to define the structure of the template/page
• Initial Content - Initial content which is going to be available to the pages that are created using this template
• Layout - we can define all the components and layout the 

AEM - Content Rendering on a Page

 AEM - Content Rendering on a Page

1) How the content will be displayed or content rendering happen in a AEM Web Page or HTML page

2) Sling Script Resolution (From User HTTP Request to render the content - process steps)

AEM is built on Sling, SLING is a web application framework based on REST Principles that provides easy development of content-oriented

applications like AEM

Sling is Content centric - for Sling everything is Content, this means, processing is focused on Content

As each HTTP request is mapped to the Content in the form of JCR Resource, 

The first target is JCR Node holding the content and second step is representation or a script, which is located from the resource properties

with certain parts of the Request like 'Selector' or 'Extensions' 

Content Rendering in AEM will be devided into Four important steps:

1) URL Decomposition

2) Mapping Request to Resources

3) Scripts Resolution

4) Invoking Rendering Chain

======

In Sling processing is driven by the URL of the User request.This defines the content to be displayed by the appropriate scripts.

As soon as the user request through the URL, that URL is devided into various sections

1) Protocal (generally it will be HTTP)

2) Host (youcompany.com / website name / domain name) -- localhost:4502

3) Content path (which is JCR Node path) - which specify the content to be rendered (/content/us/en/products/)

4) Selectors are used for alternative rendering of the content (.country. or .mobile.)

5) Extension specifies the output format (html, json , etc), it also specified the scripts to be used for the rendering process

6) Suffix can be used to specify additional information

7) Parameters are used for Dynamic rendering of the content ( ?country=US)

Once the URL decomposition is complete - Mapping of request to resources is done

within in Sling - scripts can not be called directly -- this will break the Concept of REST - which mix Resources and Representations

Once you have found the content to be rendered - we look for the script, which can render the content

will do that by looking into sling:resourceType Property

Once the content to be rendered found in the repository , the location of the script will found using sling:resourceType property

All sling scripts are stored in subdirectories of /apps or /libs directory

/apps directory has the Higher preference than /libs directory

So the path found in sling:resourceType - will go and search in /apps directory and then go to /lobs directory

If multiple scripts apply for a given request - the script will be selected with the BEST MATCH 

we can refer to APACH SLING CHEAT SHEET for more details

AEM Design - Page Design from mockups and wireframes

 AEM Design Concepts:

How do you design AEM Pages?, where to Start

How do you identify the Templates , Components, Initial Content etc.

AEM Page Structure

-Describe the basic Structure of the AEM Page

-Identify Templates and components in a Page

1) AEM Page is an instance of a Template where components render the actual content

2) Templates define the basic structure of a Page

3) Templates Specify the components used within the selected Scope

4) Components are re-usable modular units that determine specific functionality to display content on page

It is better to start work on Templates and Components after approved design or mock ups / wireframes

Template and Component identification depends on the Business requirements / wireframes / mockups

Deconstructing wireframes - to identify the structure - Separate Header, Footer and Body sections of the page

Examine all pages - and identify the STRUCTURAL similarities

Pages have different content may have SAME Template

while deconstructing the page - you have to consider - Ownership of the Template and ownership of the Page

Developer / Technical - responsible for Template design and development 

The content authors are responsible for creating page using Template

Developer should provide flexibility and appropriate number of Templates for different pages

Once the UNIQUE Templates are identified - developer has to identify the Fixed components like Logo, Top Navigation, Header and Footer 

Also identify the INITIAL content on pages

Once developer identify the Unique Templates and Fixed Components , Initial Components, Initial Content - you have to identify REUSABLE components

which can be used on the pages

Based on the requirement - you can use OOB components, customize OOB Components or write complete Custom Components

AEM - Development Best Practices

 AEM - Development Best Practices

AEM - Upgrade to 6.5

 AEM Upgrade 6.5 Tasks

Upgrading Code and Customization

• Pattern Detector

• Develop Code base for 6.5

• Compile with 6.5 Uber.jar

• Update AEM customizations

• Deploy to 6.5 Environment

• QA Validation and Bug Fix

AEM - Upgrade to 6.5

 AEM Upgrade to 6.5

Post Upgrade Checks

• Verify logs for upgrade success

• Verify OSGi Bundles

• Verify Oak Version

• Inspect the PreUpgradeBackup folder

• Initial Validation of Pages

• Apply AEM Service Packs

• Migrate AEM features

• Verify Scheduled Maintenance Configurations

• Enable Replication Agents

• Enable Custom Scheduled Jobs

• Execute Test Plan

AEM - Certification Preparation

 AEM - Lead Developer - Certification Preparation

AEM - Extending Core Components

 AEM - Core Components

Extending Core Components

Custom Components

AEM - Admin Guide

 AEM - Administration

what are the typical admin tasks in AEM development?

AEM - Classic UI to Touch UI - Coral UI 2 to Coral UI 3 Challenges

 AEM - Classic UI to Touch UI - Coral UI 2 to Coral UI 3 Challenges

From AEM 6.5 - Cloud Manager and AEM as Cloud Service are introduced

AEM 6.5 Supports Coral UI 3, if you are going to upgrade it is recommended to convert all existing components to use Coral UI 3 elements.

AEM Servlet vs OSGi Service

 AEM Servlet vs OSGi Service

when to use AEM Servlet , when to use OSGi service

Sling Servlet vs OSGi Service

AEM - How to debug an issue?

 AEM - How can I debug an issue in AEM

1) Verify the logs - author / publish / dispatcher

2) Based on the issue type -

    i) first check the author URL

    ii) second check the URL can be access in Publish URLs (ELB)

    iii) three dispatcher url and logs - find the URL

AEM - Planning you upgrade to 6.5?

 

Description

Adobe has launched new version of Adobe Experience Manager 6.5 on April 8, 2019. Adobe Experience Manager 6.5 delivers innovations that enable marketers & IT professionals to collaborate on the rapid delivery of personalized brand experiences

            Upgrade process depends on the source version from where you are trying upgrade and the destination version to which you are upgrading to.

Key Activities:

o Identify existing code customizations and assess upgrade impact

o Prepare upgrade plan with consideration of all ongoing Client development 

o Team will plan, execute and review development sprints

o Replicate web platform code bases onto upgraded environments to make sure all applications and custom code still run as desired

o Create production ready software code

o Execute upgrade plan including custom applications and integrations

o Execute project restructuring according to repository restructuring introduced in Adobe AEM New Archtype (Archtype 22 or 23)

AEM - Resource Mapping

 Resource Mapping

Resource mapping is used to define redirects, vanity URLs and virtual hosts for AEM.

For example, you can use these mappings to:

Prefix all requests with /content so that the internal structure is hidden from the visitors to your website.

Define a redirect so that all requests to the /content/en/gateway page of your website are redirected to https://gbiv.com/ .

AEM - Caching

 AEM - Caching

how we can Cache content in AEM Websites

AEM - Upgrade Checklist

 Are you going to upgrade to AEM 6.5?

Prepare your checklist 

Runbook / Playbook preparation

AEM Sling and Serverless

 AEM Sling 

AEM Sling and Serverless

AEM Workflows

 AEM Workflows

How to write AEM Workflows - 

What permissions - required

AEM - Dispatcher Rules

 AEM - Dispatcher Rules

how the new Dispatcher 2.0 will be enabled in AEM

Outline the steps and structure.

AEM - The new Resource Mapping

 

AEM - The new Resource Mapping SPI and how to use it in AEM

Resource Mapping in AEM - We use etc/map

JcrResourceResolverFactoryImpl configs 

AEM - Code Quality Rules

 AEM - Code Quality   

How to write good quality code in AEM?

SonarQube Validations. / SonarQube Rules

AEM - Sling Distribution

 AEM - Sling Distribution

AEM Architecture 

1-AEM Author

2-AEM Publish

2-Dispatcher

how the Client Generated Content will receive?

AEM - Sling Scheduling

 AEM - Sling Scheduling

how to create a scheduler in AEM

AEM - Sling Dynamic Include

 AEM - Sling Dynamic Include

Sling Filter

-The filter works on components level

-The filter produces SSI tag for specific

components instead of markup

-Apache detects SSI and makes additional

request for the markup

AEM Sites - Headless CMS

 AEM Sites - Headless CMS

• HTTP REST API for Content Fragment-CRUD operations
• Bulk delivery of fragment structure and content
• Output in JSON format that can be consumed across SPA, Mobile App, IoT App and more

AEM - Component Life Cycle

 AEM - Component Life Cycle

AEM - Testing

 AEM - Testing

how to perform testing in AEM websites?

Developer - JUNIT testing / mock it

AEM - Security

 AEM - Security

AEM - Operations

 AEM - Operations

AEM-Backend Development

 AEM - Backend Development

1. Writing AEM Sling Servlets
2. AEM and Sling Logging - Log service configuration
3. AEM Sling EventHandler - Eventing
4. AEM JCR Observation
5. AEM Sling Scheduling - Schedulers
6.  AEM Sling Models
7. AEM Sling Dynamic Include
8. AEM Sling Model Exporter
9. AEM Backend Coding Practices - Best Practices

AEM - Overview

 AEM-Overview 

Daily work details with AEM Author , Publish and Dispatcher

working with AMS

AEM - Sling Mappings

 AEM - Sling Mappings

Resource Resolution Is the key functionality in AEM - Adobe Experience Manager

AEM- Data Flow

 AEM- Data Flow

AEM-Servlets with OSGi DS latest annotations

 AEM-Servlets

With new OSGi Declarative Services

Prerequisites:

• bnd 4.0+ via
• bnd-maven-plugin 4.0+ or
• maven-bundle-plugin 4.0+
• DS 1.3 (AEM 6.1+)
• Maven Dependency

<dependency>

<groupId>org.apache.sling</groupId> <artifactId>org.apache.sling.servlets.annotations</artifactId> <version>1.1.0</version>

</dependency>

@Component(service=Servlet.class)

@SlingServletResourceTypes( resourceTypes="/apps/my/type", selectors= {"hello"})

public class ResourceTypeBoundServletWithSelectors extends SlingSafeMethodsServlet 

{...

}

AEM - Clientlibs

 AEM - Clinetlibs

ui.apps

src/main/content/jcr_root/apps/<project-name>/clientlibs

1)clientlib-author

2)clientlib-base

3)clientlib-dependencies

4)clientlib-site

5)vendor

AEM - website development with core components and HTL

 Website development with Sling Models and HTL using Core Components

Advantages of using core components in website development

• Shorter time to value
• Build Websites Faster

Core Components - Technical

• HTL markup
• Clean, HTML-based templating language
• Use-objects
• Sling Models
• POJOs
• Javascript

AEM - Component Development

 AEM - Component Development

AEM - Extending Core Components

Creating Custom Components

AEM- Editable Templates

 AEM - Editable Templates and Its concepts

AEM - Sling Dynamic Include

 Sling Dynamic Include

SSI - Server Side Include

ESI - Edge Side Include

AEM-OSGi

 AEM-OSGi - Declarative Services

OSGi component development or Modular development

AEM - Dispatcher

 AEM -  Dispatcher

In AEM - Dispatcher set up is very important concept

AEM - Solution Design Document

 In AEM - How to write a Solution Design Document for a business requirement.

AEM - Overview

AEM - Core Concepts

1-Sling

2-JCR 

3-OSGi

4-HTL / Sightly

Java Content Repository

The Java Content Repository (JCR) standard, JSR 283 , specifies a vendor-independent and implementation-independent way to access content bi-directionally on a granular level within a content repository.

Sling Request Processing

Introduction to Sling

AEM is built using Sling , a Web application framework based on REST principles that provides easy development of content-oriented applications. Sling uses a JCR repository, such as Apache Jackrabbit, or in the case of AEM, the CRX Content Repository, as its data store. Sling has been contributed to the Apache Software Foundation - further information can be found at Apache.

Using Sling, the type of content to be rendered is not the first processing consideration. Instead the main consideration is whether the URL resolves to a content object for which a script can then be found to perform the rendering. This provides excellent support for web content authors to build pages which are easily customized to their requirements.

The advantages of this flexibility are apparent in applications with a wide range of different content elements, or when you need pages that can be easily customized. In particular, when implementing a Web Content Management system such as the WCM in the AEM solution.

Sling is Content Centric

Sling is content-centric . This means that processing is focused on the content as each (HTTP) request is mapped onto content in the form of a JCR resource (a repository node):

the first target is the resource (JCR node) holding the content

secondly, the representation, or script, is located from the resource properties in combination with certain parts of the request (e.g. selectors and/or the extension)

RESTful Sling

Due to the content-centric philosophy, Sling implements a REST-oriented server and thus features a new concept in web application frameworks. The advantages are:

very RESTful, not just on the surface; resources and representations are correctly modelled inside the server

removes one or more data models

previously the following were needed: URL structure, business objects, DB schema;

this is now reduced to: URL = resource = JCR structure

OSGI

OSGi defines an architecture for developing and deploying modular applications and libraries (it is also known as the Dynamic Module System for Java). OSGi containers allow you to break your application into individual modules (are jar files with additional meta information and called bundles in OSGi terminology) and manage the cross-dependencies between them with:

services implemented within the container

a contract between the container and your application

These services and contracts provide an architecture which enables individual elements to dynamically discover each other for collaboration.

An OSGi framework then offers you dynamic loading/unloading, configuration and control of these bundles - without requiring restarts.

AEM Servlets

AEM Servlets

How to create Servlets in AEM

AEM Component Development

AEM Component Development

In generally we can refer anything is a component;

For example in a web site, home page is collection of many components

For example:

Header Component

Footer Component

Carousel Component

Hero Banner or Hero Slide Component

like, we have many page components or author-able components

We need to understand Component Basics

What are Components?

Modular units which realize specific functionality to present your content on your website.

Re-usable.

Developed as self-contained units within one folder of the repository.

AEM Upgrade - Few Important Items

AEM Upgrade - Few Important Items

Current AEM version is 6.5.x

Based on your current version 6.x to 6.5.x, It is better to follow the AEM Best Practices.

Adobe is offering now AEM as a Cloud Service, If you want to update your current version to AEM as a Cloud Service, it is better to upgrade to AEM 6.5 version and make sure this version is compatible with Cloud Manager.

Upgrade can be divided in to 3 phases

1) Discovery

2) Implementation

3) Optimization

AEM - Sling Models

Day # 1

AEM - Sling Models

In AEM Component development Sling Models concept has brought up a revolutionary change and it eases the component development.

Sling Models - Is Plain Old Java Objects (POJO) or a Model Class.

Business Use Case For Sling Model:

Develop a Custom Component where the Author can configure or Author Some content in a Dialog, the same content will be saved to JCR Nodes (Repository), based on the Business requirement, the authored content will be presented to Client in HTML page (using HTL and Sling Models)

The traditional use case for a Sling Model to provide a Business abstraction for a RESOURCE or a REQUEST , which provides the HTL scripts and interface for accessing the business function.

Common patterns for developing a sling model that represents an AEM component in pages using sling model object to create HTL scripts with data and END result of HTML that displayed on the browser.

Information flow in a Sling Model that starts with the HTTP Get Request to a RESOURCE in AEM , based on the Request, requested resources, sling:resourceType

appropriate script is selected.

Then the script is ADAPTS the REQUEST or RESOURCE to the desired SLING Model, the script use the Sling Model Object to generate the HTML rendition

The HTML generated by the HTL script is return in the HTTP Response.

Day # 2

Sling Models:

What we can do with the Sling Models or What Sling Models do in AEM Page development

1) Sling Models is a Frame work for component development or Simply for development

2) Sling Models allows you to use annotation driven Plain Old Java Objects (POJO s)

3) They are adaptable to multiple objects, including Resource and SlingServletRequest

4) Annotations in Sling Models will handle the Inputs

5) Out of the box (OOB), Sling Models work with

    - Sling Bindings

    - OSGi Services

    - Request Attributes

Best Practices in Sling Models