Pular para o conteúdo principal

Página de administração de clientes

Neste passo, vamos construir uma página que irá interagir com a Data² Table, um banco de dados em que são armazenadas informações importantes para nossas aplicações.

Essa página irá realizar as operações de leitura, escrita, atualização e exclusão. Essas operações tem um acrônimo muito utilizado que é CRUD (Create, Read, Update, Delete). Para vizualização (leitura), utilizaremos uma tabela disponibilizada pelo Data² chamada DataGridBlock, e para as outras operações, serão usados botões e controles de texto.

O resultado final será um Artboard parecido com esse:

Resultado da tela de clientes

Esse Artboard possui:

  • Uma tabela para que você possa visualizar e selecionar seus clientes.
  • Dois campos de texto ligados ao Nome e Email do cliente selecionado.
  • Botões de:
    • Inserir
    • Editar
    • Salvar
    • Cancelar
    • Deletar

Criando uma Data² Table

Para criar uma Data² Table, dê um clique duplo no fundo do Builder, e no menu selecione na barra lateral esquerda a aba Registry. Clique em Table para adicionar a Data² Table.

Clique no nome da Table para selecioná-la. Vamos mudar o nome dela para saber do que ela se trata. No Inspector, na parte superior há uma caixa de texto para alterar o Display Name da tabela, coloque Tabela de clientes.

É necessário configurar quais campos vamos guardar dos nossos clientes. Vamos criar dois campos: nome e email.

  1. Com a Table selecionada, no Inspector clique em Schema e o Inspector irá "navegar" para dentro dessa propriedade.
  2. Clique em Add Item.
  3. Em Title escreva nome.
  4. Em Component, selecione data2-core-primitives@String.
  5. Adicione outro campo, só que dessa vez com email como Title, e utilize novamente data2-core-primitives@String como Component.

Criando um DataSet

Interagimos com a Table através do DataSet. Para criar um DataSet pela primeira vez, clique no fundo da tabela. Para criar outros DataSets, clique no + na parte inferior da tabela.

Selecione o DataSet que você irá utilizar, clicando no nome dele na parte inferior da tabela (próximo ao +), e no Inspector altere o nome para Todos Clientes.

Criando uma página ligada ao DataSet

Adicione um novo Artboard, dando um clique duplo no fundo e selecionando Artboard no menu.

Adicionando a tabela​

Selecione a Block Tool e desenhe um bloco maior para conter a tabela, os inputs e os botões.

Desenhe um bloco para ser a tabela dentro do bloco desenhado anteriormente. Para trocar o tipo do bloco, vá no Inspector e clique na parte superior onde há o texto data2-core-primitives@Block. Um menu irá abrir, procure DataGridBlock e selecione essa opção.

Para configurar os parâmetros do DataGridBlock, facilita esconder os parâmetros do Block clicando na seta da seção com título Block.

Habilite o parâmetro Dataset e selecione o DataSet Todos Clientes.

Adicionando os campos de texto​

Agora use a Block Tool para desenhar dois blocos abaixo da tabela. Selecione os dois blocos ao mesmo tempo, selecionando um, segurando SHIFT e clicando no segundo. Então, troque de data2-core-primitives@Block para DataFieldBlock.

Ainda com ambos os DataFieldBlocks selecionados, vamos configurar o parâmetro DataSet para Todos Clientes.

Utilizando a Selection Tool, clique em outro bloco para desselecionar os dois DataFieldBlock. Selecione o primeiro campo de texto e configure o Field para ser Todos Clientes - nome. No segundo DataFieldBlock, configure Field para ser Todos Clientes - email.

Todos clientes - nome

Todos clientes - email

Criando os botões​

Adicione outro bloco com o texto Inserir. Desta vez, vamos configurar o parâmetro On Click, isto é, o que deve acontecer quando um clique ocorre neste bloco. No Module selecione Todos Clientes, e na Interaction selecione Insert.

Botão de inserir configurado

Repita o mesmo processo para criar botões para as Interactions:

  • Save
  • Edit
  • Cancel
  • Delete

Dica: Você pode segurar ALT e arrastar um bloco para duplicá-lo.

No fim deste processo, temos:

Botões final

Testando se deu certo​

Clique no botão Preview embaixo do Artboard e tente:

  1. Clicar em inserir, adicionar informações e salvar. Ao atualizar a página, o dado que foi salvo deveria aparecer na tabela.
  1. Insira outro cliente e salve.
  1. Selecionar o cliente pela tabela deveria mudar o valor dos campos de texto.
  1. Selecionar um cliente, clicar em Editar, alterar um campo e salvar.
  1. Selecionar um cliente, clicar em Editar, alterar um campo e cancelar deveria voltar ao valor original.
  1. Selecionar um cliente e apagar.

Se todos esses casos funcionaram, está tudo certo com a página!

Criando rotas para suas páginas

Agora que temos dois Artboards, gostaríamos que a rota / mostrasse nossa página inicial, e a rota /clientes mostrasse o Artboard de administração de clientes. Para isso, vamos precisar:

  • Criar um Router, que será usado para criação de rotas.
  • Usar o Router como Entry Point da Application.

Criando o Router​

Para adicionar um Router, dê um clique duplo no fundo do Builder. Na aba Ui, a mesma em que o Artboard e a Application estão localizados, clique em Router para criar.

Adicionando Router

Configurando o Router​

Dê um nome como Router Principal para seu Router alterando o Display Name no Inspector.

Em seguida, coloque / no Initial Path dele.

Router com Display Name e Initial Path

Clique em Routes para configurar as rotas do Router. Clique duas vezes em Add Item para adicionar duas rotas, uma para a página inicial, e outra para a página de administração de clientes.

Vamos configurar a rota da página inicial, para isso, clique no primeiro item que foi adicionado. Dois paramêtros serão configurados:

  • No parâmetro Path coloque /
  • No parâmetro Content, clique no círculo para habilitar o parâmetro e selecione o Artboard de Página Inicial.

Para voltar para a lista de rotas, clique em Routes logo acima da seção da Route e em seguida clique na segunda rota.

  • No parâmetro Path coloque /clientes
  • No parâmetro Content, clique no círculo para habilitar o parâmetro e selecione o Artboard de Administração de Clientes.

Para salvar, desselecione o seu Router clicando no fundo do Builder.

Utilizando o Router como Entry Point da Application​

Selecione a Application e altere seu Entry Point:

  • No parâmetro Component, troque de data2-core-primitives@Artboard para data2-core-primitives@Router.
  • Em reference, selecione o nome do Router criado anteriormente, neste caso, Router Principal.

Faça o Preview da Application. Inicialmente ele deve abrir a página inicial. Ao trocar a URL de /?d2_pl-prv=true para /clientes?d2_pl-prv=true, a página de administração de clientes deveria aparecer.

Para adicionar um link da página inicial para a de administração de clientes:

  • Desenhe um bloco que será usado como link
  • No parâmetro On Click, selecione seu Router Principal como Module, e na Interaction selecione goTo.
  • No parâmetro Path to Route coloque o Path da sua página de adminstração de clientes, que no caso é /clientes.
  • Coloque um texto também para saber para aonde o link vai ao ser clicado, você pode dar um duplo clique no bloco para escrever diretamente nele.

Faça o mesmo para adicionar um link do Artboard de administração de clientes para a página inicial, com uma diferença:

  • No parâmetro Path to Route coloque / ao invés de /clientes.

Link para página inicial

Dê um Preview na Application e teste o funcionamento desses links!