Meet Magento Belarus - Sergey Ivashchenko

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


Magento 2 UI Library

Provides universal UI components for content organization using compact and simple configuration

and creating reusable widgets


Base

Data

Layout

Interaction

Renderingengine

© 2014 Magento, Inc. Page | 5© 2014 Magento, Inc. Page | 5

1 Data Source


Entity Data

Entity attributes References and extensionsDynamic attributes

Data Manager


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


Collecting Data

Customer

Customer address Customer balance

Customer group

Website


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


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>


2 Layout


Components

Widgets Sub-Widgets Layouts(Containers)

Elements


Sub-Widgets


Layouts(Containers)

Tabs Fieldsets


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


3 Rendering


Configuration Storage

loadLayout

UI Component 1


UI Component 2

renderLayout

UI Component 1


UI Component 2

prepare

render


Rendering Engines

Direct HTML On client side etc.


UI Components Controllers

General UI Library controller

Render Component

UI Components controllers

Form Save

Form Validate


4 Finally


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


Customization and Extension Points

On Data level

On UI Component level

On Widget layout level

On Page layout level


Q&A


Thank you!

[email protected]

Meet Magento Belarus - Sergey Ivashchenko

Presentations & Public Speaking

Transcript of Meet Magento Belarus - Sergey Ivashchenko