Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 5: Criando Layout com Thymeleaf.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 5: Criando Layout com Thymeleaf.

Nessa parte do nosso tutorial vamos criar a página de layout que vamos usar como base para todas as páginas do nosso sistema, o conceito dessa página vai funcionar como se fosse um Facelets do JSF.

Páginas do tutorial.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 1: Introdução.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 2: Criando os objetos do banco de dados.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 3: Montando o projeto com Spring Boot.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 4: Configurando o Spring Security.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 5: Criando Layout com Thymeleaf.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 6: Criando o cadastro de usuário.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 7: Criando a consulta de usuário.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 8: Excluindo um usuário cadastrado.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 9: Editando um usuário cadastrado.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 10: Testando os acessos do sistema.

Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 11: Executando a aplicação sem o Tomcat Embedded.

Montando página de layout com Thymeleaf e Material Designer Lite.

Primeiro vamos criar um diretório com o nome de base dentro da pasta templates
(src/main/resources/templates)
, depois vamos criar um arquivo html com o nome de layout.html, depois do arquivo criado vamos deixar ele com o código abaixo.

Esse código vai montar um menu na parte superior e na lateral esquerda da nossa aplicação, também vamos ter um fragment que vai ser a parte onde a nossa página vai se encaixar, esse fragment está definido na linha 74.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Blog www.ciceroednilson.com.br"/>
	<meta name="author" content="Cícero Ednilson"/>
 
    <title>blog Cícero Ednilson</title>
 
    <link  rel="stylesheet" th:href="@{/css/material.min.css}"/>
    <link  rel="stylesheet" th:href="@{/css/sistema.css}"/>
 
    <script type="text/javascript" th:src="@{/js/material.min.js}"></script>
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
 
</head>
<body>
 
<!-- FORM QUE VAI SER USADO PARA REALIZAR O LOGOUT -->
<form th:action="@{/logout}" id="form_logou"	th:method="post">
<input type="hidden"	th:name="${_csrf.parameterName}"	th:value="${_csrf.token}"/>
</form>
 
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 
  <!-- header->MONTA O MENU SUPERIOR -->  
  <header class="mdl-layout__header">   	   	
    <div class="mdl-layout__header-row">
 
      <a class="mdl-navigation__link" th:href="@{/home}">    
      	<span class="mdl-layout-title">Cícero Ednilson</span>
	  </a>          
 
      <div class="mdl-layout-spacer"></div>      
      <nav class="mdl-navigation mdl-layout--large-screen-only">
 
      	<!-- REDIRECIONA PARA A HOME PAGE -->
      	<a class="mdl-navigation__link" th:href="@{/home}">Home</a>
 
      	 <!-- REDIRECIONA PARA A PÁGINA DE CADASTRO -->
        <a class="mdl-navigation__link" th:href="@{/usuario/novoCadastro}">Cadastro</a>
 
        <!-- REDIRECIONA PARA A PÁGINA DE CONSULTA -->
        <a class="mdl-navigation__link" th:href="@{/usuario/consultar}">Consulta</a>
 
        <!-- SAI DA APLICAÇÃO E VOLTA PARA A PÁGINA DE LOGIN -->
        <a class="mdl-navigation__link" href="#" onclick="document.getElementById('form_logou').submit();">Logout</a>        
      </nav>
    </div>
  </header>
 
  <!-- MONTA O MENU LATERAL -->
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">MENU</span>
    <nav class="mdl-navigation">
      <!-- REDIRECIONA PARA A HOME PAGE -->
      <a class="mdl-navigation__link" th:href="@{/home}">Home</a>
      <!-- REDIRECIONA PARA A PÁGINA DE CADASTRO -->
      <a class="mdl-navigation__link" th:href="@{/usuario/novoCadastro}">Cadastro</a>
      <!-- REDIRECIONA PARA A PÁGINA DE CONSULTA -->
      <a class="mdl-navigation__link" th:href="@{/usuario/consultar}">Consulta</a>
       <!-- SAI DA APLICAÇÃO E VOLTA PARA A PÁGINA DE LOGIN -->     
      <a class="mdl-navigation__link" href="#" onclick="document.getElementById('form_logou').submit();">Logout</a>      
    </nav>
  </div>
 
  <!-- PARTE QUE VAI SER SUBSTITUÍDA PELO CONTEUDO DAS PÁGINAS -->
  <main class="mdl-layout__content mdl-color--blue-grey-100">
    <div class="page-content">
 
    	 <!-- CONTEUDO A SER SUBSTITUÍDO -->
    	  <div layout:fragment="content">Essa parte vai ser substituída </div>
    </div>
  </main>
</div>
 
</body>
</html>

No código da nossa página layout.html podemos ver na tag html os namespaces do Thymeleaf(http://www.thymeleaf.org e http://www.ultraq.net.nz/web/thymeleaf/layout), quando adicionamos esses namespaces podemos usar os atributos oferecidos por ele nas nossas tags html, se você quer entender mais sobre o Thymeleaf pode acessar a documentação aqui.

No código que criamos na página layout.html podemos ver que os th:href já estão com os valores de request informado, nas próximas partes do tutorial vamos criar um controller com as request que estão sendo informadas aqui.

Criando a página inicial do sistema.

Agora vamos criar a página inicial do nosso sistema, no diretório templates vamos criar um arquivo html com o nome de home.html e adicionar o código abaixo, essa página tem apenas um texto simples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
	  layout:decorator="base/layout">
<head>
    <title>Home Page</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Blog www.ciceroednilson.com.br"/>
	<meta name="author" content="Cícero Ednilson"/>        
</head>
<body>
<section layout:fragment="content">
 
    <!-- MONTANDO O GRID PARA POSICIONAR O FORMULÁRIO NO CENTRO -->   
   <div class="mdl-grid">   
    <div class="mdl-layout-spacer"></div>    
    <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--4dp mdl-color--white">    	
    	<h4>&nbsp;Sistema de Cadastro de Usuários&nbsp;</h4>    	
	</section>	
    <div class="mdl-layout-spacer"></div>
</div>
 
</section>
 
</body>
</html>

Criando a página de acesso negado.

Agora vamos criar a página acessoNegado.html na pasta templates, essa página vai ser exibida quando o usuário não tiver permissão de acesso a uma determinada função do sistema, depois de criar o arquivo vamos adicionar o código abaixo, essa página tem apenas uma mensagem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
	  layout:decorator="base/layout">
<head>
    <title>Acesso Negado</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Blog www.ciceroednilson.com.br"/>
	<meta name="author" content="Cícero Ednilson"/>
</head>
<body>
<section layout:fragment="content">
 
    <!-- MONTANDO O GRID PARA POSICIONAR O FORMULÁRIO NO CENTRO -->   
   <div class="mdl-grid">   
    <div class="mdl-layout-spacer"></div>    
    <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--4dp mdl-color--white">
 
    	<h4>&nbsp;Você não tem acesso a essa funcionalidade do sistema!!!&nbsp;</h4>
 
	</section>	
    <div class="mdl-layout-spacer"></div>
</div>
 
</section>
 
</body>
</html>

Abaixo podemos ver os arquivos que criamos no nosso projeto.

Criando as requests para a página inicial e para a página de acesso negado.

Agora vamos abrir o nosso MainController que fica no pacote br.com.ciceroednilson.webapp.controller e vamos adicionar o método home e acessoNegado como mostra o código abaixo.

O Método home vai ser invocado pela classe WebSecurityConfig quando o usuário tiver realizado a autenticação com sucesso, e o método acessoNegado vai ser executado toda vez que o usuário tentar realizar uma request que ele não tenha permissão, essa configuração também está na classe WebSecurityConfig.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package br.com.ciceroednilson.webapp.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
@Controller
public class MainController {
 
	/***
	 * ESSE MÉTODO CARREGA A PÁGINA(index.html) DE LOGIN DA NOSSA APLICAÇÃO
	 * @return
	 */
	@RequestMapping(value="/", method= RequestMethod.GET)	
	public String index(){	
 
	    return "index";
	}
 
	/***
	 * CARREGA À PÁGINA INICIAL DA APLICAÇÃO APÓS EFETUARMOS O LOGIN 
	 * @return
	 */
	@RequestMapping(value="/home", method= RequestMethod.GET)
	public String home(){
 
		return "home";
	}
 
	/***
	 * MOSTRA UM PÁGINA COM A MENSAGEM DE ACESSO NEGADO QUANDO O 
	 * USUÁRIO NÃO TIVER PERMISSÃO DE ACESSAR UMA DETERMINADA FUNÇÃO DO SISTEMA
	 * @return
	 */
	@RequestMapping(value="/acessoNegado", method= RequestMethod.GET)
	public String acessoNegado(){
 
		return "acessoNegado";
	}
 
}

Testando a página inicial da nossa aplicação.

Vamos executar a nossa aplicação e efetuar o login com o usuário abaixo.

Usuário: cicero
Senha: 123456

Atenção: Esse usuário foi cadastrado na parte do tutorial que usamos parar criar os objetos do banco de dados.

Depois de efetuar o login podemos ver a página inicial da nossa aplicação como mostra a imagem abaixo.

Pronto, temos a nossa página inicial criada, na próxima parte do nosso tutorial vamos criar o controller e página de cadastro de usuários, até a próxima.

Comentários

Name of author

Name: ciceroednilson@gmail.com

2 thoughts on “Criando uma aplicação Web com Spring Boot, Thymeleaf, Material Designer Lite e Oracle – Parte 5: Criando Layout com Thymeleaf.

  • Você pode ajudar neste erro?

    could not extract ResultSet; SQL [n/a]; nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet

    Obrigado!

    A única coisa que minha aplicação está diferente do seu tutorial é o jar de conexão com o oracle.
    Eu o coloquei na mão com a tag systemPath

    Reply
    • ciceroednilson@gmail.com Post author

      Desculpa a demora em responder Adauto,

      Você adicionou o arquivo .jar ao classpath da sua aplicação?

      Abraços,
      Cícero Ednilson

      Reply

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *