Magento2 UI components概述

Posted 2021-03-21 1994july

来源：宝鸡SEO

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