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

来源:衡阳网站优化

Magento2 UI components概述的更多相关文章

  1. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  2. vue ui components

    vue ui components h_ui https://www.npmjs.com/~hs_ui https://www.npmjs.com/package/h_ui_beta https:// ...

  3. Kendo UI Validator 概述

    Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷 ...

  4. Kendo UI 特效概述

    Kendo UI 特效概述 Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成 HTML 元素的过渡显示.每种特效近可能的使用 CSS Transition ,对于一些老版 ...

  5. Kendo UI 模板概述

    Kendo UI 模板概述 Kendo UI 框架提供了一个易用,高性能的 JavaScript 模板引擎.通过模板可以创建一个 HTML 片段然后可以和 JavaScript 数据合并成最终的 HT ...

  6. Kendo UI Widgets 概述

    UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的.这些插件的名称基本上都是以 kendo 作为前缀.比 ...

  7. how to share UI components

    how to share UI components The shared component cloud · Bit https://bit.dev/ A better way to build w ...

  8. Vue & mobile UI components

    Vue & mobile UI components https://github.com/vuejs/awesome-vue https://awesome-vue.js.org/ http ...

  9. pull down/pull up refresh & UI Components

    pull down/pull up refresh & UI Components 下拉/上拉刷新 https://mint-ui.github.io/docs/#/zh-cn2/loadmo ...

随机推荐

  1. spring boot 源码解析52-actuate中MVCEndPoint解析

    今天有个别项目的jolokia的endpoint不能访问,调试源码发现:endpoint.enabled的开关导致的. 关于Endpoint, <Springboot Endpoint之二:En ...

  2. TYPORA语法

    原文链接:https://blog.csdn.net/SIMBA1949/article/details/79001226

  3. asp.net core 和consul

    consul集群搭建 Consul是HashiCorp公司推出的使用go语言开发的开源工具,用于实现分布式系统的服务发现与配置,内置了服务注册与发现框架.分布一致性协议实现.健康检查.Key/Valu ...

  4. tkinter添加背景音乐

    一.问题利用tkinter来写一个游戏,添加一个背景音乐提高可玩性. 二.解决1.安装pygame首先是利用pygame的一个播放流:[pip install pygame]来完成pygame的安装. ...

  5. 【题解】古代猪文 [SDOI2010] [BZOJ1951] [P2480]

    [题解]古代猪文 [SDOI2010] [BZOJ1951] [P2480] 在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心 ...

  6. FusionInsight大数据开发---Redis应用开发

    Redis应用开发 要求: 了解Redis应用场景 掌握Redis二次开发环境搭建 掌握Redis业务开发 Redis简介 Redis是一个基于网络的,高性能key-value内存数据库 Redis根 ...

  7. Sqoop import导入表时报错java.lang.ClassNotFoundException: org.json.JSONObject

    报错原因:sqoop缺少java-json.jar包. 解决方案:一. 下载java-json.jar包地址:https://download.csdn.net/download/qq_2213643 ...

  8. 4、VUE生命周期

    下面是分步骤解释vue生命周期 1.开始:new Vue() 创建vue对象过程还是比较繁琐的,所以创建vue对象是异步执行的. 回调函数:beforeCreate 2.Observe Data 监控 ...

  9. 【转载】 C#中常见的泛型集合类有哪些

    在C#语言编程过程中,List集合类是最常见的泛型集合类,其实除了List集合,还有其他一些常用的泛型集合类,如字典类型Dictionary泛型集合类.先进先出的队列类型Queue泛型集合类.后进先出 ...

  10. ES6 字符串&正则表达式

    目录 第二章 字符串和正则表达式UTF-16码位codePointAt()方法String.fromCodePoint()方法normalize()方法正则表达式u修饰符其他字符串变更字符串中的字串识 ...