Magento 2: ¿Para qué es la carpeta `ui_component`?

8

Además de contener carpetas familiares como layout, y templates, la viewcarpeta de un módulo Magento 2 también contiene una ui_componentsubcarpeta.

view/adminhtml/ui_component

¿Para qué es esta carpeta? Parece tener algo que ver con la representación de las IU en el back-end, pero no está claro cómo yo, como desarrollador de módulos de Magento, usaría los archivos de esta carpeta. ¿Es esto algo reservado para los módulos principales de Magento que no tienen funcionalidad expuesta para desarrolladores de terceros, o puedo usarlo para reutilizar los componentes de la interfaz de usuario de Magento y / o crear mis propios componentes de la interfaz de usuario? ¿Si es así, cómo?

Alan Storm
fuente

Respuestas:

7

El directorio ui_component contiene la definición xml de la cuadrícula (o formulario) utilizada en el backend. Dentro de su archivo de diseño puede hacer referencia al componente ui con:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <update handle="styles"/>
   <body>
       <referenceContainer name="content">
           <uiComponent name="sample_demolist_listing"/>
       </referenceContainer>
   </body>
</page>

Esto cargará el archivo: view / adminhtml / ui_component / sample_demolist_listing.xml, aquí usted define (para una cuadrícula) qué fuente de datos desea usar, qué campos están disponibles para mostrar, campos que desea filtrar y acciones en masa. Consulte https://github.com/Genmato/M2_Sample/blob/7c0c771c4d66f2ea4eec285bfb9f8ad5d1c67999/view/adminhtml/ui_component/sample_demolist_listing.xml (el archivo es demasiado grande para incluirlo aquí).

El origen de datos es que se hace referencia en el ui_component xml se crea a través del di.xml definiendo:

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="sample_demolist_listing_data_source" xsi:type="string">Genmato\Sample\Model\ResourceModel\Demo\Grid\Collection</item>
            </argument>
        </arguments>
    </type>

En este caso, la colección se utiliza desde Model\ResourceModel\Demo\Grid\Collection.

Consulte https://github.com/Genmato/M2_Sample/releases/tag/0.7.6 para usarlo en su propio módulo.

Vladimir Kerkhoff
fuente
7

Esta carpeta contiene una declaración de IU basada en componentes (como cuadrículas y formularios). Actualmente se usa principalmente en el área adminhtml porque el Panel de administración tiene muchas interfaces CRUD que tienen la misma estructura.

Todas las nuevas interfaces en el Panel de administración se construirán con componentes de interfaz de usuario y también se recomienda la tecnología para el desarrollo de módulos.

Kandy
fuente
+1 para obtener información útil: ¿conoce algún tutorial / recurso que explique cómo funcionan?
Alan Storm
1
Quizás el módulo de muestra sea ​​útil para usted
KAndy
Cada nodo aquí se explica en este tutorial: ashsmith.io/magento2/module-from-scratch-part-5-adminhtml
Luuk Skeur