.png)
Creating nodes of a particular type creates a dialog in CQ5. How are they converted into java script?? 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 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 looks good and appears in a pop up.
A dialog in java script 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 frame work 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) is 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.
Node of type cq:widget and its xtype tells what Ext js object to create. Node of type cq:widgetCollection tells it to create a 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 in to the widget collection array. The properties you write to each node is used as config options. what ever property matches with the predefined ones of extjs are used in in the constructor of the objects. Defaults are used when they are not mentioned by creating 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 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 java script on these html elements. The extjs frame work 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 reference to that element through it's class or ID. changing the 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 drop down. You can add 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 reference to that dom element and work your way around using jquery.
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 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 looks good and appears in a pop up.
A dialog in java script 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 frame work 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) is 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.
Node of type cq:widget and its xtype tells what Ext js object to create. Node of type cq:widgetCollection tells it to create a 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 in to the widget collection array. The properties you write to each node is used as config options. what ever property matches with the predefined ones of extjs are used in in the constructor of the objects. Defaults are used when they are not mentioned by creating 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 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 java script on these html elements. The extjs frame work 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 reference to that element through it's class or ID. changing the 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 drop down. You can add 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 reference to that dom element and work your way around using jquery.
.png)
0 comments:
Post a Comment