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