Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Implementation Tidbits: Components

Avatar

Employee

Banner-2x.png

Components:

Components are modular units which gives specific functionality to present content on website. These are re-usable. It can contain other components in it. These can be made available for either touch-enabled UI, Classic UI or both. It can be developed using HTL or JSP. It also has an edit behavior which can be configured. It uses dialogs to take specific information from author to build the component.

Each AEM component:

  • Is a resource type
  • Is a collection of scripts that completely realizes specific function.

Out Of Box Components:

Adobe Experience Manager (AEM) comes with a variety of out-of-the-box components that provide comprehensive functionality for website authors. They are available when editing a page and are grouped by component group to aid filtering.

Core Components and Foundation Components:

There are two sets of components available:

  • Core Components
  • Foundation Components

HTL vs JSP:

HTL is a HTML templating language, introduced with AEM 6.0 and it is the recommended scripting language for AEM.

Both HTL and JSP can be used for developing components for both the classic and the touch-enabled UI. But there is a tendency to assume that HTL is only for the touch-enabled UI and JSP for the classic UI, this is a misconception which is generated because touch-enabled UI and HTL are incorporated into AEM over approximately the same period

Extending an Existing Component:

Extending an existing component can be achieved with Resource Type Hierarchy and the related inheritance mechanisms. Components can also be redefined with an overlay based on the search path logic. However in this case, the Sling Resource Merger will not be triggered and /apps must define the entire overlay.

It is also possible to override a component dialog using the Sling Resource Merger and defining the property sling:resourceSuperType.

This means you only need to redefine the required differences, as opposed to redefining the entire dialog (using sling:resourceSuperType). This is now recommended method for extending a component dialog. You can refer this link to know clearly about how to Develop AEM Components.

Defining The Markup:

Component are rendered with HTML. Components needed to be define the HTML to take the required content and then render it as required, on both the author and publish environments. The HTML Templating Language (HTL), introduced with AEM 6.0, takes the place of JSP (Java Server Pages) as the preferred and recommended server-side template system for HTML. For web developers who need to build robust enterprise websites, HTL helps to achieve increased security and development efficiency.

Developing the Content Logic:

Logic Computes the content to be rendered. It is invoked from HTL expressions with the appropriate Use-API pattern.

The mechanism to separate logic from appearance helps clarify what is called for a given view. It also allows differing logic for different views of the same resource.

Using Java: This allows you to use Java code to implement the logic for selecting and configuring the component content.

Using JavaScript: This allows you to use JavaScript code to implement the logic for selecting and configuring the component content.

Using Client-Side HTML Libraries: Modern websites rely heavily on client-side processing driven by complex JavaScript and CSS code. Organizing and optimizing the serving of this code can be a complicated issue.

To help deal with this issue, AEM provides Client-side Library Folders, which allow you to store your client-side code in the repository, organize it into categories and define when and how each category of code is to be served to the client. The client-side library system then takes care of producing the correct links in your final web page to load the correct code.

You can refer this link for Creating and Configuring Dialog as well as Edit Behaviour.



0 Replies