Author: Anastasia Sukhorukova Presentation #3 at Magento Meetup Kharkiv 13.04.2018

1. UI Components
Спикер: Анастасия Сухорукова

2. UI компоненты это:
2
● База элементов интерфейса таких, как кнопки, формы,
диалоги и т.д.
● Предназначены для простого и гибкого рендера
пользовательских интерфейсов
● Все компоненты определены в модуле Magento_UI
● Используются как в backend, так и в frontend области

3. UI компонент
3
UI
компонент
XML
конфигурация
JS компонент
HTML шаблон
(KnockoutJS)
PHP
DataProvider

4. Component Renderer
4

5. UI компонент
5

6. Базовые компоненты
6
● Listing Component - Визуализация и
фильтрация данных. В терминах М1: Grid
● Form Component - CRUD
CRUD (сокр. от англ. create, read, update, delete)

7. Listing Components
7

8. Listing Component. Layout
8

9. ListingComponent.XML 9

10. Data Argument
10
Совпадает с названием тега columns
Описывается в теге dataSource
10

11. Listing Data Source
11
11

12. etc/di.xml
12
12

13. Editable Columns
13
13

14. Form Component
14

15. Data Provider
15

16. UI компоненты это:
16
uiClass
(/view/base/web/js/lib/ core/class.js)
uiElement
(/view/base/web/js/lib/
core/element/element.js)
uiCollection / uiComponent
(/view/base/web/js/lib/
core/collection.js)
custom component 1
custom component 2
Child Component Child Component
custom component 2
Child Component

17. Frontend Component. Layout
17

18. Frontend Component. PHTML
18

19. Frontend Component. JS
Наследуемся от uiElement
19
19

20. Registration with Checkout
20
20

21. Layout
21
21

22. Backend with Frontend
22
22

23. PHP & JS Connect
23

24. Composite Config Provider
24

25. etc/frontend/di.xml
25

26. Choose Customer Provider
26

27. Debug UI Components
27

28. Debug UI Components
JS debugging using uiRegistry
var registry = require('uiRegistry');
var component = registry.get('%componentName%');
// Admin > Products > Catalog > Add Product
var fieldName = registry.get('product_form.product_form.product-
details.container_name.name');
28

29. Debug UI Components
console.log(fieldName.name); //
product_form.product_form.product-details.container_name.name
fieldName.trigger('validate'); // will invoke validation
fieldName.visible(false); // will hide field from page
fieldName.visible(true); // will show field again
fieldName.value(); // will show current field value
fieldName.value('New string value'); // will change field value
to string 'New string value'
29