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)

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.

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

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.

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.

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ê").

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.

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.

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.


  • 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.

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.

Procurar

Procurar