Untitled

• Este documento fornece um guia sobre como exibir mensagens para o usuário em aplicações Spring, com foco no uso do Thymeleaf para renderizar alertas do Bootstrap.
• Thymeleaf deve ser usado para configurar uma div a ser exibida apenas quando há uma mensagem a ser mostrada.

Thymeleaf

• Thymeleaf é um engine de template para Java alternativo ao JSP.
• Os templates Thymeleaf são escritos em código HTML5 e têm integração com o Spring Framework.
• O Thymeleaf também pode processar código CSS e JavaScript.
• Thymeleaf oferece modelos naturais para desenvolvimento, permitindo a exibição correta nos navegadores.
• Também funciona como protótipos estáticos, o que fortalece a colaboração nas equipes de desenvolvimento.
• Não é um projeto Spring, mas uma biblioteca que facilita a criação da camada de view com integração com o Spring, sendo uma boa alternativa ao JSP.
• O dialeto do Thymeleaf é muito poderoso, fornecendo uma forma elegante e bem formatada de criar páginas.

Modelos HTML

• Os modelos HTML escritos no Thymeleaf parecem e funcionam como HTML.
• Isso permite que os modelos continuem funcionando como artefatos de design úteis.

Variáveis

• A expressão ${} interpreta variáveis locais ou disponibilizadas pelo controller.
• O atributo th:each itera sobre uma lista.
• Cada objeto da lista é atribuído a uma variável local.
• th:text junto com a expressão ${} exibirão os valores das propriedades de um objeto.

Condicional Thymeleaf

• th:if dentro do Thymeleaf permite exibir condicionalmente elementos HTML com base em uma expressão booleana.
• Esta condição é semelhante a estruturas if em outras linguagens.

Uso do Th:if

• Um objeto utilitário #strings pode ser utilizado para trabalhar com strings, fornecendo métodos como isEmpty para verificar se uma string está vazia.
• th:if="${!#strings.isEmpty(mensagem)}" exibe um elemento HTML somente se a variável mensagem não estiver vazia.
• Se o atributo mensagem estiver vazio, o alert não aparece na página.

Criando a mensagem no Controller

• É preferível usar ModelAndView em vez de String para especificar a view a ser renderizada e os dados que ela usará.
• ModelAndView permite adicionar um objeto (mensagem) que contém o texto "Foi salvo com sucesso!" para ser exibido na view.

Integração com o HTML

• O atributo th:text permite exibir o valor da mensagem no HTML.
• Substitui o texto estático "Salvo com sucesso!" pelo valor dinâmico da variável mensagem recebida do controller.

Preenchimento Dinâmico de Campos

• O preenchimento dinâmico de campos de status envolve o recebimento de uma coleção de status.
• É necessário iterar sobre essa coleção e devolver ao usuário.

Alterações no Controller

• Use @RequestMapping("/novo") para o mapeamento da URL.
• Use StatusTitulo.values() para retornar todos os StatusTitulo.
• Para preencher o campo de status dinamicamente, o atributo th:each é usado para iterar sobre os possíveis status passados pelo Controller.
• O script usa th:value e th:text para definir o valor e o texto exibido para cada opção de status.

Enum StatusTitulo

• Este enum define as opções de status possíveis ("Pendente" e "Recebido").
• Está associado a uma descrição privada.
• O status : ${todosStatusTitulo} atribui esse fragmento a uma variável chamada status.
• Não apenas objetos java.util.List podem ser usados para iteração no Thymeleaf, mas também objetos java.util.Iterable, java.util.Map, arrays, etc.

ModelAttribute

• Pode ser utilizado para lidar com problemas ao retornar uma mensagem para o usuário onde o status desaparece.
• ModelAttribute é uma anotação que liga um parâmetro de método ou valor de retorno de método a um atributo de modelo nomeado.
• Nesse caso, o atributo estará disponível para todas as páginas web.
• É preciso remover o addObject, que foi adicionado ao mapeamento /novo.

MySQL

• A dependência do H2 deve ser removida e o conector MySQL deve ser inserido no pom.xml para utilizar o MySQL no projeto.
• Código para adicionar conector My SQL:

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

• Algumas informações devem ser inseridas no arquivo application.properties.

 spring.datasource.url=jdbc:mysql://localhost:3306/cobrancas
 spring.datasource.username=root
 spring.datasource.password=root

• É preciso criar o banco de dados cobrancas no MySQL.
• Para corrigir erros, inclua spring.jpa.hibernate.ddl-auto=update no seu arquivo application.properties.

Página de Pesquisa

• Para a página de pesquisa é preciso criar em Templates, o arquivo PesquisaTitulos.html.
• Os seguintes códigos devem ser criados no código PesquisaTitulos.html:

<table class="table table-bordered table-striped">
    <thead>
        <tr>
        <th scope="col" class="text-center">#</th>
        <th scope="col">Descrição</th>
        <th scope="col" class="text-left">Data de vencimento</th>
        <th scope="col" class="text-right">Valor</th>
        <th scope="col" class="text-center">Status</th>
        <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="6">Nenhum registro encontrado.</td>
        </tr>
    </tbody>
</table>

• Para que se veja a página, o Controller deve ser mapeado.
• @RequestMapping não foi passada nenhum outro valor como nos métodos novo() e salvar().
• Nesse caso, em pesquisar() será atribuída o mesmo mapeamento realizado no início do controller.

Thymeleaf

• Podemos transformar parte do código em um layout para evitar a repetição de código.
• Um ferramenta chamada Thymeleaf Layout Dialect pode ser utilizada (https://github.com/ultraq/thymeleaf-layout-dialect).
• Adicione a dependência para utilizar esta ferramenta no pom.xml:

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

• Crie um arquivo LayoutPadrao.html dentro da pasta templates.
• O código dentro do LayoutPadrao.html é o mesmo do arquivo PesquisaTitulos.html, mas sem o conteúdo central.
• Inclua o namespace do Thymeleaf Layout Dialect no LayoutPadrao.html:

xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

• Insira o seguinte código abaixo da barra de navegação:

<section layout:fragment="conteudo">
    <p>Conteúdo principal</p>
</section>

• No arquivo PesquisaTitulos.html, insira estas linhas de código:

layout:decorate="~{LayoutPadrao}">

• Para concluir crie uma seção no código de PesquisaTitulos.html para informar qual conteúdo corresponde.

<section layout:fragment="conteudo">
  
</sectio

• Para continuar agora inclua a anotação a seguir em todos arquivos html para evitar erros:

xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

• Para uma melhor organização e otimização de código separe os itens de layout para administrá-lo melhor criando na pasta templates o arquivo Cabecalho.html adicionando seus códigos referentes.

Para que o cabeçalho seja incluído dentro do Layout, usar Th:replace

• Código para esta operação:

<header th: replace="Cabecalho"></header>

Exibindo itens na página de pesquisa

• Use a classe TitulosController.java para implementar uma forma de enviar os status do título.
• Para isto implemente no código o seguinte:

@Autowired //anotação que irá injetar dependência
private Titulos titulos;

• Dentro do método pesquisar, obter os títulos utilizando o findAll(), já disponibilizado pelo JpaRepository. Acrescentando, as linhas de códigos:

List<Titulo> todosTitulos = titulos.findAll();
ModelAndView mv = new ModelAndView("PesquisaTitulos");
mv.addObject("titulos", todosTitulos);

• Na página de cada um dos casos você deve inserir o esse código no PesquisaTitulos.html:

<tr scope="row" th:each="titulo: ${titulos}">
 <td class="text-center" th:text="${titulo.codigo}"></td>
 <td th:text="${titulo.descricao}"></td>
 <td class="text-center" th:text="${titulo.dataVencimento}"></td>
 <td class="text-right" th:text=" ${titulo.valor}"></td>
 <td class="text-center" th:text= h:text="${titulo.status.descricao}"></td>
 <td></td>
</tr>

Removendo a mensagem "Nenhum registro encontrado"

• Para remover a mensagem, o seguinte código deve ser utilizado:

<tr
 <td colspan="6" th:if="${#lists.isEmpty(titulos)}">Nenhum título foi encontrado</td>
</tr>

• Para melhor a aparência da data de vencimento e a do valor, inclua o seguinte trecho de código:

<td class="text-center" th:text="${{titulo.dataVencimento}}"></td>
<td class="text-right" th:text=" ${{titulo.valor}}"></td>

• Podemos melhorar a visualização do valor, incluindo R$ antes do numeral incluindo o pipe(|) fazendo a concatenação.
• Para este operação usa a seguinte sintaxe de código:

<td class="text-right" th:text="/R$ ${{titulo.valor}}/"></td>

Badge do bootsrap

• Badge do bootsrap pode ser usado para melhorar a visualização do status, para essa operação o pendente na cor vermelha e o recebido na cor verde.
• Para definir essa configuração leia as informações de configuração na página: (https://getbootstrap.com/docs/4.0/components/badge/).
• Deve ser criado dentro da classe Titulo, no pacote model, um método que retornar um booleano, para tratarmos o status. Usar o método isPendente na pesquisa de títulos.
• Para utilizar a classe badge, tem se duas situações:
• Cor verde, badge badge-success
• Cor vermelha, badge badge-danger
• A seguinte linha de código deve ser utilizada:

 <td class="text-center">
          <span class="badge" th:text="${titulo.status.descricao}"
     th: classappend="${titulo.pendente ? 'badge-danger' : 'badge-success'}"></span
        </td>

Validações

• Atualmente a página permite criar registros sem verificar os parâmetros dos formulários.
• Para tanto usaremos a ferramenta Bean Validation para criar algumas regras, uma especificação que permite validar objetos com facilidade.
• Para mais informações consulte: https://beanvalidation.org/.
• Para aplicar um validação inclua as anotações @NotNull na classe Titulo do código:

@NotNull
@NumberFormat(pattern="#,##0.00")
private BigDecimal valor;

O valor será validado para não ser nulo.

• Na classe TituloController, tem que inserir a anotação @Validated no código:

@RequestMapping(method RequestMethod.POST)
public ModelAndView salvar(@Validated Titulo titulo, Errors errors)

O sistema deve ser testado então, e caso ele não exiba os devidos dados, acrescente a seguinte linha de código:

 if(errors.hasErrors( )) {
 return mv;

• Para que você consiga obter as mensagens e mostrá-los para o usuário, você deve resgatar o objeto titulo.
• Para tal acesse CadastroTitulo.html e insira esta linha:

th:object="${titulo}"

• Para exibir as mensagens de erro adicione estas linhas ao html:

<div class="alert alert-danger alert-dismissible fade show"
role="alert" th:if="${#fields.hasAnyErrors()}">
<div th:each="detailedError: ${#fields.detailedErrors()}">
             
</div>
</div>

• Ao acessar a página de novo cadastro, o sistema irá apresentar o objeto titulo ainda não foi passado. Se olharmos o controller, a página de cadastro é passada pelo mapeamento "/novo".

Para tanto acrescento ao Controller.java essas linhas de código:

ModelAndView mv = new ModelAndView("CadastroTitulo");
mv.addObject(new Titulo());

• Com tudo funcionando, se você testar enviar um registro sem valor, a tela exibirá que o campo não pode ser nulo.
• O aviso o valor não poder ser nulo pode ser personalizado implementando:

 @NotNull(message = "O valor não pode ser nulo")

• Podemos melhorar a visualização para o usuário mostrando no qual tenha erro, para esta operação, insira o seguinte código:

${#fields.hasErrors('value')}

• Depois adicione a mesma classe no bootsrap:

th: classappend="${#fields.hasErrors('valor')} ? is-invalid"

• Para validar um regra implementa os seguintes códigos, defindo o tamanho máximo de caracteres.

@NotBlank(message="Descrição é obrigatória")
@Size(max = 60, message="A descrição não pode ter mais de 60 caracteres")
private String descricao

• Após isso implemente a classe is-invalid, caso haja erro na validação da descrição na página de cadastro:

<div class="form-group row">
    <label for="descricao" class="col-sm-2 col-form-label">Descrição</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="descricao"
               th:classappend="${#fields.hasErrors('descricao')} ? is-invalid"
               placeholder="Descrição" name="descricao">
    </div>
</div>

Para melhorar a otimização reutilize-se as mensagens seprando-as do arquivo de Cadastro.

• Primeiramente, criar no diretório Templates, o arquivo Mensagem.html.
• Depois separe e recorte as mensagens já definidas.
• Os arquivos html MensagemErro html e Mensagem html são criados e configurados.
• Para que haja a leitura adicione a seguinte linha de comando no código:

<div th: replace="Mensagem"></div>
<div th: replace="MensagemErro"></div>

É preciso utilizar o th:field para manter as informações, usando o seguinte código:

 <input type="text" class="form-control" id="descricao"
               th: classappend="${#fields.hasErrors('descricao')} ? is-invalid"
 Placeholder="Descrição" th:field="*{descricao}">

Redirecionamento

• RedirectAttributes precisa ser implementado para contornar e redirecionar para novo requisição.
• Os códigos a seguir devem ser adicionados:

public String salvar(@Validated Titulo titulo, Errors errors, RedirectAttributes attributes)
 attributes.addFlashAttribute("mensagem", "Foi salvo com sucesso!");
 return "redirect:/titulos/novo";

Edição de Título

• Crie dentro do controller a função edicao com a sintaxe a seguir:

@RequestMapping("{codigo}")
public ModelAndView edicao(@PathVariable ("codigo") Titulo titulo)
 ModelAndView mv = new ModelAndView("CadastroTitulo");
 mv.addObject(titulo);
 return mv;
}

• É imprescindível que seja passado o código e um Titulo, para realizar a alteração.
• O código seguinte código na lista de marcação deve ser utilizado:

<i class="material-icons">edit</i>

• Para deixar automatizado o link insira no código:

<a th:href="@{/titulos/{codigo}(codigo=${titulo.codigo})}">

• Para concluir a etapa de edição adicionar esse código

<input type="hidden" th:field="*{codigo}">

Excluir Registros

• Vamos mostrar ao usuário uma janela modal para que, quando o mesmo clicar no botão de deletar, seja feita uma pergunta se ele realmente deseja apagar aquele registro. Para isso, vamos utilizar o modal do Bootsrap. Saiba mais em: https://getbootstrap.com/docs/4.0/components/modal/.
• Para o modal funcionar, adicionar o arquivo .js do bootstrap, com o nome DialogoConfirmacaoModal.html.
• No arquivo de Pesquisa, insira o seguinte código:

<div layout:insert="DialogoConfirmacaoExclusao"></div>

• Insira uma ação com os seguintes códigos

<button type="button" data-toggle="modal" data-target="#confirmacaoExclusaoModal" class="btn btn-link" title="Excluir">
            <i class="material-icons">delete</i>

. Repare o id criado anteriormente.

• Crie o link para a código JQuery funcione.
• Crie um pasta para o nome cobranca implementando o código.
• Chame o seguinte código.

Implemente este código

    $('#confirmacaoExclusaoModal').on('show.bs.modal', function(event) {
  var button - $(event.relatedTarget) // Button that triggered the modal
  var codigoTitulo  button.data('codigo
  var descricao Titulo  button.data('descricao') /// Extract info fron data-* atributes
-
    //Update the modal's content. We'll use jQuery here, but you could use a data binding
    library or other methods instead,
    var modal - $(this)
    modal.find('.modal-body span').html('Tem certeza que deseja apagar o registro
')
    7

Adicione este atribute

• th:attr="data-codigo=${titulo.codigo}, data-descricao=${titulo.descricao}
• Altere o form da DialogoConfirmacaoModal.html para informar sobre o nome do arquivo.

Adicione o seguinte código

<form th:atr="data-url-base'/titulos method="post">
          <input type="hidden" name -method value--DELETE" />;

Feito isso precisamos criar o excluir no Controller e informar o id a ser deletado. Depois enviaremos a mensagem ao usuário de excluído com sucesso

• Crie também o link para uma mensagem aparecer na tela
• Copie codigo da tela de edição e altere o para a seguinte forma. Para isso, no application.properties acrescento o seguinte código.

          spring.mvc.hiddenmethod.filter.enabled=true