To learn a little more about Spring Boot
I created a small project. Data persistence works, but I'm having problems with Dialect
of Thymeleaf
. I know how to configure Maven
, but I can not make it work in Gradle
. Can someone help me? Right away, thank you!
Dependencies of Gradle
:
buildscript {
ext {
springBootVersion = '2.0.5.RELEASE'
}
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'
group = 'com.libraryfriendsapp'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
repositories {
mavenCentral()
}
dependencies { //Tentei configura com a informações do Maven Central.
implementation('org.springframework.boot:spring-boot-starter-data-jpa')
implementation('org.springframework.boot:spring-boot-starter-thymeleaf:3.0.9.REALEASE')
implementation('org.springframework.boot:spring-boot-starter-web')
runtimeOnly('org.springframework.boot:spring-boot-devtools')
runtimeOnly('mysql:mysql-connector-java')
implementation('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0')
testImplementation('org.springframework.boot:spring-boot-starter-test')
}
The code I made for layout.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="../static/css/custom.css" rel="stylesheet" >
<title>The Library Friends</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" th:href="@{/}">
<img th:src="@{/img/TheLibraryFriends.png}" src="../static/img/TheLibraryFriends.png"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" th:href="@{/}">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/sobrenos}">Sobre Nós</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/regras}">Regras</a>
</li>
</ul>
<span class="navbar-text">
Somos amigos que leêm!
</span>
</div>
</nav>
<div class="container">
<h1 layout:fragment="header">Cabeçalho falso</h1>
<div layout:fragment="content">Content falso</div>
</div>
</div>
<!-- Bootsrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Visually looks like this:
Theindex.html
pagethatshouldimplementlayout.html
:
<!DOCTYPEhtml><htmlxmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<h1 layout:fragment="header"> Library Friends!
<small>Como vai funcionar?</small>
</h1>
</body>
</html>
It was supposed to look like layout.html, but it looks like this:
Myfolderstructureforthisproject: