I am trying to use Thymleafe and Bootstrap in SpringBoot application.
However, I could not understand why SpringBoot is not picking up Bootstrap.
When I am running my project it's just showing plain-old HTML and not picking Bootstrap.
pom.xml
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.0.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1" />
<title>Home</title>
<script type="text/javascript" src="webjars/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>Please Login</h2>
<form th:action="#{/users/login}" method="POST">
<div class="form-group">
<label for="email">Email:</label> <input type="email"
class="form-control" id="username" placeholder="Enter email"
name="username"></input>
</div>
<div class="form-group">
<label for="pwd">Password:</label> <input type="password"
class="form-control" id="password" placeholder="Enter password"
name="password"></input>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Can anyone please help what I am missing?
If your application is not running in the root context path or if the page is not served at the root path then your script and stylesheet references will not work because they are document-relative.
Consider building the URLs with Theamleaf's URL functionality, like this:
<link rel="stylesheet" th:href="#{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" />
Same for the <script> elements. Use th:src attribute there.
See here for more info:
http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls
Related
Page "bookUpdate.html" does not work correctly because of the errors. I can open this page from page "bookList.html" via click to button "Edit". On all other pages bootstrap work correctly. I try to add to code something like "link rel="stylesheet" type="text/css" th:href="#{/webjars/bootstrap/css/bootstrap.min.css}" " but it did not work.
bookUpdate.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
layout:decorate="~{fragments/main_layout}">
<body>
<div layout:fragment="content" class="container mySpace">
<form th:action="#{/bookUpdate/__${book.id}__}" th:object="${book.id}"
method="post">
<div class="form-group">
<label for="topic" class="form-control-label">Topic</label> <input
type="text" class="form-control" th:field="${book.topic}"
id="topic" />
</div>
<div class="form-group">
<label for="description" class="form-control-label">Description</label>
<textarea class="form-control" th:field="${book.description}"
id="description" style="height: 95px"></textarea>
</div>
<div class="form-group">
<label for="link" class="form-control-label">Link</label> <input
type="text" class="form-control" th:field="${book.link}" id="link" />
</div>
<input type="submit" value="Submit" class="btn btn-primary" />
</form>
</div>
</body>
</html>
SUGGESTION: Try changing "href" to "src":
https://stackoverflow.com/a/52435193/421195
ALSO: be sure to look at the other responses in the same thread.
I hope that helps ... and please post back what you find!
I resolved my issue. I added a links to bootstrap from file "main_layout.html", that I use for header, and added before them <base href="/">. Now it is working fine.
<head>
<base href="/">
<link rel="stylesheet" href="../../static/css/style.css"
th:href="#{css/style.css}" />
<link rel="stylesheet" href="../../static/css/materia/bootstrap.min.css"
th:href="#{css/materia/bootstrap.min.css}" />
<script type="text/javascript" th:src="#{scripts/jquery-3.2.1.min.js}"></script>
</head>
Could somebody, please, help with Thymeleaf? I need to create a template layout and I've got stuck with <div th:fragment="content"></div>. The point is layout:fragment doesn't replace code on the dashboard page. By the way, other processors like layout:decorate or th:replace works well. I'm using Intellij IDEA with Spring 2.5.4.
My template structure
#dashboard.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{admin/share/template.html}">
<head>
<title>Admin dashboard</title>
</head>
<body>
<div layout:fragment="content">
<h1>Admin Dashboard</h1>
</div>
</body>
</html>
#template.html
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<style th:replace="~{admin/share/style}"></style>
</head>
<body>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<div th:replace="/admin/share/header"></div>
<div class="app-main">
<div th:replace="/admin/share/sidebar"></div>
<div class="app-main__outer">
<div class="app-main__inner">
<div th:fragment="content">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
<div th:replace="/admin/share/js"></div>
</div>
</body>
</html>
#pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>3.0.0</version>
</dependency>
#Thymeleaf.class
#Configuration
public class Thymeleaf {
#Bean
public LayoutDialect layoutDialect() {
return new LayoutDialect();
}
}
Result of Dashboard page
UPDATE:
The issue is solved. Just need to use layout:fragment instead of th:fragment =)
Just need to use layout:fragment instead of th:fragment =)
I have a Spring Boot Web MVC application where I'm using a Bootstrap 4 template and Thymeleaf as view.
I'm facing a problem where a drop-down navigation item is rendering without styles and scripts when the containing page is mapped in the controller under more than one path segment. If the path consists only of one segment the component works as intended.
Page containing the component "menu.html"
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Menu</title>
<!-- Custom fonts for this template -->
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/sb-admin-2.min.css" rel="stylesheet">
<!-- Custom styles for this page -->
<link href="/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<ul class="navbar-nav ml-auto">
<!-- Drop-Down Component -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${user.getName()}"></span>
<img class="img-profile rounded-circle" src="img/undraw_profile.svg" width="50" height="50">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="logoutModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="/login?logout=true">Logout</a>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/datatables-demo.js"></script>
</body>
</html>
Using the following mapping in my controller the component works fine:
#GetMapping(value = "/first-segment")
public String showModal(Model model) {
model.addAttribute("user", userService.getAuthenticatedUser());
return "menu";
}
But if I add a second segment no styling is displayed and the component can't be clicked on:
#GetMapping(value = "/first-segment/second-segment")
public String showModal(Model model) {
model.addAttribute("user", userService.getAuthenticatedUser());
return "menu";
}
Note
I'd also like to add that not all Bootstrap components don't render correctly under two path segments. As far as I've noticed only drop-down and modal components share this issue.
Replace:
<script src="vendor/jquery/jquery.min.js"></script>
with:
<script src="/vendor/jquery/jquery.min.js"></script>
Note the extra slash at the start. Otherwise, the Javascript file is supposed to be relative to the current file. That is why it worked for the first segment, but not the second segment.
By starting with a slash, it is always relative to the root of the path.
I'm using Spring-boot and thymeleaf and I'm trying to create a registration page but I can't seem to get to register.html from my login page
From the controller I have the following
#Controller
public class LoginController {
private final UserService userService;
#Autowired
public LoginController(UserService userService) {
this.userService = userService;
}
#RequestMapping(value = {"/login"}, method = {GET})
public ModelAndView login() {
return new ModelAndView("/login");
}
#RequestMapping(value = "/register", method = GET)
public ModelAndView register() {
System.out.println("register");
return new ModelAndView("register").addObject(new User());
}
For my login page I have this and it renders properly without an issue
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Log in</title>
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<link rel="stylesheet"
href="../static/style/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet"
href="../static/style/font-awesome/font-awesome.min.css"/>
<link rel="stylesheet" href="../static/style/ionicons/ionicons.min.css"/>
<link rel="stylesheet" href="../static/style/adminlte/AdminLTE.min.css"/>
<link rel="stylesheet" href="../static/style/skins/skin-yellow.css"/>
<link rel="stylesheet" href="../static/style/custom.css"/>
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<b>Login</b>
</div>
<div class="login-box-body">
<p class="login-box-msg">Sign in</p>
<form th:action="#{/login}" method="post">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email"
name="username"> <span
class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password"
name="password"> <span
class="fa fa-pencil form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<div class="col-md-4"></div>
<div class="col-md-8">
<button type="submit" class="btn btn-primary btn-block btn-flat"
style="margin-bottom: 10px;">Sign In
</button>
</div>
</div>
<br>
<p class="mb-0">
<a th:href="#{/register}">Sign Up</a>
</p>
<p class="mb-0">
<a th:href="#{/forgotPassword}">I forgot my password</a><br>
</p>
</form>
</div>
<div th:if="${param.error != null}">
<div id="error">
<div class="box-body">
<div class="alert alert-danger alert-dismissible">
<button type="submit" class="close" data-dismiss="alert"
aria-hidden="true">×
</button>
<h4>
<i class="icon fa fa-ban"></i>Login Failed!
</h4>
You have entered incorrect credentials please try again
</div>
</div>
</div>
</div>
</div>
<script src="../static/js/jquery/jquery.min.js"></script>
<script src="../static/js/bootstrap/bootstrap.min.js"></script>
<script src="../static/js/adminlte/adminlte.min.js"></script>
</body>
</html>
As I said, it's working fine
For my register page I have this
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Registration Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="../static/style/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet"
href="../static/style/font-awesome/font-awesome.min.css"/>
<link rel="stylesheet" href="../static/style/ionicons/ionicons.min.css"/>
<link rel="stylesheet" href="../static/style/adminlte/AdminLTE.min.css"/>
<link rel="stylesheet" href="../static/style/skins/skin-yellow.css"/>
<link rel="stylesheet" href="../static/style/custom.css"/>
</head>
<body class="hold-transition register-page">
<div class="register-box">
<div class="register-logo">
<b>Registration</b>
</div>
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Register a new membership</p>
<form th:object="user" method="get">
<p>Show something</p>
</form>
</div>
</div>
</div>
<script src="../static/js/jquery/jquery.min.js"></script>
<script src="../static/js/bootstrap/bootstrap.min.js"></script>
<script src="../static/js/adminlte/adminlte.min.js"></script>
</body>
</html>
But when I click on <a th:href="#{/register}">Sign Up</a> in my login page, it seems that the page only refreshes and isn't going to the register page, as you can see I tried printing something in the register() method of the LoginContoller but even this isn't printing which tells me my method is never hit, on closer inspection in the browser devtools, I saw that the register page is returning a 302 status as seen in the picture
I tried using a String return type in the controller but that doesn't work either.
I also tried to get the page without any objects being sent to it but that doesn't work.
How do I fix this?
I found the problem, in my SecurityConfig I referenced the wrong page name
.antMatchers(
"/static/**",
"/forgot/*",
"/actuator/*",
"/register")//this was wrong
As my Spring MVC web app is using
Servlet version: 3.0
JSP version: 2.1
Java version: 1.7.0_11
and Had deployed war on OpenShift Tomcat 7 (JBossEWS 2.0 ) using above version ,it always giving me error :
org.apache.jasper.JasperException: Unable to compile class for JSP
java.util.NoSuchElementException
java.util.ArrayList$Itr.next(ArrayList.java:834)
and i tried using version JSP 2.0 and Servlet 2.5..still no use.
Any Help?
Login.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
</head>
<body>
<section id="page">
<!-- HEADER -->
<header>
<!-- NAV-BAR -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div id="logo">
</div>
</div>
</div>
</div>
<!--/NAV-BAR -->
</header>
<!--/HEADER -->
<!-- LOGIN -->
<section id="login" class="visible">
<div class="container">
<div class="row">
<c:if test="${not empty error}">
<div class="errorblock" style="text-align:center;">
<b style="text-align:center;">Your login attempt was not successful, try again.</b>
</div>
</c:if>
<div class="col-md-4 col-md-offset-4">
<div class="login-box-plain divide-40">
<form:form method="post" action="authenticate" modelAttribute="userInfo">
<div class="form-group">
<label for="exampleInputEmail1">User Name</label>
<i class="fa fa-user"></i>
<form:input path="loginID" id="username" placeholder="" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<i class="fa fa-lock"></i>
<form:password class="form-control" path="password" id="password" placeholder=""/>
</div>
<div>
<button type="submit" class="btn btn-danger">Login</button>
</div>
</form:form>
</div>
</div>
</div>
</div>
</section>
<!--/LOGIN -->
</section>
You can find the version of the libraries that tomcat 7 is using by sshing into your application and running the following command:
ls ~/jbossews/lib
Which will output the following:
ls ~/jbossews/lib/
annotations-api-7.0.54.jar
el-api-7.0.54.jar
servlet-api.jar
tomcat-i18n-ja-7.0.54.jar
annotations-api.jar
el-api.jar
tomcat7-websocket-7.0.54.jar
tomcat-i18n-ja.jar
catalina-7.0.54.jar
extras
tomcat7-websocket.jar
tomcat-jdbc-7.0.54.jar
catalina-ant-7.0.54.jar
jasper-7.0.54.jar
tomcat-api-7.0.54.jar
tomcat-jdbc.jar
catalina-ant.jar
jasper-el-7.0.54.jar
tomcat-api.jar
tomcat-util-7.0.54.jar
catalina.jar
jasper-el.jar
tomcat-coyote-7.0.54.jar
tomcat-util.jar
commons-collections-eap6.jar
jasper.jar
tomcat-coyote.jar
websocket-api-7.0.54.jar
commons-dbcp-eap6.jar
jasper-jdt.jar
tomcat-i18n-es-7.0.54.jar
websocket-api.jar
commons-loggin
g-adapters-eap6.jar
jsp-api-7.0.54.jar
tomcat-i18n-es.jar
commons-logging-api-eap6.jar
jsp-api.jar
tomcat-i18n-fr-7.0.54.jar
commons-pool-eap6.jar
servlet-api-7.0.54.jar
tomcat-i18n-fr.jar