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 , assim- no qual, ao adicionar uma pessoa e selecionar um país só serão exibidos , a caixa de seleção estado irá somente exibir, em suas opções, os estados pertencentes a esse aquele país selecionado, e ao selecionar um estado só serão exibidos , a caixa de seleção cidade irá somente exibir, nas suas opções, as cidades pertencentes a esse aquele estado selecionado. Ao adicionar a Pessoa e selecionar 

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:

1. Projeto do tipo mobile ou web criado. Caso haja dúvidas de como criar esse tipo de projeto, clique aqui.

2. Entender o básico sobre diagrama de dados. Caso ainda possua dúvidas, clique aqui.
3. Entender o funcionamento da caixa de seleção dinâmica. Caso ainda possua dúvidas, clique aqui.
4. 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):

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

Por último, abra a página de Pessoa e verifique o comportamento da caixa de seleção.

Image Added

Figura 3.7 - Resultado final da sequência de caixas de seleção