How "text" component works?

[Former Community Member]

Hi,

     I am trying to understand the "text" component, in that process i copied the "text" component from lib/foundation/components to app/geometrixx/components. 

     For testing purpose i removed tab2 node from text/dialog/items, and when i use that component (in the design mode enabled under paragraph system; grouped under General of side kick) i was not seeing the second tab 'Styles' for that component. I understand that since i removed the node entry i am not seeing it fine perfect.  But my confusion starts when i again create a node under 'text/dialog/items' with the original properties, tab2 (node name) and its properties (jcr:primaryType as cq:Widget and xtype as componentstyles).

My question is how by setting the property here, i am seeing the second tab with name 'Styles' and two drop downs 'Space' and 'Text Syle', having options like 'None', 'Before', 'Afte'r, 'Before and After' for Space dropdown. 'Normal', 'Large', and 'Quote' for Text Style drop down box. Where is the jsp code to populate this? Please clarify. Attached the screen shot for better understanding.

[shekhardhiman]

Hi there,

See if these docs helps:

http://docs.adobe.com/docs/en/aem/6-0/author/page-authoring/rich-text-editor.html

http://helpx.adobe.com/experience-manager/kb/RichTextEditorConfiguration.html

Thanks!

[Lokesh_Shivalingaiah · Accepted solution]

Hi Sriram.

  The options are coming from the xtype: componentstyles which has been given in the second tab. The JSP for the same can be found here [1]

[1] /libs/cq/gui/components/authoring/dialog/componentstyles

[Former Community Member]

Hi,

    Thanks for your reply. Could you explain me where the mapping of "/libs/cq/gui/components/authoring/dialog/componentstyles"  to xtype:componentstyles has been created? 

Thanks

[vdhim23]

Hi,

It works something like your widget has xtype:componentstyles, AEM will look over the xtypes registered under "/libs/cq/ui/widgets/js.txt[ootb]" & finds the "/libs/cq/ui/widgets/source/widgets/form/ComponentStyles.js" and inject the implementation when dialog load. But this is no the whole concepts but seems ok for your widget.

Thanks

[Lokesh_Shivalingaiah]

Hi Sriram,

   xtype value is the name of the widget that is registered. Here the value of xtype is 'componentstyles' which makes cq to search for the widget named componentstyle and include/implement that.

[Former Community Member]

Thank you all. That clarifies my doubt, i will dig more :-)

[kaushal_mall]

Have you looked at the blog? 

http://blogs.adobe.com/contentmanagement/2012/02/10/how-to-add-align-options-to-the-textimage-compon...