O.Posyniak - UI Components

© 2016 Magento, Inc. Page | 1

UI Компоненти


Розробник, Scrum MasterMagento Core, Команда Falcons

Олег Посиняк


Magento 2


Magento 2 Блоки


Структура Блоку

Блок

PHP Клас

PHTML Шабло

н


Що таке UI Компоненти?

• Еволюція Блоків

• Структурні елементи UI

• Поєднують JavaScript і бекенд


Структура UI Компонента

UI Компонент

XML Конфігурація

JS Компонент

PHP DataProvider

HTML Шаблон


Таблиці


Форми


Рендеринг

Layout сторінки

Конфігурація UI

Компонента

Пре-процес та

конвертація в JSON

Рендеринг за допомогою UI

Framework


Нове в структурі модулів

• …/…/UI – Джерело даних

• …/view/{area}/ui_component – Конфігурація UI Компонента

• …/…/web – Статичні файли


Створення сторінки з формою


Демо модуль

Де знайти?– https://github.com/shiftedreality/module-mageconf-ui-demo

Інсталяція– Через Composer php composer.phar require shiftedreality/module-

mageconf-ui-demo– Git clone

https://github.com/shiftedreality/module-mageconf-ui-demo


Базова структура модуля

• {vendor}/{module}/registration.php• …/…/etc/module.xml• …/…/etc/di.xml• …/…/etc/adminhtml/menu.xml• …/…/etc/adminhtml/routes.xml• …/…/Controller/Adminhtml/Index/Index.php• …/…/view/adminhtml/layout/demo_index_index.xml• …/…/view/adminhtml/ui_component/demo_item_form.xml


.../…/etc/di.xml

<config xmlns:xsi="…" xsi:noNamespaceSchemaLocation="…"> <virtualType name="ShiftedReality\MageConfDemo\Model\ResourceModel\Item\Grid\Collection"  </virtualType> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <arguments> <argument name="collections" xsi:type="array"> <item name="item_form_data_source" xsi:type="string"> ShiftedReality\MageConfDemo\Model\ResourceModel\Item\Grid\Collection </item> </argument> </arguments> </type></config>

• Конфігурація колекції через віртуальний тип• Додавання сконфігурованої колекції в фабрику колекцій


Конфігурація Layout• Файл view/adminhtml/layout/demo_index_index.xml• Додавання компонента в блок <referenceContainer>

<page xmlns:xsi="…" xsi:noNamespaceSchemaLocation="…"> <body> <referenceContainer name="content"> <uiComponent name="demo_item_form"/> </referenceContainer> </body></page>


Конфігурація компонента форми

<form xmlns:xsi="…" xsi:noNamespaceSchemaLocation="…"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array">  </item> <item name="config" xsi:type="array">  </item> <item name="template" xsi:type="string">templates/form/collapsible</item> <item name="buttons" xsi:type="array">  </item> </argument> <dataSource name="item_form_data_source">  </dataSource> </form>

…/…/view/adminhtml/ui_component/demo_block_form.xml


Конфігурація джерела даних

<form xmlns:xsi="…" xsi:noNamespaceSchemaLocation="…">  <dataSource name="item_form_data_source"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string"> ShiftedReality\MageConfDemo\Ui\DemoDataProvider </argument>  </argument> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string"> Magento_Ui/js/form/provider </item> </item> </argument> </dataSource> </form>



Джерело даних(DataProvider)

Magento/Framework/View/Element/UiComponent/DataProvider/DataProviderInterface.php

Magento/Framework/View/Element/UiComponent/DataProvider/

DataProvider.php

Magento/Ui/DataProvider/AbstractDataProvider.php

ShiftedReality/MageConfDemo/Ui/DemoDataProvider.php


Форма без UI Компонентів


Конфігурація елементів в формі

<form xmlns:xsi="…" xsi:noNamespaceSchemaLocation="…"> 

<fieldset name="general"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string">Simple elements</item> <item name="collapsible" xsi:type="boolean">false</item> </item> </argument> <field name="input"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sortOrder" xsi:type="number">10</item> <item name="dataType" xsi:type="string">string</item> <item name="formElement" xsi:type="string">input</item> <item name="label" xsi:type="string" translate="true">Sample Input</item> </item> </argument> </field> </fieldset>

</form>



Форма з UI-компонентом


Динамчна конфігурація в PHP

use Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider;

class DemoDataProvider extends DataProvider{ public function getMeta() { $meta = parent::getMeta(); $meta['general']['children']['dynamic']['arguments']['data']['config'] = [ 'dataType' => Boolean::NAME, 'formElement' => Checkbox::NAME, 'notice' => __('This is dynamic element added from backend'), 'label' => __('Sample Checkbox'), 'code' => 'checkbox', 'source' => 'general', 'sortOrder' => 40, 'componentType' => Field::NAME, 'prefer' => 'toggle', ]; return $meta; }}

…/…/Ui/DemoDataProvider.php


Відображення динамічних елементів


JavaScript & HTML


Бібліотека компонентів• Magento_UI/view/base/web/js/form/element• Magento_UI/view/base/web/js/grid

Форми Таблиціboolean.js columns/actions.js

checkbox-set.js columns/date.js

country.js columns/multiselect.js

date.js …

file-uploader.js editing/bulk.js

media.js editing/editor.js

… …


Абстрактний компонент

define([…], function () { 'use strict'; return Element.extend({ defaults: { visible: true, preview: '', focused: false, required: false, disabled: false, valueChangedByUser: false, elementTmpl: 'ui/form/element/input', tooltipTpl: 'ui/form/element/helper/tooltip', 'input_type': 'input', placeholder: '', description: '', } });});

Magento/Ui/view/base/web/js/form/element/abstract.js


Компонент Textarea

define([ './abstract'], function (Abstract) { 'use strict';

return Abstract.extend({ defaults: { cols: 15, rows: 2, elementTmpl: 'ui/form/element/textarea' } });});

Magento/Ui/view/base/web/js/form/element/textarea.js


Шаблони

• Використовують Knockout.js конструкції

• Мають доступ до конфігурації JS компонента

Magento_UI/view/base/web/templates


Шаблон Textarea

<textarea class="admin__control-textarea" data-bind=" value: value, valueUpdate: valueUpdate, hasFocus: focused, attr: { name: inputName, cols: cols, rows: rows, 'aria-describedby': noticeId, placeholder: placeholder, id: uid, disabled: disabled }" />

Magento/Ui/view/base/web/templates/form/element/textarea.html


Розширення UI Компонента


JavaScript компонент

define([ 'Magento_Ui/js/form/element/abstract' ], function (Abstract) { 'use strict';

return Abstract.extend({ defaults: { placeholder: 'This is demo component' } })});

…/…/view/adminhtml/web/js/components/form/demo.js


Шаблон

<input class="admin__control-text" style="background-color: red;" type="text" data-bind=" event: {change: userChanges}, value: value, hasFocus: focused, valueUpdate: valueUpdate, attr: { name: inputName, placeholder: placeholder, 'aria-describedby': noticeId, id: uid, disabled: disabled }"/>

…/…/view/adminhtml/web/template/form/element/demo.html


Розширення декларації форми…/…/view/adminhtml/ui_component/demo_block_form.xml

<form xmlns:xsi="…" xsi:noNamespaceSchemaLocation="…">  <fieldset name="general">  <field name="demo"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sortOrder" xsi:type="number">60</item> <item name="dataType" xsi:type="string">string</item> <item name="formElement" xsi:type="string">input</item> <item name="label" xsi:type="string" translate="true">Demo UI Component</item> <item name="component" xsi:type="string"> ShiftedReality_MageConfDemo/js/components/form/demo </item> <item name="elementTmpl" xsi:type="string"> ShiftedReality_MageConfDemo/form/element/demo </item> </item> </argument> </field> </fieldset></form>


Форма з новим елементом


Корисні ресурси

• Офіційна документація http://devdocs.magento.com/guides/v2.0/ui-components/ui-component.html

• Демо модуль https://github.com/shiftedreality/module-mageconf-ui-demo

• Knockout context debugger https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en

• Magento StackExchange http://magento.stackexchange.com/

http://devdocs.magento.com/guides/v2.0/ui-components/ui-component.html






https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en




http://magento.stackexchange.com/

http://magento.stackexchange.com/

Documents

O.Posyniak - UI Components