Meet Magento Belarus - Sergey Ivashchenko
-
Upload
amasty -
Category
Presentations & Public Speaking
-
view
309 -
download
4
description
Transcript of Meet Magento Belarus - Sergey Ivashchenko
![Page 1: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/1.jpg)
Magento is an eBay Inc. company. © 2014 Magento, Inc. All rights reserved.
Magento 2 UI Library
Sergey Ivashchenko
![Page 2: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/2.jpg)
© 2014 Magento, Inc. Page | 2
Sergey Ivashchenko
Backend developer in Magento
Working in Magento for about 2.5 years
Projects:
Magento 1.13
Magento 2
(Full Page Cache, Filesystem, Pricing, UI Library)
Magento Testing Framework
Current projects:
Magento 2 Sales modules
Magento Testing Framework
![Page 3: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/3.jpg)
© 2014 Magento, Inc. Page | 3
Magento 2 UI Library
Provides universal UI components for content organization using compact and simple configuration
and creating reusable widgets
![Page 4: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/4.jpg)
© 2014 Magento, Inc. Page | 4
Base
Data
Layout
Interaction
Renderingengine
![Page 5: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/5.jpg)
© 2014 Magento, Inc. Page | 5© 2014 Magento, Inc. Page | 5
1 Data Source
![Page 6: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/6.jpg)
© 2014 Magento, Inc. Page | 6
Entity Data
Entity attributes References and extensionsDynamic attributes
Data Manager
![Page 7: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/7.jpg)
© 2014 Magento, Inc. Page | 7
Data Manager
Responsible for gathering all data related to entity
Works with preset (etc/data_source/<preset_name>.xml file)
Handles references and allows extensions
![Page 8: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/8.jpg)
© 2014 Magento, Inc. Page | 8
Collecting Data
Customer
Customer address Customer balance
Customer group
Website
![Page 9: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/9.jpg)
© 2014 Magento, Inc. Page | 9
Data Unit
Date of birth fieldlabel: “Date of birth”data_type: datevisible: truevalue: 12.10.1989
Metadata
Data
Group fieldlabel: “Date of birth”options: [{
label: “Magento”,value: “MAGE”
},{
label: “Amasty”value: “AM”
}],
value: MAGE
![Page 10: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/10.jpg)
© 2014 Magento, Inc. Page | 10
Use
data_source.xml
Magento\Ui\DataProvider\Manager
getData
getMeta
<config ...> <datasource name="customer" dataset="Magento\Customer\Model\Resource\Customer\Collection" > <fields entityType="customer"> <field name="entity_id" visible="false"/> </fields> </datasource></config>
![Page 11: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/11.jpg)
© 2014 Magento, Inc. Page | 11© 2014 Magento, Inc. Page | 11
2 Layout
![Page 12: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/12.jpg)
© 2014 Magento, Inc. Page | 12
Components
Widgets Sub-Widgets Layouts(Containers)
Elements
![Page 13: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/13.jpg)
© 2014 Magento, Inc. Page | 13
Sub-Widgets
![Page 14: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/14.jpg)
© 2014 Magento, Inc. Page | 14
Layouts(Containers)
Tabs Fieldsets
![Page 15: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/15.jpg)
© 2014 Magento, Inc. Page | 15
Declaration in Layout
Page layout(cms_page_index.xml)
…<ui_component
name=“cms_pages_grid”component=“listing” />
…
UI Library layout file(ui_components.xml)<block name=“listing”/>
<argument name="layout"><item name="type“>tabs</item>
</argument>
<ui_component name=“cms_page_filter”
component=“filter”/>
<block name=“filter”/>
<block name=“tabs”/>
UI Component instance layout(cms_page_grid.xml)
<referenceBlock name=“listing”>
![Page 16: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/16.jpg)
© 2014 Magento, Inc. Page | 16© 2014 Magento, Inc. Page | 16
3 Rendering
![Page 17: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/17.jpg)
© 2014 Magento, Inc. Page | 17
Configuration Storage
loadLayout
UI Component 1
Configuration Storage
UI Component 2
renderLayout
UI Component 1
Configuration Storage
UI Component 2
prepare
render
![Page 18: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/18.jpg)
© 2014 Magento, Inc. Page | 18
Rendering Engines
Direct HTML On client side etc.
![Page 19: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/19.jpg)
© 2014 Magento, Inc. Page | 19
UI Components Controllers
General UI Library controller
Render Component
UI Components controllers
Form Save
Form Validate
![Page 20: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/20.jpg)
© 2014 Magento, Inc. Page | 20© 2014 Magento, Inc. Page | 20
4 Finally
![Page 21: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/21.jpg)
© 2014 Magento, Inc. Page | 21
Conclusions
Granular and flexible layout structure: UI Components
UI Component handle interaction by itself: UI Components Controllers
Tools for data preparation and configuration: Data Manager
UI Library supports multiple rendering engines: Configuration Storage
![Page 22: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/22.jpg)
© 2014 Magento, Inc. Page | 22
Customization and Extension Points
On Data level
On UI Component level
On Widget layout level
On Page layout level
![Page 23: Meet Magento Belarus - Sergey Ivashchenko](https://reader034.fdocuments.net/reader034/viewer/2022050919/54840804b4af9f730d8b4a9c/html5/thumbnails/23.jpg)
© 2014 Magento, Inc. Page | 23© 2014 Magento, Inc. Page | 23
Q&A