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:

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.

Criar classes e relacionamentos

Primeiramente vamos criar as tabelas e definir o relacionamento entre elas. Para isso, crie um 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 para o projeto web.

Figura 1 - Resultado final do diagrama

Criar fonte de dados

Após ter gerado a camada de persistência, o CRUD das classes e executado o projeto, vamos criar uma fonte de dados. No menu do sistema, selecione em Projeto > Fonte de Dados e após abrir a janela, clique em Nova fonte de dados (Figura 2.1).

Figura 2.1 - Criar fonte de dados

Adicionar campos calculados

Adicione um nome o nome "pessoa-custom" nos campos Identificador e Nome da Consulta e vincule com a entidade 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

Modificar o CRUD Pessoa

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 dinâmica, onde uma será vinculada com a entidade Estado e a outra, País. Para isso, siga os passos abaixo:

• Selecione o componente Caixa de seleção dinâmica, na paleta de componentes à direita, e arraste-o para a página, logo abaixo do campo Entrada de texto Nome;
• Em seguida, na janela de configuração da Caixa de seleção dinâmica, clique no botão "+" do campo Fonte de dados e selecione a entidade Estado (Figura 3.2);
• No Campo Texto, selecione a opção estado;
• Clique em OK para salvar e fechar a janela de configurações.
• Acesse as propriedades (menu lateral) da Caixa de seleção dinâmica que acabamos de configurar e altere o campo Conteúdo (content) para Estado.

Arraste outra Caixa de seleção dinâmica para acima da que acabamos de configurar, selecione no campo Fonte de dados País e no Campo texto pais, por fim, altere sua propriedade Conteúdo para País.

Figura 3.2 - Vinculando entidade com a caixa de seleção dinâmica

Ao fim desse passo, as caixas de seleção dinâmica já estão exibindo seus respectivos conteúdos, porém, ainda não se comunicam. Faremos isso nos próximos passos. 

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.

Esse passo garante que ao acessar a área de edição de um Pessoa, os campos das caixas de seleção dinâmica sejam carregados corretamente.

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 botão "..." do 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 à Expressão Pessoa.active.estado.

Repita esse processo para a fonte de dados Estado, mas informe que pais tem que ser igual à Expressão Pessoa.active.pais na regra.

Figura 3.4 - Adicionando regra em filtros e parâmetros da fonte de dados

Limpar dados nulos

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 ao salvar 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

Teste

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 Pessoa e verifique o comportamento da caixa de seleção.

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