Uma vez que a dependência biblioteca jQuery Mask Bootstrap foi incluída no projeto, precisamos alterar nosso arquivo de layout (/resources/templates/layout.html) para importar o código JavaScript da biblioteca para todas as páginas.
Nas linhas 53 à 57 – inserimos um tag Script que possui uma função seletora do jQuery para modificar o tag HTML cujo id é txtCPF, chamado a função mask e passando o formato “999.999.999-99”. IMPORTANTE: este tag SCRIPT deve ficar depois da diretiva que inclui o footer do layout, pois nesse trecho de código que a biblioteca jQuery Masked Input é carregada para o HTML. Outro ponto importante é que não é necessário existir um tag Script para cada código JavaScript, o código foi separado apenas para melhorar a visualização.
Muito conhecido no mundo relacional como chave estrangera, esse tipo de campo tem por objetivo vincular dois registros de tabelas diferentes em um banco de dados. No mundo orientado a objetos chamamos esse tipo de situação de associação, quando uma instância de uma classe possui a referência para a instância de outra classe. Para exemplificar isso, vamos criar uma nova classe chamada Cidade e vamos associá-la a classe Paciente para indicar a cidade de origem do paciente. Portanto na tela de cadastro do Paciente haverá uma lista de cidades a qual o usuário deverá selecionar. Para simplificar o exemplo não vamos criar a tela de cadastro da Cidade, vamos apenas implementar o código necessário para cria a entidade e seu repositório, e então vamos inserir alguns registros na tabela cidade diretamente no banco de dados.
Para dar início no pacote model, vamos criar uma nova classe Cidade com os atributos id, nome e estado. E em seguida vamos inserir as anotações necessárias para realizar o mapeamento objeto relacional desta classe.
Nas linhas 32 e 33 – inserimos um novo atributo do tipo Cidade, e colocamos a anotação @ManyToOne, que indica que muitos pacientes podem possuir a mesma cidade
Para ter acesso aos dados das cidades, e construir a lista de cidades no cadastro de paciente, vamos no pacote repository, criar a interface CidadeRepository conforme o exemplo abaixo.
Nas linhas 32 e 33 – inserimos um novo atributo para o repositório CidadeRepository, para ter acesso aos dados da tabela no banco de dados
Nas linhas 41 à 45 – alteramos o código do método createForm. Esse método é chamado toda vez que o usuário digita na URL /paciente/novo para cadastrar um novo paciente. Por esse motivo precisamos além de carregar o formulário form.html, necessitamos também recuperar do banco de dados a lista de cidades e transferir para a interface. Para isso alteramos o retorno do método createForm para o tipo ModelAndView, na linha seguinte utilizamos o repositório da classe Cidade para executar o método findAll() e salvar o resultado na variável listaCidades. Por fim alteramos o retorno deste método para devolver uma nova instância da classe ModelAndView e dentro dela uma propriedade chamada “listacidades” e a variável listaCidades que contém o resultado da consulta no banco de dados.
Nas linhas 53 à 61 – alteramos o código do método alterarForm, pois quando o usuário acessa a opção alterar para qualquer registro também precisamos carregar a lista de Cidades. Para isso dentro deste método executamos o findAll() do repositório da classe Cidade para recuperar a lista de cidades do banco de dados. Em seguida criamos um objeto chamado HashMap, esse objeto é semelhante a uma lista ou array porém ele carrega em cada posição dois valores, sendo que um representa uma CHAVE e o outro o valor. Nas linhas 57 e 58 inserimos dois pares de valores no HashMap (utilizando o método put), primeiro a instância contendo os dados do paciente que será alterado, e em seguida a lista de cidades. Por fim alteramos a instância da classe ModelAndView para retornar a variável dados que contém nosso mapa de valores.
Agora que a nossa classe controller está retornando para o formulário a lista das cidades, precisamos alterar o form.html do cadastro de Paciente para incluir um componente de lista que será carregado pelos dados do controller. Para isso alteramos as linhas 39 à 44, onde inserimos um tag SELECT, vinculando seu valor ao atributo cidade da classe Paciente th:field=”*{cidade}”. E dentro do select utilizamos a tag option, mas não colocando valores fixos, mas sim carregando os valores da lista de cidades passada pelo controller:
th:each=”umacidade : ${listacidades}” – a propriedade th:each fará a repetição do tag option para cada instância de objeto cidade passado na variável listacidades, sendo que a instância de cada iteração será gravada na nova variável umacidade
th:value=”${umacidade.id}” – a propriedade th:value indica o valor interno que representa cada item da lista, como essa informação não é mostrada para o usuário utilizamos o campo id da classe Cidade como identificador único