Magento 2: `ui_component`フォルダーは何のためのものですか?


8

、、layoutなどの使い慣れたフォルダに加えてtemplates、Magento 2モジュールのviewフォルダにはサブフォルダも含まれていui_componentます。

view/adminhtml/ui_component

このフォルダは何のためのものですか?バックエンドでのUIのレンダリングと関係があるようですが、Magentoモジュール開発者として、このフォルダー内のファイルをどのように使用するかは明確ではありません。これは、サードパーティの開発者に公開されている機能を持たないコアMagentoモジュール用に予約されているものですか、それともMagento UIコンポーネントの再利用や独自のUIコンポーネントの作成に使用できますか?もしそうなら、どうですか?

回答:


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/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コンポーネントベースのUI(グリッドやフォームなど)の宣言が含まれています。現在、管理パネルには同じ構造を持つ多くのCRUDインターフェイスがあるため、主にadminhtml領域で使用されています。

管理パネルのすべての新しいインターフェースは、UIコンポーネントで構築され、モジュール開発に推奨されるテクノロジーでもあります。


役立つ背景の+1-これらがどのように機能するかを説明するチュートリアル/リソースを知っていますか?
Alan Storm

1
多分サンプルモジュールが役立つでしょう
KAndy

ここの各ノードは、このチュートリアルで説明されています:ashsmith.io/magento2/module-from-scratch-part-5-adminhtml
Luuk Skeur
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.