Components
Components are modular, re-usable units that implement specific functionality/logic to render the content of your Web site. They have no hidden configuration files, can include other Components, and can run anywhere within AEM or in isolation (e.g. portal). A Component could be described as a collection of scripts (e.g. JSPs, Java servlets, etc.) that completely realize a specific function. More specific, a “Page” Component is typically referenced by a Template.
A Component could be described as a collection of scripts (e.g. JSPs, Java servlets, etc.) that completely realize a specific function. In order to realize this specific functionality, it is your responsibility to create any necessary scripts that will do so. Typically, a Component (“Page” or otherwise) will have at least one default script, identical to the name of the Component (e.g. contentpage.jsp). Notice that the creation of the component results in the creation of the default contentpage.jsp script.
Dialog
Dialog is a key element while developing components which provide content authors the ability to write content.
It gathers user input via a “form”, potentially validates it, and then makes that input available for further use (storage, configuration, etc.).
AEM makes use of the popular ExtJS JavaScript framework. It allows developers the ability to easily create Rich Internet Applications (RIA) through the use of AJAX. It includes:
■ High performance, customizable UI widgets
■ Well designed and extensible Component model
■ An intuitive, easy to use API
In relation to the Component the Dialog is being created for, the root node of the Dialog has to be of node type “cq:Dialog” and named “dialog”. Below this Dialog root node, the nodes for the tabs of the Dialog have to be added. These “tab nodes” must be of node type “cq:WidgetCollection”. Below the “tab nodes” the “widget nodes” can then be added. The “widget nodes” must be of node type “cq:Widget”.
Let’s create a Title component to understand what component is and dialog is.
1. Create a new “title ” Component.
click on “Next” button till last step and click “ok” button.
2. Open the file title.jsp, and enter some HTML and JSP code, similar to below – then Save.
title.jsp
<%@include file=”/libs/foundation/global.jsp”%>
<h1><%= properties.get(“title”, currentPage.getTitle()) %></h1>
NOTE
You will notice the use of the Sling ValueMap class/object “properties”. This object allows you to easily get properties associated with this instance of this Component.
3. Test your script by requesting a Page in Siteadmin that implements this title Component.
■ If successful, you should see the default Page title, similar to the image below.
4. Right-click the title Component – then select New, Dialog.
5. Enter the desired Dialog “Name” (dialog) and “Title” (Title Component).
6.Now is a good time for you to review the Dialog/node structure, and be able to easily map the related elements. Please review the image below for a better understanding
7. Right-click the tab1 node – then select New, Node.
8. Enter the desired “Name” (items) and “Type” (cq:WidgetCollection).
9. Create a new node under the newly created items node.
■ Name = title
■ Type = cq:Widget
10. Right-click the newly created title node – then select New, Property.
11. Enter the desired “Name”, “Type”, and “Value” for the properties listed below.
■ the property that will define where the content is stored
■ Name = name
■ Type = String
■ Value = ./title
■ the property that will define the Widget type (i.e. user interface control)
■ Name = xtype
■ Type = String
■ Value = textfield
■ the property that will define the label applied to the Widget
■ Name = fieldLabel
■ Type = String
■ Value = Title
12. Test your script/Dialog by requesting a Page in Siteadmin that implements this title Component – then double-click the “title” content to invoke the Dialog.
13. Enter the desired custom title – then select OK.
14. Review the Page output of the title content.
■ If successful, you should see the custom Page title, similar to the image below.
Congratulations! You have successfully created a title Component, with a Dialog, that allows content authors to write content and have it displayed. This is a significant step in your development capabilities, as you are now able to create CQ Components that allow you to write content to the repository.
Thanks
Techroomweb
Adobe Experience Manager 