Thymeleaf + Spring Boot: placing html in subfolders - html

By default, Thymeleaf needs all the html files to be present in scr/main/java/resources/templates. In order not to create a mess in templates folder I need to create different subloders there. The problem is that html files placed there never get resolved. Example is below.
Structure:
IndexController:
#Controller
public class IndexController {
#GetMapping(value = "/")
public String index() {
return "index";
}
}
default template:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<title>Default template</title>
</head>
<body>
<section id="site-content" layout:fragment="content"></section>
</body>
</html>
index:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<meta charset="UTF-8"/>
<title>Index</title>
</head>
<body>
<div layout:fragment="content">
<div>
This is index page
</div>
Page
</div>
</body>
</html>
page in the subfolder:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<meta charset="UTF-8">
<title>Page</title>
</head>
<body>
<div layout:fragment="content">
This is a page in the subfolder
</div>
</body>
</html>
When I open index page and click the link to the page.html, I get this:
What I did wrong?

You have no controller mapping for /subfolder/page.html, this is not how Thymeleaf and Spring work.
You can't easily reference plain HTML files, as they aren't technically stored there. You have to reference an endpoint defined within Spring which will then select the HTML file to be rendered, like so:
#Controller
public class IndexController {
#GetMapping(value = "/subfolder/page")
public String index() {
return "subfolder/page";
}
}
and create your link like this:
Page

Related

Why All my Local html files URLs redirect me to one URL

Good Evening everyOne, i'm trying to make a web app using Spring boot and Thymeleaf. my problem is that all the redirect links in my index html file send me to one link which is my Login.html file.
this is my cotroller :
#Controller
public class HomeController {
#RequestMapping("/")
public String index() {
return "index";
}
#RequestMapping("/login")
public String login() {
return "login";
}
#RequestMapping("/signuo")
public String signup() {
return "signup";
}
}
Login and SignUp page. (they are not complete, its just a test)
<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>SignUp</title>
</head>
<body>
<h1>This is the SignUp page</h1>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h1>This is the Login page</h1>
</body>
</html>
the index page is so long : i'm gonna give you the important parts
"Stuuuf here ... "
<a th:href="#{/index.html}" class="nav-brand"><img src="img/core-img/agri_en_logo.png" alt="" /></a>
.....
<ul class="dropdown">
<li><a th:href="#{/index}">Acceuil</a></li>
<li>Onca</li>
<li>ONICL</li>
<li>IAV</li>
</ul>
<ul><li><a th:href="#{/login}">S'inscrire</a></li></ul>
................
<div class="header-add-area">
<a th:href = "#{/signup}">
<button type="submit" class="btn newsbox-btn 100">S'authentifier</button>
</a>
this is the hierarchy of my project :
hierarchy of my project
if you need something else add it in comments, if you need also my hole project i can send it to you in private.
Thanks in advance

Spring Boot:How to display image from system directory in spring boot application?

I am working with spring boot I want to display image from my system directory in html page but i cannot do that.
Any can help me please.
This is my html code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img alt="no image" src="D:\images\fav-icon">
</body>
I tried the following code also but it is not working
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img alt="no data" th:src="#{D:\images\1r-product-6.jpg}">
</body>
</html>
You need to add configuration like this:
#Configuration
public class WebMvcConfig implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/images/**")
.addResourceLocations("file:resources/","file:uploads/","file:/your-image-path")
.setCachePeriod(0);
}
}
add your image path in addResourceLocations.
**If you are Windows user then add path like this: "file:D:\\imagepath\")

Including value from another class in thymeleaf view page

I am new to thymeleaf and have to convert all my jsp files to thymeleaf.Well i have a external class file as given below:
Info.java
public class Info{
public String filePath="http://localhost:8080/myapp/cssfolder";
}
and now that i would like to include it in my thymeleaf css file such that
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link href="${filePath}/StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body> ... </body>
</html>
i have also sent the value as a model map in my controller.Still i dont get the value of filepath in the link.It only displays link as "{$filePath}/StyleSheet.css" while running the page.Please somebody help me with this
You should do:
<link th:href="${filePath}/stylesheet.css" href="static_url" type="text/css" rel="stylesheet" />
Where static_url is the path in your HTML mockups.

Multimarkdown well configured header data

Hi I'm trying to get the top of my multimarkdown file to look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Test of markdown</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../main.css" />
</head>
I know how to add the following metatags:
Title: Test of markdown
CSS: ../main.css
Quotes language: english
which gives me :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test of markdown</title>
<link type="text/css" rel="stylesheet" href="../main.css"/>
</head>
But I'm not sure how to add the rest. Would appreciate any help. Thanks
I can't find any native markdown way to do this but you could run a little script across the generated HTML if you really feel you need to do this.
This is a simple Python 3 option that might get you started. This could be improved in many ways but wanted to keep it simple. An obvious idea would be to give it a folder and have it process every HTML file in the folder. But I hope this gives the idea.
Example code:
filepath = input('What is the full file path to the file? - ')
htmldoctype = ' '.join([
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"',
'"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
'\n'
])
htmlinfo = ('<html xmlns="http://www.w3.org/1999/xhtml">\n')
inlines = []
try:
with open(filepath, mode='r', encoding='utf-8') as infile:
for line in infile:
if line.strip() == '<!DOCTYPE html>':
inlines.append(htmldoctype)
elif line.strip() == '<html>':
inlines.append(htmlinfo)
else:
inlines.append(line)
except Exception:
print('something went wrong in get')
try:
with open(filepath, mode='w', encoding='utf-8') as outfile:
for line in inlines:
outfile.write(line)
except Exception:
print('something went wrong in write')
Input:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test of markdown</title>
<link type="text/css" rel="stylesheet" href="../main.css"/>
</head>
<body>
test
</body>
</html>
Output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Test of markdown</title>
<link type="text/css" rel="stylesheet" href="../main.css"/>
</head>
<body>
test
</body>
</html>

problem loading values to my extjs grid using json

I am loading the values coming from database via a json object using java struts,
but the values are not populating in my extjs grid: I keep getting an empty grid.
I have included my code below.
home.jsp
A button will be there on this page. On clicking the getvalues.jsp should come.
In getvalues.jsp an extgrid should be presen with the content coming from database
<%# page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="getvalues.do">
<input type="submit"></input>
</form>
</body>
</html>
Below is my Java code. I am populating a JSON object with the values from my database.
public class Json extends Action {
#Override
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
// TODO Auto-generated method stub
ArrayList<Employee> emp=new ArrayList<Employee>();
Myservice serve=new Myservice();
emp=serve.getemployeesservice();
Iterator<Employee> empitr=emp.iterator();
JSONArray json=new JSONArray();
JSONObject JSONobj=new JSONObject();
while(empitr.hasNext()){
JSONObject jobj=new JSONObject();
Employee empl=new Employee();
empl=empitr.next();
jobj.put("empid",empl.getEmpid());
jobj.put("empname",empl.getEmpname());
json.add(jobj);
}
JSONobj.put("employee",json);
System.out.println(JSONobj.toString());
return mapping.findForward("success");
}
}
getvalues.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var store=new Ext.data.JsonStore({
proxy:new Ext.data.HttpProxy({
url:'http://localhost:8080/JsonExample/getvalues.do'
}),
reader:new Ext.data.JsonReader({
root:'employee',
fields:['empid','empname']
})
});
store.load();
var recs=store.getRange();
alert(recs.length);
var grid = new Ext.grid.GridPanel({
title:'employee information',
columns: [{
header:"employeeid",
width:100,
dataIndex:'empid',
sortable:true
},{
header:"employeename",
width:100,
dataIndex:'empname',
sortable:true
}],
store: store,
width:300,
height:300,
renderTo:Ext.getBody()
});
});
</script>
</head>
<body>
hi
</body>
</html>
But the values are not being populated for some reason. Please help me solve this issue.
Thanks in advance!
I'm not good at Java. But, I suspect, your JSON list is not sent to client, you are just printing, but not including it in response.