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, ao selecionar um país só serão exibidos os estados pertencentes a esse país, e ao selecionar um estado só serão exibidos as cidades pertencentes a esse estado.

Pré-condição

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

Em seguida, selecione o campo nome, adicione o componente caixa de seleção dinâmica e vincule com a entidade estado (Figura 3.2) e adicione novamente uma caixa de seleção dinâmica, mas, ao invés de vincular com a entidade estado, 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 ng-model

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 - Vincular ng-model 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.

Figura 3.6 - Criando dependência de salvamento