Aula Prática

Documentação do Thymeleaf sobre layout

    
    ./mvnw test
    
    

Para efetivamente rodar nossa aplicação:

    
    ./mvnw spring-boot:run
    
    

Já no Windows para rodar nossa aplicação seria:

    
    mvnw.cmd spring-boot:run
    
    

Para confirmar a versão do Java instalada num terminal faça:

    
    java -version
    
    

Obs.: Caso tenha dúvidas em outros editores, lembre-se que o projeto que geramos foi feito com o Maven, neste caso a maioria das IDEs tem a opção de abrir como um "Maven Project"

Dentro de templates crie um diretório chamado compartilhado e dentro dele um arquivo chamado topo.html, será o arquivo onde colocaremos o cabeçalho, crie também um chamado baixo.html, que será o rodapé.

Obs.: No nosso projeto estamos utilizando nomenclaturas em português mas o padrão é encontrar esses nomes em inglês, como: shared, header.html e footer.html.

Você pode localizar o conteúdo da página através da classe container-fluid, e preservar este bloco, no nosso caso, tudo acima é o cabeçalho e abaixo deste bloco é o rodapé, informações que não mudarão de uma página para outra. Assim podemos separa-lás em arquivos e só importarmos quando precisar, além de manter o código estático centralizado facilitando a manutenção.

Note que no arquivo index.html sobrou apenas a div com o contúdo do meio da página, neste mesmo arquivo adicionaremos os arquivos em que separamos os códigos com o th:replace.

      
        <div th:replace="compartilhado/topo"></div>
        <!-- div com conteúdo -->
        <div th:replace="compartilhado/baixo"></div>
      
    

Agora reiniciamos a aplicação para vermos os resultados.