Portinari — Como utilizar componentes de formulário e consumir serviços Rest

Ricardo Mansano Godoi
Nov 4 · 10 min read

O Portinari é a biblioteca de componentes open source da TOTVS, reconhecendo a importância do desenvolvimento colaborativo para evolução de suas ferramentas.

Neste post vou demonstrar principalmente como utilizar os componentes de formulário, e também como consumir serviços Rest mas tem muito mais informação sobre o Portinari em seu site, recomendo que acessem para conhecer melhor a biblioteca.

Link para o vídeo: https://youtu.be/v-tas7P5n9s

Hoje o Portinari é compatível com o Angular, porém sua interface (CSS) foi escrita de maneira modular, sendo possível estendê-la a outros frames, como o React e o Vue.

Momento Jabá:
Acesse developers.totvs.com pra ficar antenado às mais diversas tecnologias utilizadas na TOTVS, e também nossas vagas, meetups, vídeos, podcasts e muito material bacana compartilhado por colegas e parceiros.

Criando um projeto do zero

Todos os passos para iniciar um novo projeto estão descritos no link abaixo:

https://portinari.io/guides/getting-started

Pré-requisitos para utilizar o exemplo:


Componentes

Vamos começar falando um pouco sobre os componentes de formulário.

Importante: Quem acompanhou a série Angular e React pra quem vem do AdvPL poderá se guiar pelas mesmas Tags, como a [*Form no trecho abaixo:

<! — [*Form]
<form #niverForm=”ngForm”>
<div class=”po-row”>
<po-input…

<po-input>

https://portinari.io/documentation/po-input

Layout do formulário

Aproveitando que falamos sobre formulários, vou abrir um parenteses pra explicar como funciona o layout, o form abaixo foi criado com o trecho HTML explicado na sequência.

Ao criar o formulário, terá 12 posições para cada linha. Assim, usando a classe po-md-1, preencherá uma dessas posições, po-md-2 preencherá duas, e assim por diante…

O <div class=”po-row”> fará a inserção de uma nova linha no formulário.

<po-datepicker>

https://portinari.io/documentation/po-datepicker

O componente po-datepicker, como os demais apresentados, devem ter seu Model (aqui o f_birthday) declarados no arquivo nivers.component.ts. Desta forma, seus valores podem ser facilmente acessados.

<po-switch>

https://portinari.io/documentation/po-switch

<po-combo>

https://portinari.io/documentation/po-combo

O componente po-combo permite a digitação para facilitar a busca de um item.

Os itens são preenchidos à partir da variável selectOptions, que é um array de itens do tipo PoSelectOption, definindo a descrição e valor de cada item.

<po-select>

https://portinari.io/documentation/po-select

Já o po-select não permite a digitação, apenas a seleção do item. Nele, é possível utilizar o mesmo array criado para o componente po-combo.

<po-password>

https://portinari.io/documentation/po-password

<po-number>

https://portinari.io/documentation/po-number

Como o nome já diz, este componente permite apenas números.

<po-email> e <po-url>

https://portinari.io/documentation/po-email
https://portinari.io/documentation/po-url

Este dois componentes permitem a inclusão de E-mail e URL, fazendo automaticamente as validações. Veja que o e-mail está informando o preenchimento incorreto.

<po-upload>

https://portinari.io/documentation/po-upload

O po-upload permite a seleção de um ou mais arquivos para upload.

<po-radio-group> e <po-checkbox-group>

https://portinari.io/documentation/po-radio-group
https://portinari.io/documentation/po-checkbox-group

Os itens do radio e do checkbox são preenchidos respectivamente à partir das variáveis:

  • radioOptions: array do tipo PoRadioGroupOption;
  • checkboxOptions: array do tipo PoCheckboxGroupOption.

<po-multiselect>

https://portinari.io/documentation/po-multiselect

O po-multiselect permite a seleção de múltiplos itens, bem como a fácil visualização dos selecionados. Ele recebe um array do tipo PoMultiselectOption

<po-textarea>

https://portinari.io/documentation/po-textarea

<po-button>

https://portinari.io/documentation/po-button

No componente, po-button define a ação de clique através do p-click, e a condição para habilitar o botão, através do p-disabled, instanciando recursivamente a função validForm.

Desta forma, o botão sera habilitado somente quando estiver preenchido o campo que atribui valor à variável this.f_person.

Aqui o formulário preenchido, com um item já inserido, localizado no rodapé.

O serviço Rest

Aqui vou partir do principio que você já conhece o Rest e seus verbos…

O consumo de serviços Rest independe do Portinari, é um “trabalho” pro Angular. Criei um back-end muito simples em JavaScript utilizando o Express, com:

  • Um POST;
  • Dois GET, o primeiro para listar todos os itens e o segundo apenas do ID desejado;
  • E um DELETE;
  • Deixei o PUT e o PATCH para uma outra oportunidade.

O serviço pode ser iniciado através do arquivo sample_ret/index.js, mas não se esqueça de instalar as dependências:

Quando você consome um serviço, ele precisa ser declarado como confiável no back-end. No caso do NodeJS, fazemos isso declarando o endereço de origem (endereço + porta do projeto Angular que irá consumir o Rest) no setHeader ‘Access-Control-Allow-Origin’.

Aproveitamos e definimos também os verbos que iremos habilitar através do setHeader ‘Access-Control-Allow-Methods’.

./sample_rest/index.js

Consumindo o Rest

Na arquitetura do Angular todo acesso a dados é delegado a um Service.

Para criar um component no Angular você utiliza o comando:
ng generate component component_name

E para criar um service:
ng generate service service_name


Importante: Ao criar um service, terá que inseri-lo manualmente no arquivo app.module.ts, exemplo:

# Crie o service, exemplo: newservice
ng generate service services/newservice

# No arquivo app.module.ts , importe o novo service
import { NewserviceService } from ‘./services/newservice.service’;

# Insira sua chamada no providers, ainda no arquivo app.module.ts
providers: [ CustomerService, NewserviceService ],


Em nosso exemplo, iremos utilizar um service para consumir o Rest.

Abaixo descrevo o fluxo para o verbo POST, inserindo um novo registro:

  1. A função newCustomer no arquivo customer.component.ts é instanciada à partir do botão Novo da camada HTML;
  2. Que instancia a função de mesmo nome no arquivo customer.service.ts, executando um POST a partir do método this.http.post, passando um array com ID e Name como parâmetros;
  3. O Rest (sample_rest/index.js), insere um novo item no JSon datae retorna o statusOK.
  4. Ao final deste processamento, a função definida no método subscribe , no arquivo customer.component.ts , é disparada, no nosso exemplo, executando a função getCustomers, que irá exibir os itens contidos no JSon data.

Os outros verbos utilizados no exemplo estão descritos abaixo:

Executando o exemplo

Como utilizar o tema da TOTVS no Portinari?

O Portinari tem sua própria identidade visual, mas você pode aplicar o tema no padrão da TOTVS, da seguinte maneira:

Tema padrão da TOTVS

Como sempre, espero que aproveitem o material, até a próxima…

TOTVS Developers

Blog técnico do time de engenharia e desenvolvimento da TOTVS

Ricardo Mansano Godoi

Written by

Chief engineer of Front-end and Development Tools on TOTVS, developing software since 88, plugged to the brand new technologies and Nerd to the bone.

TOTVS Developers

Blog técnico do time de engenharia e desenvolvimento da TOTVS

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade