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.
3.1. 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)
View da Lista de Bandas:
Script da Ação de Deletar Bandas:
3.2. 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.
3.3. 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.
3.4. 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.
View da Imagem:
View da Label:
3.5. 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)
3.6. 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
View da Lista de Artistas:
Script da Ação de Deletar Artistas:
3.7. 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.
Conteúdo Inicial da Biografia:
3.8. 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.
Script da Ação de Salvar Biografia:
3.9. 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ê").
View da Label de Status:
3.10. 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.
Desabilitar Botão de Status:
3.11. 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.
3.12. 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.
Conteúdo Inicial dos Estilos Musicais:
3.13. 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.
Script da Ação de Deletar Estilos Musicais:
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.
Script da Ação de Salvar Estilos Musicais:
Essa abordagem evita erros de chave composta e mantém a integridade dos dados.
3.14. 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.
3.15. Resultado Final
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.