Magento2 UI components概述

UI components 概述
Magento UI components 是用來展現不一樣的UI元素，好比表，按鈕，對話框等。
他們被用於簡單靈活的交互界面渲染。Components被用來渲染結果界面，提供進一步的與javascript組件和服務器的交互。
Magento UI components被實現爲一個標準的模塊叫Magento_UI.
想要在你的模塊裏面使用UI Components,你須要在你的composer.json文件裏面添加對Magento_UI的依賴。
如下XSD文件包含了全部components(組件)共用的規則和限制。
<your module root dir>/Magento/Ui/etc/ui_definition.xsd
插件（extension）開發不能擴展XSD也不能引入新的組件，可是能夠定製化已經存在的組件。

通用結構
Magento2裏有基礎和輔助UI 組件（components）。
基礎組件有：
1.列表組件（Listing component）
2.表單組件（Form component）
其它組件都是輔助組件。
基礎組件在page layout files裏聲明，輔助組件在頂級組件實例的配置文件裏聲明。
全部的組件均可覺得Admin和storefront配置。

何時使用UI組件。
​​​使用Magento，你可能用不一樣的方式來實現UI元素：
1.有內嵌javascript的PHTML模版
2.有在XML layout聲明關聯JavaScript的PHTMl模版
3.JQuery widget
4.Magento 2 UI component

什麼是UI組件
UI組件由如下內容組成：
1.明確組件設置和內部結構的XML declaration聲明
2.繼承自magento javascript框架UI組件類的Javascript類
3.相關模版

XML Declaration(XML 聲明)
XML在Magento2中被普遍使用，這一作法很大程度上方便了開發者重用已有方法和添加本身的定製化。
與XML佈局相比，UI組件使用更語義化的方法來聲明和配置用戶界面。
UI組件的實例一般基於子UI組件的層次結構。

例如:

• 表單組件有字段集（Fieldsets），選項卡（Tabs）和內部字段(inner fields)
• 列表組件有篩選器（Filter）,列（Columns）,書籤等組件。

Javascript 類
如下截圖展現了UI組件的Javascript 類是如何被實現的。


模版（Templates）
使用KnockoutJS能夠將UI組件綁定到一個或多個HTML模版。

配置一個UI組件
UI組件的特定實例主要由如下內容定義：
1.<Magento_Ui_module_dir>/view/base/ui_component/etc/definition.xml：默認組件配置。能夠在定製化模塊內繼承。
2.UI component’s XML declaration.（UI組件XML聲明）
3.Backend/PHP modifiers
4.Javascript類內部的配置

UI組件在前端設計區域的使用
經過XML佈局配置
jsLayout參數被用來指定信息。

<block name="block-name" template="Magento_Module::path_to_template.phtml">
  <arguments>
    <argument name="jsLayout" xsi:type="array">
      <item name="components" xsi:type="array">
        ...
      </item>
    </argument>
  </arguments>
</block>

UI組件在Adminhtml區域的使用
經過專用的XML文件進行配置(view/…/ui_component/[ui_component_name.xml])
經過uiComponent標籤引入到佈局XML

使用UI組件的時候須要謹記的事情
UI組件有不一樣的設置：
不一樣的UI組件的配置是不一樣的；這些配置包含常量，可選和必填項。開發者須要分別對待每一個UI組件。

小心XML配置中的錯誤
出乎意料的是，大多數問題是因爲UI組件的XML配置中的錯別字和其餘錯誤而發生的。 命名相當重要，由於UI組件之間存在大量交叉引用。