Cómo usar los componentes de la interfaz de usuario de Magento 2 en módulos y soluciones [Parte 1]

¡Hola a los lectores del blog de Amasty!

Hoy nos centraremos en la última funcionalidad de Magento 2 que abre numerosas oportunidades para crear una interfaz de usuario fácil de usar para Magento. Eso es componentes de la interfaz de usuario. Este es un tutorial para Magento 2. Sin más preámbulos, comencemos con el valor de los componentes de la interfaz de usuario para los desarrolladores de Magento 2.

Resumen del artículo [ ocultar ]

  • Los conceptos básicos de los componentes de la interfaz de usuario de Magento 2
  • Componentes de interfaz de usuario predeterminados en Magento 2 
  • Componentes de la interfaz de usuario en Magento 2 Catalog Grid
  • Componentes personalizados de la interfaz de usuario de Magento 2
  • Línea de fondo

¿NECESITA AYUDA CON LOS COMPONENTES DE LA IU DE MAGENTO 2?
DEJA TU CORREO ELECTRÓNICO Y NOS CONTACTAREMOS CONTIGO PARA DISCUTIR CÓMO PODEMOS SER ÚTILES.

(function() {
if (!window.mc4wp) {
window.mc4wp = {
listeners: [],
forms : {
on: function (event, callback) {
window.mc4wp.listeners.push({
event : event,
callback: callback
});
}
}
}
}
})();

(function() {
mc4wp.forms.on(‘27221.submit’, function(form, event) {
event.preventDefault();

var submitForm = function() {
if(form.element.className.indexOf(‘mc4wp-ajax’) > -1) {
mc4wp.forms.trigger(‘submit’, [form, event]);
} else {
form.element.submit();
}
};
var previousToken = form.element.querySelector(‘input[name=_mc4wp_grecaptcha_token]’);
if (previousToken) {
previousToken.parentElement.removeChild(previousToken);
}

try {
window.grecaptcha
.execute(‘6LcoY6UZAAAAAP7Dqjtr6MPM8yGySn617oAlWVSx’, {action: ‘mc4wp_form_submit’})
.then(function (token) {
var tokenEl = document.createElement(‘input’);
tokenEl.type = ‘hidden’;
tokenEl.value = token;
tokenEl.name = ‘_mc4wp_grecaptcha_token’;
form.element.appendChild(tokenEl);
submitForm();
});
} catch(err) {
submitForm();
throw err;
}
})
})();

Los conceptos básicos de los componentes de la interfaz de usuario de Magento 2

El componente de la interfaz de usuario es una innovación de Magento 2 diseñada para representar elementos de la interfaz de usuario en la pantalla. Permiten una conexión entre el elemento visual de la interfaz de usuario y el procesamiento de datos relacionados que enviaron los usuarios. Los componentes de la interfaz de usuario, en esencia, hacen que sea mucho más fácil para los gerentes usar cuadrículas y brindan un par de otros beneficios, como:

  • Layout.xml simplificado para la parte de back-end de Magento 2;
  • Capacidad para fusionar elementos HTML y JavaScript y utilizar este elemento compuesto como código JavaScript;
  • Capacidad para crear componentes de interfaz de usuario sofisticados utilizando los básicos;
  • Capacidad de usar una sola entidad para renderizar un elemento de la interfaz de usuario y trabajar con él.  

Ahora, consideraremos cómo funcionan los componentes de la interfaz de usuario en Magento 2 comercial y módulos personalizados.

Componentes de interfaz de usuario predeterminados en Magento 2 

Para comprender cómo se definen los componentes de la interfaz de usuario en Magento 2, tomemos el   ejemplo del componente de interfaz de usuario <listing> .

La etiqueta <listing> es un componente de interfaz de usuario estándar en Magento 2. De forma predeterminada, puede encontrar las definiciones de todos los componentes de interfaz de usuario estándar en el archivo vendor/magento/module-ui/view/base/ui_component/etc/definition.xml . Por ejemplo, así es como   se define el componente de interfaz de usuario <listing> en el archivo definition.xml:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. < clasificación de listas = «verdadero» clase = «MagentoUiComponentListing» componente = «uiComponent» >
  2.     < nombre del argumento = «datos» xsi:tipo = «matriz» >
  3.         <item name = «template» xsi:type = «string» > templates/listing/default </item >
  4.         < nombre del elemento = «save_parameters_in_session» xsi:tipo = «cadena» > 1 </elemento >
  5.         < nombre del elemento = «raíz_cliente» xsi:tipo = «cadena» > mui/index/render </elemento >
  6.     </argumento >
  7. </listado >

Veamos esta definición en detalle.

En primer lugar, la etiqueta <listing>  per se contiene dos atributos, que son clase y componente . El atributo de clase define la clase de PHP que es responsable de procesar los datos en el servidor, así como de preparar los datos para el componente de interfaz de usuario <listing> . El atributo del componente establece el módulo js que es responsable de representar el componente de la interfaz de usuario en el navegador.

 Para obtener más información sobre cómo nombrar y definir módulos js en Magento 2, puede consultar la  documentación sobre el cargador de módulos RequireJS.

En segundo lugar, la etiqueta <argument> incluye datos que se utilizan para inicializar un objeto de la clase MagentoUiComponentListing o cualquier otro objeto de la clase indicada en el atributo de clase . Tenga en cuenta que la clase de PHP indicada en el atributo de clase debe heredarse de la clase principal MagentoUiComponentAbstractComponent . Así es como se realiza MagentoUiComponentListing :

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <?php
  2. /**
  3.  * Copyright © Magento, Inc. Todos los derechos reservados.
  4.  * Consulte COPYING.txt para conocer los detalles de la licencia.
  5.  */
  6. espacio de nombres MagentoUiComponent ;
  7. use MagentoUiComponentListingColumns ;
  8. /**
  9.  * @api
  10.  * @desde 100.0.2
  11.  */
  12. Listado de clases extiende AbstractComponent
  13. {
  14. // Algo de código php.
  15. }

La   etiqueta <argument> en el código PHP se transforma en el conjunto de datos que se usa en el constructor de clases MagentoUiComponentAbstractComponent .

En tercer lugar, el elemento de plantilla define la plantilla que se utiliza para representar un componente de interfaz de usuario. En nuestro caso, la plantilla se define como templates/listing/default . Esto significa que se utiliza la siguiente plantilla:

proveedor/magento/module-ui/view/base/ui_component/templates/listing/default.xhtml

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <div
  2.    class = «admin__data-grid-outer-wrap»
  3.    enlace de datos = «alcance: ‘{{getName()}}.{{getName()}}'»
  4.    xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance»
  5.    xsi:noNamespaceSchemaLocation = «urna:magento:módulo:Magento_Ui:etc/ui_template.xsd» >
  6.     <div data-role = «spinner» data-component = «{{getName()}}.{{getName()}}.{{spinner}}» class = «admin__data-grid-loading-mask» >
  7.         < clase div = «spinner» >
  8.             <span /> <span /> <span /> <span /> <span /> <span /> <span /> <span />
  9.         </div >
  10.     </div >
  11.     <!– ko plantilla: getTemplate() –><!– /ko –>
  12. </div >

Mediante esta plantilla, Magento 2 anula la información entre llaves dobles {{…}} con un método PHP del componente de interfaz de usuario. En este caso, el sistema llamará al método getName() de la clase MagentoUiComponentListing .

Ahora, para comprender mejor cómo funcionan los componentes de la interfaz de usuario para partes reales de la interfaz de usuario, veamos un módulo de catálogo estándar de Magento 2 (Magento_Catalog).

Componentes de la interfaz de usuario en Magento 2 Catalog Grid

Considere crear una cuadrícula de productos Magento 2 en un módulo personalizado, con el módulo Catálogo Magento. Primero, para estar en la misma página, veamos la cuadrícula en sí. Para ello, vaya al panel de administración y abra Catálogo -> Producto.

Ahora, veamos cómo codificarlo.

Los componentes de la interfaz de usuario se agregan a través del diseño.

Si abrimos el archivo vendor/magento/module-catalog/view/adminhtml/layout/catalog_product_index.xml , podemos activar el componente UI con el siguiente código:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. < nombre del contenedor de referencia = «contenido» >
  2.     < nombre del componente ui = «lista_producto» />
  3.     < … otra etiqueta … >
  4. </contenedor de referencia >

La etiqueta uiComponent se usa para insertar un objeto de componente de interfaz de usuario ( product_listing en nuestro ejemplo) en el árbol de componentes. Después de insertar el componente de la interfaz de usuario, debemos definirlo en el diseño. Para esto, vamos a la carpeta [path_to_module]/view/adminhtml/ui_component/  y creamos un archivo .xml con el mismo nombre que el componente UI.

En la carpeta vendor/magento/module-catalog/view/adminhtml/ui_component/ , encontrará el archivo product_listing.xml , que contiene la descripción de nuestro componente de interfaz de usuario. Este archivo tiene varias secciones, cada una de las cuales describe aspectos particulares del componente de la interfaz de usuario. La descripción comienza con la etiqueta <argumento> y se ve a continuación:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <listado xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance»                                      xsi:noNamespaceSchemaLocation = «urn:magento:module:Magento_Ui:etc/ui_configuration.xsd» >
  2.     < nombre del argumento = «datos» xsi:tipo = «matriz» >
  3.         < nombre del elemento = «js_config» xsi:tipo = «matriz» >
  4.             < nombre del elemento = «proveedor» xsi:tipo = «cadena» > lista_producto.lista_producto_fuente_datos </elemento >
  5.         </elemento >
  6.     </argumento >
  7.     < … otras etiquetas … >
  8. </listado >

Aquí, la etiqueta <argument> también se usa para crear un conjunto de datos para el constructor de clases   MagentoUiComponentListing . El elemento del proveedor de Magento 2 , transferido en datos, inicia dataSource . Como puede ver, el valor del proveedor,   product_listing.product_listing_data_source , consta de dos partes. El primero, product_listing , es el nombre del componente de la interfaz de usuario. La última parte, product_listing_data_source , es el nombre de la fuente de datos que debe procesar los datos en el servidor y hacer que el componente de la interfaz de usuario funcione con estos datos. dataSource también se define en el archivo  

proveedor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <listado xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance»          xsi:noNamespaceSchemaLocation = «urn:magento:module:Magento_Ui:etc/ui_configuration.xsd» >
  2.             < … otras etiquetas … >
  3.             < nombre de la fuente de datos = componente «product_listing_data_source» = «Magento_Ui/js/grid/provider» >
  4.                         < … otras etiquetas secundarias … >
  5.                         < clase de proveedor de datos = «MagentoCatalogUiDataProviderProductProductDataProvider»                                           name = «product_listing_data_source» >
  6.                     <configuración >
  7.                             <requestFieldName > id </requestFieldName >
  8.                             <nombre del campo primario > id_entidad </ nombre del campo primario >
  9.                     </configuración >
  10.                         </proveedordedatos >
  11.             </fuente de datos >
  12.         </listado >

La etiqueta <dataSource> define el componente responsable de inicializar localStorage en el navegador usando un módulo js. En nuestro ejemplo, este es Magento_Ui/js/grid/provider con la siguiente ruta completa al archivo:

proveedor/magento/module-ui/view/base/web/js/grid/provider.js

 Para obtener más información sobre almacenamiento local , consulte este tutorial .

La  etiqueta <dataSource> contiene la subetiqueta <dataProvider> que forma la clase PHP responsable de cómo el componente UI procesa los datos en el servidor Magento 2. En nuestro caso, este es MagentoCatalogUiDataProviderProductProductDataProvider . La clase de PHP establecida en <proveedor de datos> se hereda de la superclase Magento UiDataProviderAbstractDataProvider :

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <?php
  2. /**
  3.  * Copyright © Magento, Inc. Todos los derechos reservados.
  4.  * Consulte COPYING.txt para conocer los detalles de la licencia.
  5.  */
  6. espacio de nombres MagentoCatalogUiDataProviderProduct ;
  7. use MagentoCatalogModelResourceModelProductCollectionFactory ;
  8. /**
  9.  * Clase ProductDataProvider
  10.  *
  11.  * @api
  12.  * @desde 100.0.2
  13.  */
  14. clase ProductDataProvider extiende MagentoUiDataProviderAbstractDataProvider
  15. {
  16.  // Algún código php
  17. }

Como puede ver,  la etiqueta <dataProvider> contiene configuraciones como requestFieldName y primaryFieldName .

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. < clase de proveedor de datos = «MagentoCatalogUiDataProviderProductProductDataProvider»                                           name = «product_listing_data_source» >
  2.             <configuración >
  3.                         <requestFieldName > id </requestFieldName >
  4.                         <nombre del campo primario > id_entidad </ nombre del campo primario >
  5.             </configuración >
  6. </proveedordedatos >

El parámetro primaryFieldName se relaciona con la columna principal de la base de datos con la que trabaja dataProvider . El parámetro requestFieldName habilita la URL AJAX utilizada por la cuadrícula.

Como puede ver, la etiqueta <dataSource> va seguida de la etiqueta <listingToolbar> en el componente de interfaz de usuario product_listing .

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <listado xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance»          xsi:noNamespaceSchemaLocation = «urn:magento:module:Magento_Ui:etc/ui_configuration.xsd» >
  2.             < … otras etiquetas … >
  3.             < nombre de la fuente de datos = componente «product_listing_data_source» = «Magento_Ui/js/grid/provider» >
  4.                         < … otras etiquetas secundarias … >
  5.             </fuente de datos >
  6.             < … otras etiquetas … >
  7.             <listingToolbar nombre = «listing_top» >
  8.                         < … otras etiquetas secundarias … >
  9.             </listingToolbar >
  10.             < … otras etiquetas … >
  11. </listado >

La etiqueta   <listingToolbar> define el elemento que contiene filtros, marcadores, editor de columnas, campo de búsqueda de texto completo y acciones masivas. Así es como se ven estos componentes de la interfaz de usuario en la cuadrícula de Magento 2:

La etiqueta <listingToolbar> contiene subelementos responsables de características particulares de la cuadrícula. Consideremos algunos ejemplos:

  • La etiqueta <sticky> bloquea el menú superior y lo hace seguir los desplazamientos de los usuarios (ver un ejemplo a continuación);

bloquea el menú superior de la cuadrícula.» width=»1024″ height=»349″ srcset=»https://amasty.com/blog/wp-content/uploads/2018/06/listing-toolbar-sticky-tag-1024×349.jpg 1024w, https://amasty.com/blog/wp-content/uploads/2018/06/listing-toolbar-sticky-tag-768×262.jpg 768w, https://amasty.com/blog/wp-content/uploads/2018/06/listing-toolbar-sticky-tag-250×85.jpg 250w, https://amasty.com/blog/wp-content/uploads/2018/06/listing-toolbar-sticky-tag-1080×368.jpg 1080w» sizes=»(max-width: 1024px) 100vw, 1024px»>

  • La etiqueta <columnsControls name=”columns_controls”> agrega el botón Columnas ;
  • La etiqueta <filters name=”listing_filters”> agrega el botón Filtros y amplía la configuración de filtrado de columnas (ver más abajo);

La <listingToolbar> va seguida de una etiqueta predeterminada de Magento 2 <columns> .  

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <listado xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance»          xsi:noNamespaceSchemaLocation = «urn:magento:module:Magento_Ui:etc/ui_configuration.xsd» >
  2.             < … otras etiquetas … >
  3.             <listingToolbar nombre = «listing_top» >
  4.                         < … otras etiquetas secundarias … >
  5.             </listingToolbar >
  6.             <columnas nombre = «producto_columnas» clase = «MagentoCatálogoUiComponenteListadoColumnas» >
  7.                         < … otras etiquetas secundarias … >
  8.             </columnas >
  9.             < … otras etiquetas … >
  10. </listado >

La etiqueta <columns> es responsable de representar la cuadrícula en sí, por lo que contiene una lista completa de las columnas que se representarán en la cuadrícula. Examinemos algunas columnas definidas en esta etiqueta:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <columnas nombre = «producto_columnas» clase = «MagentoCatálogoUiComponenteListadoColumnas» >
  2.             < … otras etiquetas … >
  3.             <selectionsColumn name = «ids» sortOrder = «0» >
  4.             <configuración >
  5.                     <indexField > entidad_id </indexField >
  6.             </configuración >
  7.             </columna de selecciones >
  8.  < … otras etiquetas … >
  9. </columnas >

<selectionsColumn> es el componente de la interfaz de usuario de Magento 2 que define el filtro de selección  que permite a los usuarios «seleccionar todo», «seleccionar todo en la página», «deseleccionar todo» o «deseleccionar todo en la página». Así es como se ve en el módulo.

Como de costumbre, esta columna va primero. Tenga en cuenta que el atributo de nombre debe tener el valor de ids , y el valor de indexField debe coincidir con la columna principal de la base de datos que se utiliza para crear la colección para la transferencia de datos a la cuadrícula.

Todas las demás columnas se agregan de manera similar, así que tomemos la columna Miniatura como ejemplo:

Así es como se define Miniatura:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <columnas nombre = «producto_columnas» clase = «MagentoCatálogoUiComponenteListadoColumnas» >
  2.             < … otras etiquetas … >
  3.             < nombre de columna = «miniatura» clase = «MagentoCatalogUiComponentListingColumnsThumbnail»                                                     componente = «Magento_Ui/js/grid/columns/thumbnail» sortOrder = «20» >
  4.                         <configuración >
  5.                                     <altField > nombre </altField >
  6.                                     <hasPreview > 1 </hasPreview >
  7.                                     <añadirCampo > verdadero </añadirCampo >
  8.                                     <label translate = «true» > Miniatura </label >
  9.                                     <ordenable > falso </ordenable >
  10.                         </configuración >
  11.             </columna >
  12.             < … otras etiquetas … >
  13. </columnas >

El elemento <column> define la columna en sí. El atributo de clase define la clase de PHP que procesa los datos y la configuración de este elemento. El segundo atributo, componente , es responsable de representar el elemento <column> a través de un módulo js.

Eso es todo. Ahora dejemos la teoría a un lado e intentemos crear nuestro propio componente de interfaz de usuario desde cero.

Componentes personalizados de la interfaz de usuario de Magento 2

Para ilustrar cómo crear un componente de interfaz de usuario personalizado, creemos un módulo simple Amasty_UiTest . Este módulo agrega una nueva pestaña Prueba de interfaz de usuario al sistema :

En este menú, un componente de interfaz de usuario de prueba agregará el texto » Este es un componente de interfaz de usuario de prueba «:

Al igual que en el módulo Magento_Catalog , el componente de la interfaz de usuario se agrega a través de un diseño.

aplicación/código/Amasty/UiTest/view/adminhtml/layout/amasty_uitest_index_index.xml

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <página xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance»             xsi:noNamespaceSchemaLocation = «urn:magento:framework:View/Layout/etc/page_configuration.xsd» >
  2.             < nombre de bloque de referencia = «contenido» >
  3.                         < nombre del componente ui = «amasty_uitest» />
  4.             </bloque de referencia >
  5. </página >

Una ruta completa al componente de interfaz de usuario amasty_uitest es la siguiente:

aplicación/código/Amasty/UiTest/view/adminhtml/layout/amasty_uitest_index_index.xml

Vamos a crear una nueva plantilla para amasty_uitest :

aplicación/código/Amasty/UiTest/view/adminhtml/ui_component/templates/test.xhtml

La plantilla contiene el código:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <? versión xml = codificación «1.0» = «UTF-8» ?>
  2. <div >
  3.             <h1 > Este es un componente de interfaz de usuario de prueba </h1 >
  4.             <div data-bind = «scope: ‘{{getName()}}.{{getName()}}'» class = «entry-edit form-inline» >
  5.                         <!– ko plantilla: getTemplate() –><!– /ko –>
  6.             </div >
  7. </div >

Ahora, introduzcamos la plantilla en el componente de interfaz de usuario amasty_uitest .

aplicación/código/Amasty/UiTest/view/adminhtml/ui_component/amasty_uitest.xml

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <container xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance» xsi:noNamespaceSchemaLocation = «urn:magento:module:Magento_Ui:etc/ui_configuration.xsd» >
  2.             < nombre del argumento = «datos» xsi:tipo = «matriz» >
  3.                         <item name = «template» xsi:type = «string» > templates/test </item >
  4.             </argumento >
  5.             < … otras etiquetas … >
  6. </contenedor >

Luego introducimos dataSource al componente UI.

aplicación/código/Amasty/UiTest/view/adminhtml/ui_component/amasty_uitest.xml

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.comDescargar RawVer original
  1. <container xmlns:xsi = «http://www.w3.org/2001/XMLSchema-instance»            xsi:noNamespaceSchemaLocation = «urn:magento:module:Magento_Ui:etc/ui_configuration.xsd» >
  2.             < … otras etiquetas … >
  3.             < nombre de la fuente de datos = «amasty_uitest_data_source» >
  4.                         < nombre del argumento = «proveedordatos» xsi:tipo = «objetoconfigurable» >
  5.                                     < nombre del argumento = «clase» xsi:tipo = «cadena» >
  6.                                                 AmastyUiTestModelDataProvider
  7.                                     </argumento >
  8.                                     <argumento nombre = «nombre» xsi:tipo = «cadena» >
  9.                                                 amasty_uitest_data_source
  10.                                     </argumento >
  11.                                     <argumento nombre = «primaryFieldName» xsi:tipo = «cadena» > entidad_id </argumento >
  12.                                     <argumento nombre = «requestFieldName» xsi:tipo = «cadena» > id </argumento >
  13.                         </argumento >
  14.             </fuente de datos >
  15. </contenedor >

Eso es todo. Ahora, un nuevo componente de la interfaz de usuario está en funcionamiento.

Los componentes de la interfaz de usuario se utilizan ampliamente en módulos, como Promociones especiales , Feed de productos , Atributos de pedidos y Atributos de clientes de Amasty. En pocas palabras, casi todos los módulos que funcionan con el panel de administración (backend de Magento 2) se basan en componentes de la interfaz de usuario.

Línea de fondo

Hoy exploramos los componentes de la interfaz de usuario en Magento 2, revisamos cómo funcionan en un módulo de catálogo estándar y aprendimos a crear componentes desde cero.

Como puede ver, el componente de la interfaz de usuario es un medio poderoso para crear elementos de la interfaz. El beneficio clave que brindan los componentes de la interfaz de usuario de Magento 2 es la combinación de contenido HTML y JavaScript, lo que permite crear nuevos componentes con cualquier apariencia y funciones posibles. Mientras diseña sus propios módulos de Magento 2, puede utilizar los componentes de la interfaz de usuario estándar de Magento 2 o desarrollar su propia extensión para propósitos particulares.

Siéntase libre de dejar comentarios y preguntas en el feed a continuación. ¡Y esté atento, ya que se acerca nuestra descripción general de las secciones de Magento 2!

PD No te pierdas la segunda parte del artículo para aprender cómo formar componentes de interfaz de usuario para la interfaz de Magento 2.