Short Answer
In Adobe Experience Manager (AEM), “xtype” refers to the type of component or widget that is used in the creation of dialogues within AEM’s Classic UI.
Understanding xtype in AEM
Defining xtype
The term “xtype” is derived from Ext JS, a JavaScript framework that AEM used to use for its Classic UI. It stands for “x-type” or “extension type”, which is a symbolic name representing a component class. In AEM, xtpe is used to define the type of widget, like a text field or drop-down, that should be rendered in a dialog window.
The Role of xtype in Classic UI
AEM’s Classic UI relied on xtypes for defining the interface elements authors interact with when configuring components or pages. Each xtype corresponds to a specific function or behavior.
Example of xtypes
Here are a few examples of common xtypes:
- textfield: Defines a single-line text input field.
- pathfield: Provides an input for selecting a path within the JCR.
- selection: Offers a drop-down selection or checkbox options.
Transition from Classic UI to Touch UI
With the introduction of AEM’s Touch UI, the concept of xtype is being phased out, replaced by resource types defined in the Granite UI framework. However, xtype remains relevant for projects maintaining or upgrading older AEM versions that still use the Classic UI.
Using xtype in AEM Classic UI
Creating a Dialog with xtype
- Define the Dialog Structure: Open or create a dialog XML file under the component’s node in the CRX repository.
- Add Fields with xtype: For each field you want to add, define a node and set its xtype property according to the desired widget.
- Configure Properties: Set additional properties for each xtype, like name, fieldLabel, or defaultValue, to control its behavior and appearance.
Example Dialog Field
<field
jcr:primaryType=”cq:Widget”
name=”./title”
fieldLabel=”Title”
xtype=”textfield”/>
This snippet creates a text field in a dialog for authors to enter a title.
Conclusion
The concept of xtype in AEM is essential for understanding the architecture and customization of the Classic UI. While newer AEM versions have shifted towards using Granite UI for the Touch UI, knowing about xtypes is still valuable for developers working with legacy systems or migrating to newer AEM versions. It illustrates the evolution of AEM’s user interface and the continuing need for adaptability in technology roles.
