AEM Developer Series
- Day 00: AEM Developer Series
- Day 01: Introduction to AEM
- Day 02: AEM Architecture
- Day 03: Setting up AEM Development Environment
- Day 04: Developing First OSGi Bundle
- Day 05: Working with Sling Servlets in AEM
- Day 06: Playing with Sling Post Servlet
- Day 07: Creating your first component in AEM
- Day 09: Dueling with Java User API
- Day 10: Getting to know Sling Models
- Day 11: Client Libraries in Action
- Day 12: Creating your custom OSGi Configuration
- Day 13: Schedulers in AEM
- Day 14: Eventing in AEM
- Day 15: Custom Workflows in AEM
- Day 16: Creating JMX Beans in AEM
- Day 17: Working with QueryBuilder API
- Day 18: Working with Granite Datasources in AEM
- Day 19: Replication API in Action
- Day 20: Working with Users and Groups in AEM
As you may have guessed, a good way to do it to create a small entity having these fields and which is configurable and can be reused on these pages.
Here to our rescue come the AEM Components. A component as its name suggests a reusable entity that can be used anywhere on our website. As per our requirement, we can configure the same component differently on different pages (different look with the same feel 😊). A typical AEM page is composed of many such components.
Components are the building blocks of pages. A component usually contains a JSP or HTML file that contains the HTML markup and maybe some business logic for that component.
Note: Adobe recommends HTL (HTML Template Language) to be used for markup instead of JSP.
In this post, we will be creating one video component that takes video id from YouTube or Vimeo and plays the video on our page. Let's get started.
Creating the component dialog
For using the component, we first need to create a proper dialog structure in AEM
- Open CRXDE and move to your project under /apps.
- Right-Click on the desired folder, then Create..., then Create Component... and configure as per the below screenshot and save and Save All...
|Create a Component|
- Create nodes and properties under the component node as per the following XML file
- Now rename the video.jsp file to video.html and paste the below code in it
- Actually, we are configuring the values from the edit dialog (shown below) and the values we save are getting displayed dynamically in the markup using the property object.
- The values of fields in JCR are saved using the name class in each field node. The value of the name property is used to access the value in the JCR. For e.g. to access the External Link field value, we have to use property.link.
Congratulations!! 🙋 you have created your first AEM Component which displays the video as per the given WebM link. I hope you enjoyed this post.
You can find the complete code of this project on my GitHub. Feel free to fork or open issues, if any.
I would love to hear your thoughts on this and would like to have suggestions from you to make it better.
Happy Coding 😊