English:

Hi everyone,

today I will talk a little about the new Magento 2 UI.

In the development of an extension for Magento you usually have to create a grid or a form. The new Magento 2 UI provide some components to facilitate the development of these two elements.

In the new Magento 2 UI we have basic components (listing and form) and secondary components. The secondary components are extensions of basic components.

You can see all components is Magento/Ui/view/base/ui_component/etc/definition.xml

To use an UI component in your custom module you have to create the UI layout in view/<area>/ui_component/uiexample.xml and in your layout you have to declare that you will use this UI component in your layout. In my Correios for Magento 2 Extension I used the new UI to develop a form and a grid.

This is the layout of form:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <head>
        <link src="Igorludgero_Correios::js/form_editcotacoes.js"/>
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="correios_cotacoes_form"/>
        </referenceContainer>
    </body>
</page>

Look inside the body tags I called the UI component inside the content of page, and in “name” of uiComponent I put the name of my UI component inside the ui_component folder.

In this link you can see the UI component that I developed for the grid of Correios for Magento 2 extension, you will see that I used the Listing component to create the grid, inside the grid we have many other components like “<item name=’buttons’>” where we declared the buttons of grid and set the text and action of each button.

In listingToolbar component you configure the filters, bookmarks and pagination for your custom grid.

In columns you will declare which columns your grid will have, the type of each column(text,select,date).

You can see this example to study and try to develop you custom grid or form.

More details about the components you can see in the fist link of this post and in the Magento 2 docs (http://devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html).

I hope this little explanation can you help you. Thanks!

 

Português

Olá,

hoje vou falar um pouco sobre a nova UI disponibilizada no Magento 2.

No desenvolvimento de extensões para Magento você comumente irá criar grids e formulários em diversas telas de sua extensão. A nova UI do Magento 2 oferece diversos componentes que facilitam o desenvolvimento destas telas, tanto para extensões que funcionem no admin quanto no frontend.

Neste nova UI há dois componentes básicos (listagem e formulário) e componentes secundários, estes secundários são nada mais que extensões dos básicos.

Você pode visualizar todos os componentes da nova UI do Magento 2 em Magento/Ui/view/base/ui_component/etc/definition.xml

Para utilizar um componente da nova UI você primeiro deve criar um XML  dos componentes que serão utilizados na tela, você deve criar o XML em view/<area>/ui_component/uiexemplo.xml e no arquivo de layout da tela você chamar este arquivo de xml da UI que será utilizada. No desenvolvimento do módulo dos Correios para Magento 2 que desenvolvi recentemente eu utilizei esta nova UI no desenvolvimento de um grid e de um formulário.

Este é o arquivo de layout do formulário:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <head>
        <link src="Igorludgero_Correios::js/form_editcotacoes.js"/>
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="correios_cotacoes_form"/>
        </referenceContainer>
    </body>
</page>

Dentro das tags BODY eu referenciei o “content” da tela que é o conteúdo da tela e dentro do content inseri o uiComponent que é o XML dos components que serão utilizados nesta tela, em “name” eu informei o nome do XML do meu UI Layout que no caso é correios_cotacoes_form.

Neste link você pode visualizar o UI Layout que eu desenvolvi para o grid da extensão dos Correios para Magento 2, você verá que eu utilizei o componente de listagem para criar o grid, dentro do componente de listagem há diversos outros componentes como “<item name=’buttons’>” onde eu declaro cada um dos botões da tela, quais as ações de cada um, o texto, etc.

No componente “listingToolbar” você irá configurar os filtros do grid, paginação, etc.

No componente “columns” você irá declarar as colunas de seu grid, o tipo de cada um dos dados de cada coluna(texto,data,select).

Você pode utilizar esta extensão que desenvolvi para estudar e tentar desenvolver seu próprio grid ou formulário utilizando a nova UI do Magento 2.

Mais informações sobre os components desta nova UI você pode visualizar no primeiro link deste post e também na documentação oficial do Magento (http://devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html).

Espero que essa pequena explicação possa ajudar neste começo com a nova UI, qualquer dúvida pode me contatar também que sempre que tiver um tempo posso ajudar. Abraços!

Magento 2 – The new UI components

Igor Ludgero


PHP & Magento Developer from Brazil.


Post navigation


Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest