Magento 2: Untuk apa folder `ui

8

Selain berisi folder yang dikenal seperti layout, dan templates, viewfolder modul Magento 2 juga berisi ui_componentsub-folder.

view/adminhtml/ui_component

Untuk apa folder ini? Tampaknya ada hubungannya dengan rendering UI di bagian belakang, tetapi tidak jelas bagaimana saya, sebagai pengembang modul Magento, akan menggunakan file dalam folder ini. Apakah ini sesuatu yang dicadangkan untuk modul inti Magento yang tidak memiliki fungsi terbuka untuk pengembang pihak ketiga, atau dapatkah saya menggunakannya untuk menggunakan kembali komponen UI Magento dan / atau membuat komponen UI saya sendiri? Jika ya, bagaimana caranya?

— Alan Storm
sumber

7

Direktori ui_component berisi definisi xml dari grid (atau form) yang digunakan di backend. Di dalam file tata letak Anda, Anda dapat merujuk ke komponen ui dengan:

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

Ini kemudian akan memuat file: view / adminhtml / ui_component / sample_demolist_listing.xml, di sini Anda menentukan (untuk kisi) sumber data apa yang ingin Anda gunakan, bidang apa yang tersedia untuk ditampilkan, bidang apa yang ingin Anda filter, dan bidang yang ingin Anda filter dan aksi massa. Lihat https://github.com/Genmato/M2_Sample/blob/7c0c771c4d66f2ea4eec285bfb9f8ad5d1c67999/view/adminhtml/ui_component/sample_demolist_listing.xml (file agak banyak untuk disertakan di sini).

Sumber data adalah yang dirujuk dalam ui_component xml dibuat melalui di.xml dengan mendefinisikan:

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

Dalam hal ini koleksi digunakan dari Model\ResourceModel\Demo\Grid\Collection.

Lihat https://github.com/Genmato/M2_Sample/releases/tag/0.7.6 untuk penggunaan dalam modul Anda sendiri.

— Vladimir Kerkhoff
sumber

7

Folder ini berisi deklarasi UI berbasis Komponen UI (seperti kisi dan formulir). Saat ini sebagian besar digunakan di area adminhtml karena Panel Admin memiliki banyak antarmuka CRUD yang memiliki struktur yang sama.

Semua antarmuka baru di Panel Admin akan dibuat dengan komponen UI dan juga teknologi yang disarankan untuk pengembangan modul.

— KAndy
sumber

+1 untuk latar belakang yang bermanfaat - apakah Anda tahu ada tutorial / sumber daya yang menjelaskan cara kerjanya?

— Alan Storm

1

Mungkin modul sampel akan berguna untuk Anda

— KAndy

Setiap node di sini akan dijelaskan oleh tutorial ini: ashsmith.io/magento2/module-from-scratch-part-5-adminhtml

— Luuk Skeur

Magento 2: Untuk apa folder `ui_component`?