Magento 2: Wozu dient der Ordner "ui_component"?


8

Der Ordner eines Magento 2-Moduls enthält nicht nur vertraute Ordner wie layoutund templates, sondern viewauch einen ui_componentUnterordner.

view/adminhtml/ui_component

Wofür ist dieser Ordner? Es scheint etwas mit dem Rendern von Benutzeroberflächen im Back-End zu tun zu haben, aber es ist nicht klar, wie ich als Magento-Modulentwickler die Dateien in diesem Ordner verwenden würde. Ist dies für Magento-Kernmodule reserviert, für die keine Funktionen für Entwickler von Drittanbietern verfügbar sind, oder kann ich damit Magento-UI-Komponenten wiederverwenden und / oder meine eigenen UI-Komponenten erstellen? Wenn das so ist, wie?

Antworten:


7

Das Verzeichnis ui_component enthält die XML-Definition des im Backend verwendeten Rasters (oder Formulars). In Ihrer Layoutdatei können Sie auf die UI-Komponente verweisen mit:

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

Dadurch wird die Datei geladen: view / adminhtml / ui_component / sample_demolist_listing.xml. Hier definieren Sie (für ein Raster), welche Datenquelle Sie verwenden möchten, welche Felder angezeigt werden sollen, Felder, nach denen Sie filtern möchten, und Massenaktionen. Siehe https://github.com/Genmato/M2_Sample/blob/7c0c771c4d66f2ea4eec285bfb9f8ad5d1c67999/view/adminhtml/ui_component/sample_demolist_listing.xml (Datei ist hier etwas zu groß).

Die Datenquelle, auf die in der Datei ui_component verwiesen wird, wird durch die Datei di.xml erstellt, indem Folgendes definiert wird:

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

In diesem Fall wird die Sammlung von verwendet Model\ResourceModel\Demo\Grid\Collection.

Informationen zur Verwendung in Ihrem eigenen Modul finden Sie unter https://github.com/Genmato/M2_Sample/releases/tag/0.7.6 .


7

Dieser Ordner enthält eine Deklaration der UI-Komponenten- basierten Benutzeroberfläche (wie Raster und Formulare). Derzeit wird es hauptsächlich im Adminhtml- Bereich verwendet, da das Admin-Panel über viele CRUD-Schnittstellen mit derselben Struktur verfügt.

Alle neuen Schnittstellen im Admin Panel werden mit UI-Komponenten und der empfohlenen Technologie für die Modulentwicklung erstellt.


+1 für nützlichen Hintergrund - Kennen Sie Tutorials / Ressourcen, die erklären, wie diese funktionieren?
Alan Storm

1
Vielleicht ist ein Beispielmodul für Sie nützlich
KAndy

Jeder Knoten hier wird durch dieses Tutorial erklärt: ashsmith.io/magento2/module-from-scratch-part-5-adminhtml
Luuk Skeur
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.