Post on 05-Dec-2014
description
transcript
Magento is an eBay Inc. company. © 2014 Magento, Inc. All rights reserved.
Magento 2 UI Library
Sergey Ivashchenko
© 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
© 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
© 2014 Magento, Inc. Page | 4
Base
Data
Layout
Interaction
Renderingengine
© 2014 Magento, Inc. Page | 5© 2014 Magento, Inc. Page | 5
1 Data Source
© 2014 Magento, Inc. Page | 6
Entity Data
Entity attributes References and extensionsDynamic attributes
Data Manager
© 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
© 2014 Magento, Inc. Page | 8
Collecting Data
Customer
Customer address Customer balance
Customer group
Website
© 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
© 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>
© 2014 Magento, Inc. Page | 11© 2014 Magento, Inc. Page | 11
2 Layout
© 2014 Magento, Inc. Page | 12
Components
Widgets Sub-Widgets Layouts(Containers)
Elements
© 2014 Magento, Inc. Page | 13
Sub-Widgets
© 2014 Magento, Inc. Page | 14
Layouts(Containers)
Tabs Fieldsets
© 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”>
© 2014 Magento, Inc. Page | 16© 2014 Magento, Inc. Page | 16
3 Rendering
© 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
© 2014 Magento, Inc. Page | 18
Rendering Engines
Direct HTML On client side etc.
© 2014 Magento, Inc. Page | 19
UI Components Controllers
General UI Library controller
Render Component
UI Components controllers
Form Save
Form Validate
© 2014 Magento, Inc. Page | 20© 2014 Magento, Inc. Page | 20
4 Finally
© 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
© 2014 Magento, Inc. Page | 22
Customization and Extension Points
On Data level
On UI Component level
On Widget layout level
On Page layout level
© 2014 Magento, Inc. Page | 23© 2014 Magento, Inc. Page | 23
Q&A
© 2014 Magento, Inc. Page | 24© 2014 Magento, Inc. Page | 24
Thank you!
sivashchenko@ebay.com