Magento 2: Для чего нужна папка `ui_component`?

8

В дополнение к знакомым папкам, таким как layout, и templates, viewпапка модуля Magento 2 также содержит ui_componentподпапку.

view/adminhtml/ui_component

Для чего эта папка? Кажется, что-то связано с рендерингом интерфейсов в бэкэнде, но не ясно, как я, как разработчик модуля Magento, использовал бы файлы в этой папке. Это что-то зарезервированное для основных модулей Magento, которое не имеет функциональности, предоставляемой сторонним разработчикам, или я могу использовать это для повторного использования компонентов пользовательского интерфейса Magento и / или создания собственных компонентов пользовательского интерфейса? Если да, то как?

Алан Сторм
источник

Ответы:

7

Каталог ui_component содержит XML-определение сетки (или формы), используемой в серверной части. В вашем файле макета вы можете ссылаться на компонент пользовательского интерфейса с помощью:

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

Затем будет загружен файл: view / adminhtml / ui_component / sample_demolist_listing.xml, здесь вы определяете (для сетки), какой источник данных вы хотите использовать, какие поля доступны для отображения, поля, по которым вы хотите фильтровать, и массовые действия. См. Https://github.com/Genmato/M2_Sample/blob/7c0c771c4d66f2ea4eec285bfb9f8ad5d1c67999/view/adminhtml/ui_component/sample_demolist_listing.xml (файл слишком большой, чтобы включить его здесь).

Источником данных является то, что ссылка в ui_component xml создается через di.xml путем определения:

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

В этом случае коллекция используется из Model\ResourceModel\Demo\Grid\Collection.

См. Https://github.com/Genmato/M2_Sample/releases/tag/0.7.6 для использования в вашем собственном модуле.

Владимир Керхофф
источник
7

Эта папка содержит объявление UI на основе компонентов пользовательского интерфейса (например, сетки и формы). В настоящее время он используется в основном в области adminhtml, потому что панель администратора имеет много CRUD-интерфейсов, имеющих одинаковую структуру.

Все новые интерфейсы в панели администратора будут построены с использованием компонентов пользовательского интерфейса, а также рекомендуемой технологии для разработки модулей.

Канди
источник
+1 за полезную информацию - знаете ли вы какие-нибудь учебники / ресурсы, которые объясняют, как они работают?
Алан Сторм
1
Может быть, пример модуля будет полезен для вас
KAndy
Каждый узел здесь объясняется в этом уроке: ashsmith.io/magento2/module-from-scratch-part-5-adminhtml
Luuk Skeur