Se você está começando no desenvolvimento com a nova tecnologia da TOTVS, o PO-UI, você veio ao lugar certo! Neste guia, vamos passar por todo o processo de criação da sua primeira tela, tornando-o mais fácil e intuitivo. Acompanhe passo a passo e descubra como essa tecnologia pode transformar suas habilidades como desenvolvedor.

O Que é PO-UI?

PO-UI é uma nova tecnologia da TOTVS voltada para o desenvolvimento de interfaces no Protheus. Nos últimos anos, a TOTVS tem migrado suas rotinas para essa nova tecnologia, e a demanda por customizações em PO-UI só tende a crescer. Portanto, dominar essa ferramenta é um diferencial no mercado de trabalho.

Se você aprender a trabalhar com PO-UI, com certeza se tornará um desenvolvedor valorizado. E para te ajudar, deixamos um link no final desse artigo sobre o nosso combo desenvolvedor, onde você pode aprender sobre ADVPL, TL++, MVC, REST, e claro, o nosso treinamento de PO-UI que estamos construindo.

Preparativos Para Iniciar

Antes de começarmos, é importante que você tenha assistido à aula anterior, onde mostramos como ativar os temas da TOTVS na aplicação. Isso é fundamental, pois utilizaremos alguns componentes da biblioteca que foram instalados lá.

Além disso, recomendo que você esteja familiarizado com a estrutura de arquivos dentro do VS Code. Isso facilitará muito a sua navegação enquanto trabalhamos nos arquivos.

Importando Componentes no VS Code

Vamos ao que interessa! Abra o seu VS Code e comece importando os componentes necessários. Navegue até o arquivo app.component.ts que está em src/app. Aqui, você precisará importar os componentes que usaremos na nossa aplicação.

Uma vez dentro do arquivo, você pode acessar a documentação do PO-UI para encontrar os componentes que deseja importar. Por exemplo, vamos começar com o botão. Pesquise por “button” e copie a classe do modelo do botão para o seu arquivo.

Criando o Botão

Agora que temos os componentes importados, vamos criar o nosso botão. Isso será feito no arquivo app.component.html. Primeiro, adicione a classe do botão e defina o seu tipo como primário. O código deve ficar assim:

<po-button
p-label="Salvar"
p-kind="primary">
></po-button>

Salve o arquivo e vá para o terminal do VS Code. Execute o comando ng serve para abrir a aplicação e verificar se o botão aparece corretamente.

Customizando o Botão

Se você não está satisfeito com as cores padrão do botão, não se preocupe! A documentação do PO-UI possui um construtor de temas que permitirá que você personalize as cores conforme sua necessidade.

Após customizar, cole o código CSS gerado no seu arquivo app.component.css. Assim, você terá um botão com cores personalizadas que se destacará na sua interface.

Adicionando Campos de Entrada

Agora que temos nosso botão, é hora de adicionar campos de entrada para o usuário. Precisamos importar o módulo de formulários do Angular para isso. No seu app.component.ts, você deve adicionar:

import { FormsModule } from '@angular/forms';

Depois, crie os campos de entrada no arquivo app.component.html. Vamos criar campos para o nome, email e telefone do usuário:

<po-field name="nome" p-label="Nome do Usuário"></po-field>
<po-field name="email" p-label="Email do Usuário"></po-field>
<po-field name="telefone" p-label="Telefone do Usuário"
p-mask="(99) 99999-9999"></po-field>


Testando a Aplicação

Salve todas as alterações e atualize a sua aplicação. Você deve ver os campos de entrada que acabamos de criar, além do botão personalizado. É aqui que você começa a ver os primeiros resultados do Front-End.

Considerações Finais

Esse foi um breve resumo sobre os primeiros passos com PO-UI, recomendamos que assista o nosso vídeo completo no início da página pois nele apresentamos uma explicação completa de cada ponto apresentado nesse artigo.

Próximos Passos

Agora você pode começar a explorar mais sobre o PO UI e como personalizar sua interface. Lembre-se, a prática é essencial para dominar qualquer nova habilidade no desenvolvimento.

Se você gostou deste conteúdo e quer se aprofundar ainda mais no desenvolvimento com PO-UI, não hesite em conferir nosso combo desenvolvedor completo, clique aqui para mais detalhes.