- Criado por Deborah Melo de Carvalho, última alteração em 11/08/2020
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 17 Próxima »
Esse tutorial tem como objetivo mostrar como criar uma sequência de caixas de seleção dinâmica que possuem uma dependência de relacionamento. Nesse exemplo, usaremos Pais-Estado-Cidade-Pessoa - no qual, ao adicionar uma pessoa e selecionar um país, a caixa de seleção estado irá somente exibir, em suas opções, os estados pertencentes aquele país selecionado, e ao selecionar um estado, a caixa de seleção cidade irá somente exibir, nas suas opções, as cidades pertencentes aquele estado selecionado.
Pré-condição
Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.
Requisitos:
Projeto do tipo mobile ou web criado. Caso haja dúvidas de como criar esse tipo de projeto, clique aqui.
- Entender o básico sobre diagrama de dados. Caso ainda possua dúvidas, clique aqui.
- Entender o funcionamento da caixa de seleção dinâmica. Caso ainda possua dúvidas, clique aqui.
- Entender o funcionamento de adição de componentes. Caso ainda possua dúvidas, clique aqui.
Criando classes e relacionamentos
Primeiramente vamos criar as tabelas e definir o relacionamento entre elas. Para isso, crie um novo diagrama de dados dentro da pasta diagrama e adicione as seguintes classes e atributos nesse diagrama (como mostrado na Figura 1):
Classe | Atributos |
---|---|
País | id, pais (string) |
Estado | id, estado (string) |
Cidade | id, cidade (string) |
Pessoa | id, nome (string) |
Após adicionar as classes e atributos, faça o relacionamento do tipo 1 para N entre as seguintes classes:
- País (1) - Estado (N)
- Estado (1) - Cidade (N)
- Cidade (1) - Pessoa (N)
Por fim, salve o diagrama, gere a persistência e o CRUD de todas as classes.
Figura 1 - Resultado final do diagrama
Criar fonte de dados
Após ter gerado a camada de persistência e o CRUD das tabelas, vamos criar uma fonte de dados. Clique em Projeto > Fonte de Dados e adicione uma fonte de dados (Figura 2.1).
Figura 2.1 - Criar fonte de dados
Adicionar campos calculados
Adicione um nome para a fonte de dados e vincule com a tabela Pessoa (1 da Figura 2.2). Clique na aba campos calculados e crie os campos estado e pais, os associando respectivamente aos seus IDs - ou seja, as expressões this.cidade.estado.id e this.cidade.estado.pais.id (2 e 3 da Figura 2.2). Por fim, salve a fonte de dados.
Figura 2.2 - Vinculando entidade e adicionando os campos
Modificando CRUD do formulário
Abra a view que criamos a partir da classe Pessoa, selecione o componente fonte de dados principal na área na área de edição, o que está vinculado com a entidade Pessoa, e altere a sua propriedade origem dos dados, selecionando a fonte de dados que criamos acima: pessoa-custom (Figura 3.1).
Figura 3.1 - Trocar fonte de dados
Adicionar caixa de seleção
Iremos trabalhar com duas caixas de seleção, onde uma será vinculada com a entidade Estado e a outra, País. Para isso, selecione o componente Nome, adicione o componente caixa de seleção dinâmica e vincule com a entidade Estado (Figura 3.2) e selecione novamente o componente Nome, adicione outra caixa de seleção dinâmica e vincule com a entidade Pais. Além disso, renomeie as labels das caixas para Estado e País respectivamente.
Figura 3.2 - Vinculando entidade com a caixa de seleção dinâmica
Vincular campo valor
Selecione a caixa de seleção Estado e em propriedades, abra as opções do campo Valor e selecione a opção Pessoa.active.estado. Repita esse processo para a caixa de seleção País, só que selecionando a opção Pessoa.active.pais.
Figura 3.3 - Vinculando o valor do Estado da Entidade Pessoa com a caixa de seleção
Filtrar por parâmetros
Selecione a fonte de dados Cidade e em propriedades, clique no ... que percente ao campo filtros e parâmetros (seta da Figura 3.4) para abrir sua janela. Adicione uma regra (1 da Figura 3.4) e informe que estado tem que ser igual à Pessoa.active.estado. Repita esse processo para a fonte de dados Estado, mas informe que pais tem que ser igual à Pessoa.active.pais na regra.
Figura 3.4 - Adicionando regra em filtros e parâmetros
Limpar estratégia
Novamente, selecione a fonte de dados Cidade e em propriedades, abra a caixa de seleção do campo estratégia em cláusula nula (Figura 3.5) e selecione a opção limpar dados. Repita esse processo para a fonte de dados Estado.
3.5 - Limpar dados para a estratégia em cláusula nula
Definir dependência
Por fim, vamos criar uma relação de dependência entre as fontes de dados. Sendo assim, selecione a fonte de dados Cidade e em propriedades, abra a caixa de seleção do campo dependente de salvamento e selecione Estado (Figura 3.6). Repita essa etapa para a fonte de dados Estado, mas selecione a opção País, e salve tudo.
Figura 3.6 - Criando dependência de salvamento
Testando o projeto
Rode o projeto, acesse a aplicação e adicione dados para os CRUDs das classes País, Estado e Cidade (podendo ser usado o exemplo da tabela abaixo).
País | Estado | Cidade |
---|---|---|
Brasil | Bahia | Salvador, Camamu, Lauro de Freitas. |
Paraná | Curitiba, Londrina, Maringá. | |
Amapá | Macapá. Santana, Oiapoque. | |
Canadá | Ontario | Toronto, Mississauga, Ottawa. |
Quebéc | Ville de Quebéc, Lévis, Montréal. | |
Alberta | Calgary, Canmore, Camrose. | |
Estados Unidos | New York | New York City, Albany, Buffalo |
California | San Diego, San Francisco, Los Angeles. | |
Florida | Miami, Orlando, Boca Raton. |
Por último, abra a página de Pessoa e verifique o comportamento da caixa de seleção.
Figura 3.7 - Resultado final da sequência de caixas de seleção
Nessa página
- Sem rótulos