Meet Magento Belarus - Sergey Ivashchenko speech on Magento 2 UI Library http://by.meet-magento.com/ http://amasty.com/

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

5. 1 Data Source
© 2014 Magento, Inc. Page | 5

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

11. 2 Layout
© 2014 Magento, Inc. Page | 11

12. Components
Widgets Sub-Widgets Layouts
© 2014 Magento, Inc. Page | 12
(Containers)
Elements

13. Sub-Widgets
© 2014 Magento, Inc. Page | 13

14. Layouts
(Containers)
Tabs Fieldsets
© 2014 Magento, Inc. Page | 14

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”/>

16. 3 Rendering
© 2014 Magento, Inc. Page | 16

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

18. Rendering Engines
Direct HTML On client side etc.
© 2014 Magento, Inc. Page | 18

19. UI Components Controllers
 General UI Library controller
 Render Component
 UI Components controllers
 Form Save
 Form Validate
© 2014 Magento, Inc. Page | 19

20. 4 Finally
© 2014 Magento, Inc. Page | 20

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

23. © 2014 Magento, Inc. Page | 23
Q&A

24. Thank you!
© 2014 Magento, Inc. Page | 24
sivashchenko@ebay.com