Magento 2：“ ui_component”文件夹有什么用？

8

除了包含熟悉的文件夹（如layout和）外templates，Magento 2模块的view文件夹还包含一个ui_component子文件夹。

view/adminhtml/ui_component

这个文件夹是做什么用的？这似乎与后端的UI呈现有关，但尚不清楚作为Magento模块开发人员，我将如何使用此文件夹中的文件。这是为Magento核心模块保留的功能，而第三方开发人员没有任何功能吗？或者我可以使用它重用Magento UI组件和/或创建自己的UI组件吗？如果是这样，怎么办？

— 艾伦·斯托姆
source

7

ui_component目录包含后端中使用的网格（或表单）的xml定义。在布局文件中，您可以通过以下方式引用ui组件：

<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/uihtml/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。

— 弗拉基米尔·科霍夫（Vladimir Kerkhoff）
source

7

此文件夹包含基于UI组件的UI的声明（如网格和表单）。当前，它主要用于adminhtml区域，因为管理面板具有许多具有相同结构的CRUD接口。

管理面板中的所有新界面都将使用UI组件构建，并且它也是模块开发的推荐技术。

— 康迪
source

+1可获得有用的背景知识-您知道解释这些方法如何工作的任何教程/资源吗？

— 艾伦·风暴

1

也许样品模块将是对您有用

— 康提

本教程将说明此处的每个节点：ashsmith.io/magento2/module-from-scratch-part-5-adminhtml

— Luuk Skeur