Magento 2: À quoi sert le dossier `ui

8

En plus de contenir des dossiers familiers comme layout, et templates, le viewdossier d'un module Magento 2 contient également un ui_componentsous-dossier.

view/adminhtml/ui_component

À quoi sert ce dossier? Cela semble avoir quelque chose à voir avec le rendu des interfaces utilisateur dans le back-end, mais on ne sait pas comment, en tant que développeur de module Magento, j'utiliserais les fichiers de ce dossier. Est-ce quelque chose réservé aux modules Magento de base qui n'ont aucune fonctionnalité exposée pour les développeurs tiers, ou puis-je l'utiliser pour réutiliser les composants d'interface utilisateur Magento et / ou créer mes propres composants d'interface utilisateur? Si c'est le cas, comment?

magento2 xml uicomponent view Alan Storm
la source

7

Le répertoire ui_component contient la définition xml de la grille (ou formulaire) utilisée dans le backend. Dans votre fichier de mise en page, vous pouvez faire référence au composant ui avec:

<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>

Cela chargera ensuite le fichier: view / adminhtml / ui_component / sample_demolist_listing.xml, ici vous définissez (pour une grille) quelle source de données vous souhaitez utiliser, quels champs disponibles à afficher, champs que vous souhaitez filtrer et actions de masse. Voir https://github.com/Genmato/M2_Sample/blob/7c0c771c4d66f2ea4eec285bfb9f8ad5d1c67999/view/adminhtml/ui_component/sample_demolist_listing.xml (le fichier est un peu trop gros à inclure ici).

La source de données est celle qui est référencée dans le xml ui_component est créée via le di.xml en définissant:

<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>

Dans ce cas, la collection est utilisée à partir de Model\ResourceModel\Demo\Grid\Collection.

Voir https://github.com/Genmato/M2_Sample/releases/tag/0.7.6 pour une utilisation dans votre propre module.

Vladimir Kerkhoff
la source

7

Ce dossier contient la déclaration de l' interface utilisateur basée sur les composants de l' interface utilisateur (comme les grilles et les formulaires). Actuellement, il est utilisé principalement dans la zone adminhtml car le panneau d'administration possède de nombreuses interfaces CRUD qui ont la même structure.

Toutes les nouvelles interfaces du panneau d'administration seront construites avec des composants d'interface utilisateur et c'est également la technologie recommandée pour le développement de modules.

KAndy
la source

+1 pour des informations utiles - connaissez-vous des tutoriels / ressources expliquant comment ils fonctionnent?

Alan Storm

1

Un exemple de module vous sera peut-être utile

KAndy

Chaque nœud ici est expliqué par ce tutoriel: ashsmith.io/magento2/module-from-scratch-part-5-adminhtml

Luuk Skeur

Magento 2: À quoi sert le dossier `ui_component`?

Réponses: