Widgets, also known as xtypes, are a core feature of Adobe Experience Manager (AEM formerly Adobe CQ), and understanding them is crucial. AEM provides many different widgets for use out of the box. While it is nice to have so many to choose from to create your site, it can be difficult to know which one best fits your needs. There are two great ways to find out what widgets exist and how to use them. The first is Adobe’s online documentation, and the second is trial and error.
Learning by Documentation
Adobe’s Widget documentation is a great resource for reading about the features and functionality of each widget type. You can browse by hierarchy or directly search for the name of the widget you are looking for. Each widget description page contains detailed information about the widget. You can see its class ancestry, descendants, configuration options, properties, events, and more. Each description gives information about the method/property such as common uses and provided parameters.
Adobe’s Widget documentation is a great resource for reading about the features and functionality of each widget type. You can browse by hierarchy or directly search for the name of the widget you are looking for. Each widget description page contains detailed information about the widget. You can see its class ancestry, descendants, configuration options, properties, events, and more. Each description gives information about the method/property such as common uses and provided parameters.
Note that the link above provides documentation on the current version of AEM. If you want to find information about a specific version, modify the “current” portion of the URL with the version you are looking for (e.g. http://dev.day.com/docs/en/cq/5-5/widgets-api/index.html).
Learning by Use
The other way to learn more about out of the box widgets is to simply try them. It can often be best to see them in action before attempting to use them yourself. One way to find an already existing component containing a widget is to query the JCR for its use with the query tool provided in AEM. This tool can be located from the Tools->Query… link on the CRXDE Lite page (highlighted below). Using the query tool, you can search for any widget you want, and it will display all components that use that widget. A sample of the query to execute for SQL2 would be SELECT * FROM [nt:base] AS s WHERE [xtype] = ‘pathfield’. For XPath, you could use //*[xtype=’pathfield’] (highlighted below).
The other way to learn more about out of the box widgets is to simply try them. It can often be best to see them in action before attempting to use them yourself. One way to find an already existing component containing a widget is to query the JCR for its use with the query tool provided in AEM. This tool can be located from the Tools->Query… link on the CRXDE Lite page (highlighted below). Using the query tool, you can search for any widget you want, and it will display all components that use that widget. A sample of the query to execute for SQL2 would be SELECT * FROM [nt:base] AS s WHERE [xtype] = ‘pathfield’. For XPath, you could use //*[xtype=’pathfield’] (highlighted below).
Once you know of an existing component that uses the widget you want to use, you can create an instance of that component on a page. You can then experiment with the dialog and see the way the widget functions.
As you become familiar with the out of the box widgets that AEM provides, you will be able to use multiple and various widgets in your dialogs in unity to create the authoring experience you are looking for while being able to best leverage the native power of AEM and its flexible dialog/widget system.
In many situations, the out of the box widgets will be sufficient for what you will need. If your situation requires a more complex widget, AEM allows for the creation of powerful, highly customizable widgets. Instructions on sample custom widget creation will be provided in another tutorial.
No comments :
Post a Comment