Desenvolvendo Apps Low Code - Configurando o Design da Tela de Produtos
Introdução
Este tópico é uma continuação do tópico Desenvolvendo Apps Low Code - Primeiros Passos. Caso você ainda não tenha feito, volte clicando aqui e depois retorne a este tópico ;-)
Nesta etapa vamos melhorar a nossa tela de visualização de Produtos e vamos implementar o botão para adicionar pedidos ao Carrinho de Compras. Siga adiante e aprenda fazendo!
Etapas desta Série
Veja abaixo as etapas desta série
- Introdução e Primeiros Passos na Plataforma Glide
- Configurando o Design da Tela de Produtos
- Adicionando a Tela de Pedidos
- Adicionando Produtos ao Carrinho
- Criando Relacionamentos Entre Pedidos, Produtos e Clientes
Passo 3 - Configurando a tela de visualização de Produtos
Vamos mudar um pouco a carinha do nosso app e aprender as funções. No painel esquerdo, selecione a opção “List” para configurar a tela da lista de produtos.
Repare agora que as opções de configuração da lista de produtos apareceu no painel direito da tela. Selecione a opção “Cards”
Na guia “Content”, selecione a coluna “Foto” para a opção “Image”, o “Header” deve ser a coluna “Produto”, a opção “Title” deve ser vazia e a coluna “Details” deve ser configurada com a coluna “Preço”.
Para fins de reconhecimento da ferramenta, explore também outras opções de visualização.
Neste ponto, clique em um dos produtos para acessar a tela de detalhe dele. Vamos adicionar um botão para “Adicionar ao Carrinho”.
Após clicar no produto, clique no painel esquerdo na parte “Screen”. Clique no botão “+” para adicionar um botão à tela. Selecione o componente “Button”.
Após adicionar o botão, mude o nome e o ícone dele no painel direito.
Importante! As opções de cada elemento só aparecem no painel direito quando os mesmos estão selecionados no painel esquerdo. Caso as opções do botão não estejam aparecendo, verifique se o botão está selecionado.