Components in AEM

Components in AEM

 

There are several types of components in Adobe Experience Manager (AEM), including OOTB, Custom, WCM, Foundation, and Core components.

1.      OOTB (Out-of-the-Box) Components: These are the components that come pre-built with AEM and are ready to use. As mentioned earlier, AEM provides a wide range of OOTB components such as text, image, list, navigation, social, form, media, search, layout, and miscellaneous components.

The OOTB components are located in the following directory:

/libs/wcm/core/components

This is the default location for AEM's Core Components. Other OOTB components may be located in different locations depending on the AEM version and configuration.

2.     Custom Components: These are components that are created by developers to meet specific business requirements. Custom components can be built from scratch or can be based on existing OOTB components. Developers can use AEM's component framework to build custom components that are integrated with AEM's content and authoring capabilities.

The custom components are typically stored in the following directory:

/apps/[project-name]/components

The [project-name] refers to the name of the project or application that the components are being created for. Developers can create and organize custom components in subfolders within the /apps directory.

3.     WCM (Web Content Management) Components: These components are specific to web content management and are provided by AEM to help content authors create and manage content on web pages. WCM components include components such as teaser, title, text, and image components.

The WCM components are located in the following directory:

/libs/wcm/foundation/components

4.     Foundation Components: These components are basic building blocks for creating web pages. Foundation components are simple and lightweight and include components such as button, alert, and table components.

The Foundation components are located in the following directory:

/libs/foundation/components

5.     ACS Commons Components: a popular open-source library of reusable AEM components and features developed by Adobe Consulting Services (ACS). The ACS Commons library includes several core components that are widely used in AEM implementations.

The ACS Commons core components are typically located in the following directory:

/apps/acs-commons/components

In summary, AEM provides a wide range of OOTB components as well as component libraries such as WCM, Foundation, and Core, which developers can use to create custom components that are integrated with AEM's content and authoring capabilities.

Some of the most commonly used OOTB components in AEM include:

1.       Text components: Rich Text, Plain Text, Text Area, Title, and Subtitle.

2.       Image components: Image, Image Map, Image Hotspot, and Image Carousel.

3.       List components: Unordered List, Ordered List, Definition List, and Nested List.

4.       Navigation components: Breadcrumb, Navigation, Language Navigation, and Pagination.

5.       Social components: Social Sharing, Social Media Links, and Social Media Feed.

6.       Form components: Form Container, Form Components (Text Field, Text Area, Checkbox, Radio Button, Dropdown List, etc.), and Form Submit Button.

7.       Media components: Video, Audio, and Document Download.

8.       Search components: Search Box and Search Results.

9.       Layout components: Column Control, Container, and Row.

10.   Miscellaneous components: Accordion, Tabs, Table, Code Highlighter, and Embed.

These OOTB components are designed to be customizable, and AEM provides tools for developers to modify and extend these components to meet specific business requirements. This allows for the creation of unique and engaging web pages while maintaining consistency and adherence to brand standards.

A component constitutes

1.           FrontEnd

a.       component.html - This element defines the HTML markup that will be rendered when the component is displayed on a web page. It can include standard HTML tags, as well as AEM-specific tags that allow for dynamic content and interaction with other AEM components.

b.       cq:dialog - This element defines the dialog box that appears when editing the component in AEM's authoring interface. It is used to specify the fields and properties that can be configured for the component.

c.       clientlibs Client are used to manage and serve client-side assets such as CSS, JavaScript, and images. They allow you to bundle multiple files together into a single package, which can then be easily included on web pages or components.

a.       js - This is a directory, containing .js files having JavaScript code that is required for the component to function properly. It can include scripts that handle user interaction, data processing, and other functionality.

b.       js.txt

c.       css - This is a directory, containing .css files having styling for the component. It can include CSS rules that control the appearance and layout of the component.

d.       css.txt

d.       cq:design_dialog - the cq:design_dialog node is used to define the design-time configuration for a component. It is similar to the cq:dialog node, which is used to define the configuration dialog that appears when editing a component in AEM's authoring interface, but is instead used to define the configuration dialog that appears when designing the component's layout.

e.       ca:editConfig - This element defines the editing configuration for the component, such as the toolbar buttons that are available when editing the component.

a.       cq:inplaceEditing - This node is used to enable inline editing of a component's content in the authoring interface. It allows authors to edit the content of a component directly on the page, without having to open a separate edit dialog. The cq:inplaceEditing node can contain various elements, such as the path to the editable node, the type of editing widget to use, and any options or configurations for the widget.

b.       cq:dropTargets - This node is used to define drop zones for a component, allowing other components or assets to be dragged and dropped onto it. The cq:dropTargets node can contain various elements, such as the type of drop zone, the allowed drop types, and any event listeners or handlers for when items are dropped onto the zone.

c.       cq:listeners - This node is used to define event listeners and handlers for a component. It can be used to trigger custom functionality or behavior based on user interactions or other events. The cq:listeners node can contain various elements, such as the event to listen for, the type of listener or handler to use, and any additional configuration or options for the listener.

 

2.           Backend

a.       Javascript Controller – This is used to provide interactivity to a component. A controller is a JavaScript file that defines functions that can be called from within the component's HTML or other JavaScript files.

OR

b.       WCMUse Class(WCMPojo) - WCMUse class is used to provide server-side logic and data to an AEM component. The WCMUse interface is a Java interface that components can implement to provide custom logic and data for rendering.

OR

c.       Sling Model(Recommended) - The Sling Model is a Java class that allows you to map the properties of a resource to a Java object. It's a powerful tool that provides a convenient and type-safe way to interact with AEM content.

 

Apache Sling in AEM

Apache Sling in AEM

Apache Sling is a RESTful web framework that is designed specifically for use with Adobe Experience Manager (AEM). Using a REST framework can simplify the process of building custom web services. REST framework can provide additional features and functionality that may not be available in AEM's built-in web services.

REST framework may provide support for authentication and authorization, error handling and validation, and content negotiation. This can be particularly important for enterprise-level web services that require a high degree of security and scalability.

Using a REST framework can make it easier to integrate AEM with other systems and services. Many modern web applications use RESTful APIs to communicate with other systems, and using a REST framework can help developers build web services that are interoperable with these systems.

There are several reasons why Sling is considered the best REST framework for AEM:

1.       Sling is tightly integrated with AEM: Sling is built on top of AEM and is designed to work seamlessly with AEM's underlying architecture. This tight integration means that Sling can take advantage of many of AEM's built-in features and functionality, such as the ability to manage content, handle user authentication and authorization, and more.

2.       Sling is lightweight: Sling is designed to be lightweight and modular, which makes it easy to use and customize. This lightweight design also means that Sling has a small footprint and can be deployed quickly and easily.

3.       Sling is flexible: Sling is designed to be highly flexible and can be used to build a wide range of RESTful web services. Sling supports a variety of data formats, including JSON and XML, and can be used to build web services that support multiple HTTP methods, such as GET, POST, PUT, and DELETE.

4.       Sling is scalable: Sling is designed to be scalable and can handle high volumes of traffic and requests. Sling includes a caching layer that can help to improve performance and reduce latency, and can be configured to work with distributed systems.

5.       Sling has a strong community: Sling has a strong and active community of developers who contribute to the project and provide support and resources for developers using the framework. This community-driven approach means that Sling is constantly evolving and improving, and that developers have access to a wealth of resources and knowledge.

Sling is considered the best REST framework for AEM due to its tight integration with AEM, lightweight and flexible design, scalability, and strong community support.

·         Sling started as an internal project of Day management and was included in the installation of AEM.

·         It has since been contributed to the Apache Software Foundation.

·         It is Content-centric framework. Sling application used either server side JavaScript or Java servlets.

·         Selected according to simple naming convention to process HTTP request in a RESTful way.

·         The embedded Apache Felix OSGI framework & console, provides a dynamic runtime environment where code & content bundles can loaded, un-loaded & re-configured at runtime.

Introduction to Apache Sling

·         Apache Sing is a Content-centric that means that when processing a request, it first finds the content then based on the content and request data determines how to render it.

·         Sling framework uses a JCR based repository as its data storage. In AEM all its data including the content, application binaries and configurations are all stored in the JCR repository.

·         When processing a web request Apache Sling resolves the request URL, analyze the content at the resolved paths and determines which script in the repository should be executed for rendering content view.

·         In addition, a part of that framework provides a very powerful functionality for component and dialogs inheritance.

 

CRX DE Lite in AEM

 CRX DE Lite

CRX DE Lite is a web-based tool in Adobe Experience Manager (AEM) used for content and code management.

It is a lightweight version of the CRX (Content Repository Extreme) Development Environment (DE) and is designed for developers who need to work with the AEM repository, but do not require the full functionality of the CRX DE.

CRX DE Lite provides a user interface for performing various repository-related tasks such as browsing, creating, and editing nodes, properties, scripts and content. It also provides a console for executing code, debugging, and testing workflows.

When you go to http://localhost:4502/crx/de, below is the interface that opens up as a start up page

pic credits : https://experienceleague.adobe.com

In CRX DE Lite, there are several important folders that play a significant role in managing and organizing content and code within Adobe Experience Manager (AEM). These folders are:

1.       /apps: This folder contains all the AEM applications that are installed on the server. It is used to manage custom code and configurations specific to each application.

a.       /apps/<project-name>: This folder contains the custom code and resources for a specific project or application. The name of the folder corresponds to the name of the project for which the custom code and resources are being stored.

b.       /apps/<project-name>/components: This folder contains the custom components that are created for a specific project or application. Custom components are typically used to display content on web pages and provide custom functionality.

c.       /apps/<project-name>/config: This folder contains the configuration settings for a specific project or application. The configuration settings can include various settings such as the site URL, language settings, and other project-level settings.

d.       /apps/<project-name>/templates: This folder contains the custom templates that are created for a specific project or application. Custom templates are typically used to define the layout and structure of web pages.

e.       /apps/system: This folder contains the custom code and resources that are used to extend the core system functionality of the AEM platform. Custom code and resources in this folder can be used to modify or enhance the core AEM components and services.

2.       /content: This folder contains all the content that is stored in AEM. It includes pages, assets, and other types of content that are created and managed by authors.

a.       /content/<website-name>: This folder contains the content assets for a specific website or web application. The name of the folder corresponds to the name of the website or web application for which the content assets are being stored.

b.       /content/dam: This folder contains the digital asset management (DAM) assets such as images, videos, and other media files that are used to create web pages and other digital experiences.

c.       /content/<website-name>/en: This folder contains the English language version of the content assets for a specific website or web application. The name of the folder corresponds to the language of the content assets being stored.

d.       /content/<website-name>/en/<page-name>: This folder contains the content assets for a specific web page within a website or web application. The name of the folder corresponds to the name of the web page for which the content assets are being stored.

e.       /content/campaigns: This folder contains the content assets that are used for various marketing campaigns such as email campaigns, social media campaigns, and other promotional activities.

3.       /etc: This folder contains system-level configurations for AEM. It includes configurations for workflows, users, and groups, among others.

a.       /etc/designs: Contains design configurations for the system.

b.       /etc/map: Contains configuration for mapping URLs to content.

c.       /etc/replication: Contains configuration for the replication of content between AEM instances.

d.       /etc/tags: Contains tag configurations used by the system.

e.       /etc/workflow: Contains configuration for the AEM Workflow engine.

4.       /libs: This folder contains all the OSGi bundles that are installed on the server. It includes the core AEM functionality, as well as any additional libraries and dependencies that are required by the system.

a.       /libs/cq: This folder contains the core components and resources that are used by Adobe Experience Manager (AEM) to provide various functionalities such as page authoring, workflows, and analytics.

b.       /libs/wcm: This folder contains the core components and resources that are used for web content management in AEM. It includes templates, components, and workflows for creating and managing web content.

c.       /libs/foundation: This folder contains the foundation components that are used to build the AEM platform. It includes various scripts, servlets, and services that provide functionalities such as caching, logging, and security.

d.       /libs/granite: This folder contains the core components and resources that are used for user authentication, personalization, and other user-related functionalities in AEM.

e.       /libs/cq/security: This folder contains the security-related components and resources that are used to secure the AEM platform. It includes components for authentication, authorization, and encryption

5.       /tmp: This folder is used for temporary file storage. It is cleared on server restart and is not meant for long-term storage.

a.       /tmp/package: This folder contains the temporary files that are generated during the creation and installation of AEM packages. AEM packages are used to distribute code, content, and other resources between different AEM instances.

b.       /tmp/logs: This folder contains the log files that are generated by various AEM components and services. The log files are used for troubleshooting and monitoring the performance of the AEM platform.

c.       /tmp/workflow: This folder contains the data and files that are generated during the execution of AEM workflows. AEM workflows are used to automate various content-related tasks such as publishing, review, and approval processes.

d.       /tmp/crx-repository: This folder contains the temporary data and files that are generated during the normal operation of the CRX repository, which is the underlying database that powers the AEM platform.

e.       /tmp/launcher: This folder contains the temporary files and data that are generated by the AEM launcher service, which is responsible for starting and stopping various AEM components and services.

6.       /var: This folder contains runtime data and logs for AEM. It includes information about requests, responses, and other system-level information.

a.       /var/clientlibs: This folder contains the client library files that are used to deliver CSS, JavaScript, and other assets to web pages and other digital experiences.

b.       /var/classes: This folder contains the compiled Java classes that are used by various AEM components and services.

c.       /var/commerce: This folder contains the data and configurations that are used by the AEM Commerce module, which provides tools for building and managing e-commerce websites.

d.       /var/cq: This folder contains the configurations that are used by various AEM components and services, including the OSGi configuration files.

e.       /var/replication: This folder contains the data and configurations that are used by the AEM replication service, which is responsible for replicating content and other resources between different AEM instances.

7.      /conf: This folder contains the configuration for project templates, workflows, Content fragment model schema etc.

a.       /conf/global: This folder contains the global configuration data for the AEM platform. It includes various configuration settings such as the default user group, language settings, and other platform-level settings.

b.       /conf/<component-name>: This folder contains the configuration data for a specific AEM component. The name of the folder corresponds to the name of the component for which the configuration data is being stored. For example, the /conf/acs-commons folder contains the configuration data for the ACS Commons component.

c.       /conf/<feature-name>: This folder contains the configuration data for a specific feature of the AEM platform. The name of the folder corresponds to the name of the feature for which the configuration data is being stored. For example, the /conf/global/settings/cloudconfigs folder contains the configuration data for the Cloud Services feature.

d.       /conf/<component-name>/settings: This folder contains the configuration settings for a specific component. The name of the folder corresponds to the name of the component, and the "settings" subfolder contains the configuration data.

These folders play a critical role in organizing content and code within AEM. They allow for separation of concerns between applications, content, and system-level configurations, which makes it easier to manage and maintain the system over time. Developers and administrators can use these folders to manage custom code, create and edit content, and configure the system to meet their specific needs.