SlideShare a Scribd company logo
UI Components
Спикер: Анастасия Сухорукова
UI компоненты это:
2
● База элементов интерфейса таких, как кнопки, формы,
диалоги и т.д.
● Предназначены для простого и гибкого рендера
пользовательских интерфейсов
● Все компоненты определены в модуле Magento_UI
● Используются как в backend, так и в frontend области
UI компонент
3
UI
компонент
XML
конфигурация
JS компонент
HTML шаблон
(KnockoutJS)
PHP
DataProvider
Component Renderer
4
UI компонент
5
Базовые компоненты
6
● Listing Component - Визуализация и
фильтрация данных. В терминах М1: Grid
● Form Component - CRUD
CRUD (сокр. от англ. create, read, update, delete)
Listing Components
7
Listing Component. Layout
8
ListingComponent.XML 9
Data Argument
10
Совпадает с названием тега columns
Описывается в теге dataSource
10
Listing Data Source
11
11
etc/di.xml
12
12
Editable Columns
13
13
Form Component
14
Data Provider
15
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
Frontend Component. Layout
17
Frontend Component. PHTML
18
Frontend Component. JS
Наследуемся от uiElement
19
19
Registration with Checkout
20
20
Layout
21
21
Backend with Frontend
22
22
PHP & JS Connect
23
Composite Config Provider
24
etc/frontend/di.xml
25
Choose Customer Provider
26
Debug UI Components
27
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
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

More Related Content

Similar to UI components: synergy of backend and frontend

1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET
Media Gorod
 
Региональная отчетность Акцент
Региональная отчетность АкцентРегиональная отчетность Акцент
Региональная отчетность Акцент
Bingosoft
 
региональная отчетность акцент
региональная отчетность акцентрегиональная отчетность акцент
региональная отчетность акцент
Bingosoft
 
Создание графического интерфейса пользователя мобильных Android приложений (ч...
Создание графического интерфейса пользователя мобильных Android приложений (ч...Создание графического интерфейса пользователя мобильных Android приложений (ч...
Создание графического интерфейса пользователя мобильных Android приложений (ч...
metaform
 
10 компонентные и офисные приложения на платформе microsoft
10 компонентные и офисные приложения на платформе microsoft10 компонентные и офисные приложения на платформе microsoft
10 компонентные и офисные приложения на платформе microsoft
KewpaN
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
IT-Доминанта
 
Архитектура Операционных Систем
Архитектура Операционных СистемАрхитектура Операционных Систем
Архитектура Операционных Систем
kurbanovafaina
 
метод организации репозитория исходного кода
метод организации репозитория исходного кодаметод организации репозитория исходного кода
метод организации репозитория исходного кода
Sergii Shmarkatiuk
 
Inroducing SAP ABAP - Presentation with basics SAP ABAP
Inroducing SAP ABAP - Presentation with basics SAP ABAPInroducing SAP ABAP - Presentation with basics SAP ABAP
Inroducing SAP ABAP - Presentation with basics SAP ABAP
mikhailshurgulaya
 
Конструктор отчетов
Конструктор отчетовКонструктор отчетов
Конструктор отчетов
Docsvision
 
Drupal организация разработки
Drupal   организация разработкиDrupal   организация разработки
Drupal организация разработки
Anna Fedoruk
 
Drupal -organizaciya_razrabotki
Drupal  -organizaciya_razrabotkiDrupal  -organizaciya_razrabotki
Drupal -organizaciya_razrabotki
drupalconf
 
Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...
Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...
Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...
vitaliykulanov
 
#5 Основы разработки интерфейсов мобильных приложений в Android Studio.pdf
#5      Основы разработки интерфейсов мобильных приложений в Android Studio.pdf#5      Основы разработки интерфейсов мобильных приложений в Android Studio.pdf
#5 Основы разработки интерфейсов мобильных приложений в Android Studio.pdf
SergeyAn2
 
Доклад и реферат по теме системной инженерии "Управление архитектурой при про...
Доклад и реферат по теме системной инженерии "Управление архитектурой при про...Доклад и реферат по теме системной инженерии "Управление архитектурой при про...
Доклад и реферат по теме системной инженерии "Управление архитектурой при про...
Anatoly Simkin
 
Централизованная система управления учетными за
Централизованная система управления учетными заЦентрализованная система управления учетными за
Централизованная система управления учетными за
Eugene Afonin
 
Ais Lecture 2
Ais Lecture 2Ais Lecture 2
Ais Lecture 2
Alexander Babich
 

Similar to UI components: synergy of backend and frontend (20)

Lecture 11 2
Lecture 11 2Lecture 11 2
Lecture 11 2
 
1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET1С-Битрикс: Управление сайтом Версия .NET
1С-Битрикс: Управление сайтом Версия .NET
 
Региональная отчетность Акцент
Региональная отчетность АкцентРегиональная отчетность Акцент
Региональная отчетность Акцент
 
региональная отчетность акцент
региональная отчетность акцентрегиональная отчетность акцент
региональная отчетность акцент
 
Создание графического интерфейса пользователя мобильных Android приложений (ч...
Создание графического интерфейса пользователя мобильных Android приложений (ч...Создание графического интерфейса пользователя мобильных Android приложений (ч...
Создание графического интерфейса пользователя мобильных Android приложений (ч...
 
10 компонентные и офисные приложения на платформе microsoft
10 компонентные и офисные приложения на платформе microsoft10 компонентные и офисные приложения на платформе microsoft
10 компонентные и офисные приложения на платформе microsoft
 
лекция № 11
лекция № 11лекция № 11
лекция № 11
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
 
Архитектура Операционных Систем
Архитектура Операционных СистемАрхитектура Операционных Систем
Архитектура Операционных Систем
 
метод организации репозитория исходного кода
метод организации репозитория исходного кодаметод организации репозитория исходного кода
метод организации репозитория исходного кода
 
Inroducing SAP ABAP - Presentation with basics SAP ABAP
Inroducing SAP ABAP - Presentation with basics SAP ABAPInroducing SAP ABAP - Presentation with basics SAP ABAP
Inroducing SAP ABAP - Presentation with basics SAP ABAP
 
лекция 10
лекция 10лекция 10
лекция 10
 
Конструктор отчетов
Конструктор отчетовКонструктор отчетов
Конструктор отчетов
 
Drupal организация разработки
Drupal   организация разработкиDrupal   организация разработки
Drupal организация разработки
 
Drupal -organizaciya_razrabotki
Drupal  -organizaciya_razrabotkiDrupal  -organizaciya_razrabotki
Drupal -organizaciya_razrabotki
 
Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...
Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...
Basic principles of projects description in VHDL - ENTITY, ARCHITECTURE, LIBR...
 
#5 Основы разработки интерфейсов мобильных приложений в Android Studio.pdf
#5      Основы разработки интерфейсов мобильных приложений в Android Studio.pdf#5      Основы разработки интерфейсов мобильных приложений в Android Studio.pdf
#5 Основы разработки интерфейсов мобильных приложений в Android Studio.pdf
 
Доклад и реферат по теме системной инженерии "Управление архитектурой при про...
Доклад и реферат по теме системной инженерии "Управление архитектурой при про...Доклад и реферат по теме системной инженерии "Управление архитектурой при про...
Доклад и реферат по теме системной инженерии "Управление архитектурой при про...
 
Централизованная система управления учетными за
Централизованная система управления учетными заЦентрализованная система управления учетными за
Централизованная система управления учетными за
 
Ais Lecture 2
Ais Lecture 2Ais Lecture 2
Ais Lecture 2
 

More from Magecom UK Limited

Magento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptxMagento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptx
Magecom UK Limited
 
Magento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia BondarMagento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia Bondar
Magecom UK Limited
 
Magento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad OpukhlyiMagento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad Opukhlyi
Magecom UK Limited
 
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Magecom UK Limited
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magecom UK Limited
 
Magento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander ShkurkoMagento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander Shkurko
Magecom UK Limited
 
7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый
Magecom UK Limited
 
Magento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov AvexeyMagento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov Avexey
Magecom UK Limited
 
Making the Magento 2 Javascript Loading Great Again - Robin van Raan
Making the Magento 2 Javascript Loading Great Again - Robin van RaanMaking the Magento 2 Javascript Loading Great Again - Robin van Raan
Making the Magento 2 Javascript Loading Great Again - Robin van Raan
Magecom UK Limited
 
Deep Dive in Magento DI
Deep Dive in Magento DIDeep Dive in Magento DI
Deep Dive in Magento DI
Magecom UK Limited
 
From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko
Magecom UK Limited
 
Advanced GIT or How to Change the History
Advanced GIT  or How to Change the HistoryAdvanced GIT  or How to Change the History
Advanced GIT or How to Change the History
Magecom UK Limited
 
MSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложностиMSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложности
Magecom UK Limited
 
Adobe Stock Integration community project
Adobe Stock Integration community projectAdobe Stock Integration community project
Adobe Stock Integration community project
Magecom UK Limited
 
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s RazorProof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Magecom UK Limited
 
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайтаЧто нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Magecom UK Limited
 
Magento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это былоMagento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это было
Magecom UK Limited
 
Experience in Magento Community Projects
Experience in Magento Community ProjectsExperience in Magento Community Projects
Experience in Magento Community Projects
Magecom UK Limited
 
MSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party SystemsMSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party Systems
Magecom UK Limited
 
Business wants what?!
Business wants what?!Business wants what?!
Business wants what?!
Magecom UK Limited
 

More from Magecom UK Limited (20)

Magento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptxMagento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptx
 
Magento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia BondarMagento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia Bondar
 
Magento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad OpukhlyiMagento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad Opukhlyi
 
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
 
Magento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander ShkurkoMagento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander Shkurko
 
7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый
 
Magento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov AvexeyMagento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov Avexey
 
Making the Magento 2 Javascript Loading Great Again - Robin van Raan
Making the Magento 2 Javascript Loading Great Again - Robin van RaanMaking the Magento 2 Javascript Loading Great Again - Robin van Raan
Making the Magento 2 Javascript Loading Great Again - Robin van Raan
 
Deep Dive in Magento DI
Deep Dive in Magento DIDeep Dive in Magento DI
Deep Dive in Magento DI
 
From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko
 
Advanced GIT or How to Change the History
Advanced GIT  or How to Change the HistoryAdvanced GIT  or How to Change the History
Advanced GIT or How to Change the History
 
MSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложностиMSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложности
 
Adobe Stock Integration community project
Adobe Stock Integration community projectAdobe Stock Integration community project
Adobe Stock Integration community project
 
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s RazorProof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s Razor
 
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайтаЧто нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайта
 
Magento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это былоMagento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это было
 
Experience in Magento Community Projects
Experience in Magento Community ProjectsExperience in Magento Community Projects
Experience in Magento Community Projects
 
MSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party SystemsMSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party Systems
 
Business wants what?!
Business wants what?!Business wants what?!
Business wants what?!
 

UI components: synergy of backend and frontend