More Related Content
Similar to Meet Magento Belarus - Sergey Ivashchenko (20)
Meet Magento Belarus - Sergey Ivashchenko
- 1. Magento 2 UI Library
Sergey Ivashchenko
Magento is an eBay Inc. company. © 2014 Magento, Inc. All rights reserved.
- 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
© 2014 Magento, Inc. Page | 2
- 3. Magento 2 UI Library
Provides universal UI components for content organization
© 2014 Magento, Inc. Page | 3
using compact and simple configuration
and creating reusable widgets
- 4. Base
Data
© 2014 Magento, Inc. Page | 4
Layout
Interaction
Rendering
engine
- 6. Entity Data
Entity attributes Dynamic attributes References and extensions
© 2014 Magento, Inc. Page | 6
Data Manager
- 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
© 2014 Magento, Inc. Page | 7
- 8. Collecting Data
© 2014 Magento, Inc. Page | 8
Customer
Customer address Customer balance
Customer group
Website
- 9. Data Unit
Date of birth field
label: “Date of birth”
data_type: date
visible: true
value: 12.10.1989
© 2014 Magento, Inc. Page | 9
Metadata
Data
Group field
label: “Date of birth”
options: [
{
label: “Magento”,
value: “MAGE”
},
{
label: “Amasty”
value: “AM”
}
],
value: MAGE
- 10. Use
data_source.xml
<config ...>
<datasource
name="customer"
dataset="MagentoCustomerModelResourceCustomerCollection"
>
<fields entityType="customer">
<field name="entity_id" visible="false"/>
</fields>
</datasource>
</config>
MagentoUiDataProviderManager
getData
getMeta
© 2014 Magento, Inc. Page | 10
- 15. Declaration in Layout
Page layout
(cms_page_index.xml)
© 2014 Magento, Inc. Page | 15
…
<ui_component
name=“cms_pages_grid”
component=“listing” />
…
UI Component instance layout
(cms_page_grid.xml)
<referenceBlock name=“listing”>
<argument name="layout">
<item name="type“>tabs</item>
UI Library layout file
(ui_components.xml)
<block name=“listing”/>
</argument>
<ui_component
name=“cms_page_filter”
component=“filter”/>
<block name=“tabs”/>
<block name=“filter”/>
- 17. Configuration Storage
loadLayout
© 2014 Magento, Inc. Page | 17
UI Component 1
Configuration
Storage
UI Component 2
renderLayout
UI Component 1
Configuration
Storage
UI Component 2
prepare
render
- 19. UI Components Controllers
General UI Library controller
Render Component
UI Components controllers
Form Save
Form Validate
© 2014 Magento, Inc. Page | 19
- 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
© 2014 Magento, Inc. Page | 21
- 22. Customization and Extension Points
On Data level
© 2014 Magento, Inc. Page | 22
On Widget layout level
On UI Component level
On Page layout level
- 24. Thank you!
© 2014 Magento, Inc. Page | 24
sivashchenko@ebay.com