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组件之间存在大量交叉引用。