Magento 2: Thư mục `ui_component` dùng để làm gì?

8

Ngoài việc chứa các thư mục quen thuộc như layout, và templates, viewthư mục của mô-đun Magento 2 cũng chứa ui_componentthư mục con.

view/adminhtml/ui_component

Thư mục này để làm gì? Nó dường như có liên quan đến việc hiển thị UI ở phía sau, nhưng không rõ làm thế nào tôi, với tư cách là nhà phát triển mô-đun Magento, sẽ sử dụng các tệp trong thư mục này. Đây có phải là thứ dành riêng cho các mô-đun Magento lõi không có chức năng được hiển thị cho nhà phát triển bên thứ ba hay tôi có thể sử dụng nó để sử dụng lại các thành phần UI Magento và / hoặc tạo các thành phần UI của riêng tôi không? Nếu vậy thì thế nào?

— Bão Alan
nguồn

7

Thư mục ui_component chứa định nghĩa xml của lưới (hoặc biểu mẫu) được sử dụng trong phụ trợ. Trong tệp bố cục của bạn, bạn có thể tham chiếu đến thành phần ui với:

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

Sau đó, nó sẽ tải tệp: view / adminhtml / ui_component / sample_demolist_listing.xml, ở đây bạn xác định (đối với lưới) bạn muốn sử dụng nguồn dữ liệu nào, trường nào có sẵn để hiển thị, các trường mà bạn muốn lọc và hành động hàng loạt. Xem https://github.com/Genmato/M2_Sample/blob/7c0c771c4d66f2ea4eec285bfb9f8ad5d1c67999/view/adminhtml/ui_component/sample_demolist_listing tệp ở đây

Nguồn dữ liệu được tham chiếu trong ui_component xml được tạo thông qua di.xml bằng cách định nghĩa:

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

Trong trường hợp này, bộ sưu tập được sử dụng từ Model\ResourceModel\Demo\Grid\Collection.

Xem https://github.com/Genmato/M2_Sample/release/tag/0.7.6 để biết cách sử dụng trong mô-đun của riêng bạn.

— Vladimir Kerkhoff
nguồn

7

Thư mục này chứa khai báo UI UI dựa trên UI (như lưới và biểu mẫu). Hiện tại nó được sử dụng chủ yếu trong khu vực adminhtml vì Bảng quản trị có nhiều giao diện CRUD có cùng cấu trúc.

Tất cả các giao diện mới trong Bảng quản trị sẽ được xây dựng với các thành phần UI và cũng là công nghệ được đề xuất để phát triển mô-đun.

— KAndy
nguồn

+1 cho nền tảng hữu ích - bạn có biết bất kỳ hướng dẫn / tài nguyên nào giải thích cách thức hoạt động của chúng không?

— Alan Storm

1

Có thể mô-đun mẫu sẽ hữu ích cho bạn

— KAndy

Mỗi nút ở đây được giải thích bởi hướng dẫn này: ashsmith.io/magento2/module-from-scratch-part-5-adminhtml

— Luuk Skeur