Magento 2: A cosa serve la cartella `ui

8

Oltre a contenere cartelle familiari come layout, e templates, una viewcartella del modulo Magento 2 contiene anche una ui_componentsottocartella.

view/adminhtml/ui_component

A cosa serve questa cartella? Sembra avere qualcosa a che fare con il rendering delle UI nel back-end, ma non è chiaro come io, come sviluppatore del modulo Magento, utilizzerei i file in questa cartella. È qualcosa riservato ai moduli Magento di base che non ha alcuna funzionalità esposta per gli sviluppatori di terze parti o posso usarlo per riutilizzare i componenti dell'interfaccia utente di Magento e / o creare i miei componenti dell'interfaccia utente? Se é cosi, come?

— Alan Storm
fonte

7

La directory ui_component contiene la definizione xml della griglia (o modulo) utilizzata nel back-end. All'interno del tuo file di layout puoi fare riferimento al componente dell'interfaccia utente 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>

Questo caricherà quindi il file: view / adminhtml / ui_component / sample_demolist_listing.xml, qui definisci (per una griglia) quale origine dati vuoi usare, quali campi disponibili mostrare, campi che vuoi filtrare e azioni di massa. Vedi https://github.com/Genmato/M2_Sample/blob/7c0c771c4d66f2ea4eec285bfb9f8ad5d1c67999/view/adminhtml/ui_component/sample_demolist_listing.xml (il file è un po 'troppo grande da includere qui).

L'origine dati è a cui si fa riferimento in ui_component xml e viene creata tramite di.xml definendo:

<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 questo caso la raccolta viene utilizzata da Model\ResourceModel\Demo\Grid\Collection.

Vedi https://github.com/Genmato/M2_Sample/releases/tag/0.7.6 per l'utilizzo nel tuo modulo.

— Vladimir Kerkhoff
fonte

7

Questa cartella contiene la dichiarazione dell'interfaccia utente basata sui componenti dell'interfaccia utente (come griglie e moduli). Attualmente è utilizzato principalmente nell'area adminhtml perché il Pannello di amministrazione ha molte interfacce CRUD che hanno la stessa struttura.

Tutte le nuove interfacce nel Pannello di amministrazione verranno create con i componenti dell'interfaccia utente e inoltre è la tecnologia consigliata per lo sviluppo dei moduli.

— Kandy
fonte

+1 per uno sfondo utile: conosci tutorial / risorse che spiegano come funzionano?

— Alan Storm,

1

Forse il modulo di esempio ti sarà utile

— KAndy,

Ogni nodo qui viene spiegato da questo tutorial: ashsmith.io/magento2/module-from-scratch-part-5-adminhtml

— Luuk Skeur

Magento 2: A cosa serve la cartella `ui_component`?