Decoding dialogs in AEM

Creating nodes of a particular type creates a dialog in CQ5. How are they converted into javascript? What is the relationship between the node and the script?

CQ5 uses Extjs for its interface. So you can use most of the stuff that comes with extjs. The framework is customized a bit and instead of Ext class, you have to use CQ.Ext a subset of extjs functionality.

The dialogs we see in the cq5 interface are actually forms. On clicking OK the values in forms are submitted to the node using POST. Slings default post servlet stores values that have been posted if the request has required permissions. So when you create dialogs you are actually building fancy forms that look good and appear in a pop-up.

A dialog in javascript would look like this

var myDialog = new CQ.Dialog(
{
"title":"myDialog",
"renderTo":"myDialogDiv",
"width":200,
"height":100,
"items":[{"xtype":"panel","html":"Hello World"}]
}
);
myDialog.show();

The above script would produce a dialog with nothing but a close button and a panel in it that says hello world. The framework converts a div with id "myDialogDiv" into a modal dialog that can be closed. Notice that contents of the dialog (i.e a panel in this case) are an array with the name items.

This is why you cannot change the name of the widget collection node under a dialog from items to something else. The nodes are read by CQ5 and converted into a script.

The node of type cq:widget and its xtype tell what Ext js object to create. A node of type cq:widgetCollection tells it to create an array with name same as the nodes name. The nodes under the widget collection node are translated into ext js objects again and pushed into the widget collection array. The properties you write to each node are used as config options. whatever property matches with the predefined ones of extjs are used in the constructor of the objects. Defaults are used when they are not mentioned by creating a property in the nodes. This doesn't mean you cannot add properties that are not part of the original framework, you can add whatever property you want. These will be available as child objects of the parent objects in the converted script.

We do not add a renderTo property while creating a node because CQ5 dynamically creates the div and applies the id to the dialog implicitly. The green highlight around a component is because the software automatically adds a div around the component and then extjs elements are applied to it. So when you double click it the show method of the dialog is called, the auto-generated id and other helper methods of extjs are used to get a reference to the dialog.

The best part of this is, in the end, it's all html elements. So you can use jquery and raw javascript on these html elements. The extjs framework allows you to add classes and ids through configurations. So when you want to customize something and your ext js skills aren't that great you can always obtain a reference to that element through its class or ID. changing how it looks through jquery doesn't usually affect the internal working of the interface. However, when the values of form fields are changed directly through javascript and jquery some of the extjs events may not get fired so use it with precaution.

The best use case is when you want to display some additional information to the user; Say a component has multiple ways in which it can render content and author sets it through a dropdown. You can add a thumbnail of how each variation looks and highlight the selected one. Instead of figuring out how to do it with extjs you could add a div with an id below the selection using the "html" property and then populate and modify the contents of the div using jquery or javascript. The code can be included in appropriate listeners of the selection object.

So next time you want to customize something and do not know how to do it in extjs, get a reference to that dom element and work your way around using jquery.

Source: http://cq5tutorials.blogspot.com/2014/07/decoding-dialogs-in-cq5.html