Introduction to UI components

UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others.

They are designed for simple and flexible user interface (UI) rendering. Components are responsible for rendering result page fragments and providing/supporting further interactions of JavaScript components and server.

UI components are implemented as a standard module named Magento_UI.

To use UI components in your custom module, you need to add a dependency for the Magento_UI module in your componets composer.json file.

The following XSD file contains rules and limitations shared between all components (both definitions and instance configurations):

<your module root dir>/Magento/Ui/etc/ui_definition.xsd

When to use UI components

With Magento, you may apply different approaches to implementing a UI element, and use:

• PHTML template with inline JavaScript

• PHTML template with declaration of related JavaScript file via XML layout

• jQuery widget

• UI component

We recommend using UI components as much as possible.

UI components work well together: they communicate with each other via the uiRegistry service that tracks their asynchronous initialization. Therefore, if we need to extend something that has already been implemented as a hierarchy of UI components or add a new feature that should interact with other UI components, it’s easier and more effective to use a UI component.

A UI component is a combination of:

1. XML declaration that specifies the component’s configuration settings and inner structure.

2. JavaScript class inherited from one of the JavaScript framework UI components base classes (such as UiElement,UICLass or UICollection).

3. Related template(s)

uiClass

In Magento 2, `uiClass` is a property used in the configuration of UI Components to define the JavaScript class responsible for handling the component’s behavior and interactions on the frontend (storefront) or backend (admin) interface. It is an essential part of the UI Component configuration, as it determines how the component should function and respond to user actions.

The `uiClass` property is typically defined in the XML configuration file for the UI Component. It specifies the JavaScript class that should be associated with the component. This class will contain the necessary logic to handle data binding, event handling, and other functionality required for the component.

Here’s an example of how `uiClass` is used in a UI Component configuration:

In this example, the `uiClass` property is set to `Vendor_Module/js/my-custom-component`. This means that the component will use the JavaScript class defined in the `my-custom-component.js` file located in the `Vendor_Module` module’s `js` directory.

The JavaScript class associated with the `uiClass` will contain the necessary methods and logic to handle the component’s behavior. It may include data binding, event listeners, and other functions that define how the component interacts with the user and the data it displays.

Using the `uiClass` property allows Magento developers to customize and extend existing UI Components or create their own custom components with unique behaviors and functionality. It is a critical part of the MVVM (Model-View-ViewModel) pattern that Magento 2 follows, ensuring a clear separation of concerns between data, presentation, and behavior in the user interface.

uiElement

The main classes that handle rendering and data binding in Magento 2 UI Components are:

1. Magento_Ui/js/lib/core/element/element (Element): The Element class serves as the base class for most UI Components in Magento 2. It provides the basic functionality for rendering and managing UI elements, including data binding, rendering templates, and handling events. UI Components often extend this class to inherit its core functionalities.
2. Magento_Ui/js/form/element/abstract (AbstractElement): The AbstractElement class extends the Element class and provides additional functionalities specific to form elements, such as form validation, error messages, and data updates for form elements.

These classes are the foundation for building UI Components in Magento 2, and they handle various aspects of UI rendering and behavior. UI Components in Magento 2 follow the MVVM pattern and utilize the KnockoutJS library to achieve two-way data binding and interactivity.

uiCollection

In Magento 2, `uiCollection` is not a class or component specifically defined in the core framework. I apologize for any confusion in my previous responses.

The term “uiCollection” might be a reference to the collection data type used in Magento, but it is not a standardized or official component in the Magento 2 UI Component framework.

In Magento, collections are used to represent a set of records retrieved from the database or other data sources. Collections are typically instances of the `\Magento\Framework\Data\Collection` class or its derivatives.

For example, in the context of Magento 2 models, you might retrieve a collection of products, customers, or orders from the database, and then use this collection to work with the data in your code.

Here’s an example of how a product collection might be retrieved in Magento 2:

The `$productCollection` variable in this example represents the collection of products retrieved from the database, and you can work with it to get individual product records or perform operations on the entire set of products.

Once again, I apologize for any confusion regarding `uiCollection`. If you have any further questions or need clarification on any Magento 2 concepts, please feel free to ask.