Cadastro com Detalhes
1. Geral
Nesta documentação, você aprenderá a criar um CRUD Detalhado no Mitra, utilizando como referência o template de projeto "Cadastro Detalhado". Esse material expande os conceitos abordados na documentação "Cadastro Básico", introduzindo recursos mais avançados, como inputs, modais e componentes dinâmicos.
Para aproveitar ao máximo este guia, recomendamos revisar a documentação de Cadastro Básico, onde são explicadas as etapas fundamentais para a criação de um CRUD. Com esse conhecimento, você estará preparado para aprofundar-se nos conceitos mais complexos apresentados aqui.
2. Videoaulas de Referência
Esta documentação foi desenvolvida com base em três vídeos da série "Cadastro de Bandas", que estão disponíveis a seguir:
Parte 1:
Parte 2:
Parte 3:
3. Passo a Passo para Criar o Detalhamento de Bandas
Partindo do princípio que você já tenha aprendido a criar um CRUD, vamos aprender a configurar o detalhamento desses registros.
Primeiro Passo: Crie um CRUD básico para gerenciar bandas, utilizando o seguinte esquema de banco de dados:
Tabela Bandas:
ID (PK)
Descrição (Texto)
Foto Banda (Texto)
Biografia (Texto)
Status (FK)
Tabela Status (Define se a Banda está ou não em Turnê):
ID (PK)
Descrição (Texto)
Segundo Passo: Crie uma nova tela que será usada para exibir o detalhamento das bandas. Quando você selecionar uma banda na lista do CRUD, essa tela será aberta, mostrando as informações detalhadas da banda escolhida.
Terceiro Passo: Como a tela de detalhamento será filtrada com base na banda selecionada na lista, adicione um seletor temporário na tela para simular essa seleção durante o desenvolvimento. Isso facilita testar e configurar os componentes sem depender da lista principal.
Quarto Passo: Adicione uma Imagem e uma Label Dinâmicas à tela de detalhamento, configurando-as para que mudem automaticamente com base na banda selecionada. Essas informações devem ser vinculadas a uma View, garantindo que a imagem utilize a coluna Foto Banda e a label exiba o valor da coluna Descrição. Após concluir a configuração, teste alterando a banda no seletor temporário para verificar se a Imagem e a Label estão atualizando corretamente com os dados correspondentes.
Quinto Passo: Na mesma tela de detalhamento, vamos implementar um CRUD de Artistas por banda. Para isso, comece criando uma tabela no seu database para armazenar as informações dos artistas:
Tabela Artista:
ID (PK)
Descrição (Texto)
Foto Artista (Texto)
Banda (FK)
Sexto Passo: Utilize o seu conhecimento e crie o CRUD de Artistas na tela, garantindo que ele permita criar, visualizar, editar e excluir os registros de artistas associados à banda selecionada. Não esqueça de colocar o filtro de Banda: WHERE ID_BANDA = :ID_BANDA
Sétimo Passo: Adicione uma seção para editar a biografia da banda. Insira um input de texto grande e configure o conteúdo inicial do input para que ele sempre exiba a biografia atual da banda, garantindo que o usuário visualize o conteúdo já registrado antes de fazer alterações.
Oitavo Passo: Configure um botão de salvar para registrar as alterações feitas na biografia. Certifique-se de vincular o botão a uma ação de database para atualizar e persistir no banco de dados, a nova biografia.
Nono Passo: Adicione uma seção na tela de detalhamento para exibir o status da banda. Configure uma Label dinâmica vinculada a uma View que retorne o status atual da banda (por exemplo, "Em Turnê" ou "Fora de Turnê").
Décimo Passo: Insira um botão para permitir a alteração do status da banda. Configure-o para mudar o status de "Fora de Turnê" para "Em Turnê". Certifique-se de desabilitar o botão caso o status já esteja como "Em Turnê", garantindo que o botão só fique ativo quando a alteração for possível.
Décimo Primeiro Passo: Adicione uma seção para gerenciar o estilo musical da banda. Para isso, configure a tabela Estilo Musical no banco de dados:
Tabela Estilo Musical:
ID (PK)
Descrição (Texto)
Como a relação entre Estilo Musical e Banda é de N para N, crie uma tabela de chave composta para mapear essa relação:
Tabela Estilo por Banda (Chave Composta):
ID Estilo Musical (PK)
ID Banda (PK)
Estilo por Banda (Numérico): Armazena o valor 1, indicando a associação entre um determinado estilo musical e uma banda.
Essa estrutura permite que cada banda esteja associada a múltiplos estilos musicais, e cada estilo musical possa ser compartilhado entre várias bandas.
Para mais detalhes sobre tabelas de chave compostas, acesse a documentação de Database.
Décimo Segundo Passo: Configure o componente Checkbox para permitir a seleção dos estilos musicais das bandas. Certifique-se de que o conteúdo inicial do checkbox esteja configurado corretamente para carregar e exibir automaticamente os estilos já cadastrados para a banda selecionada.
Décimo Terceiro Passo: No botão de salvar, adicione duas ações de database para gerenciar os estilos musicais da banda.
A primeira ação deve deletar todos os estilos musicais previamente cadastrados para a banda, garantindo que não haja conflitos ao registrar as novas seleções. Isso é necessário porque a tabela Estilo por Banda utiliza chaves compostas, o que impede a duplicação de registros para a mesma banda e estilo.
Em seguida, a segunda ação será responsável por salvar os estilos musicais selecionados, garantindo que apenas os novos registros sejam persistidos corretamente no banco de dados.
Essa abordagem evita erros de chave composta e mantém a integridade dos dados.
Décimo Quarto Passo: Após finalizar a configuração da tela de detalhamento, delete o seletor temporário e o próximo passo é vinculá-la à Lista de Bandas. Como a Lista em si não possui interação direta, a navegação para a tela de detalhamento deve ser configurada em um de seus componentes.
Para isso, na Label da lista, substitua a interação atual (que abre o formulário de edição de bandas) por um Modal. No Modal, selecione a tela de detalhamento como o destino e ajuste as proporções de altura e largura para 100%, garantindo que a tela de detalhamento seja exibida em tela cheia.
Com esses quatorzes passos, seu CRUD com Detalhes estará pronto! Seguindo esse fluxo, você aprenderá como montar o template "Cadastro com Detalhes" no Mitra de maneira simples e eficiente.