somehow my CSS-file is not included into my thymeleaf-template.
First of all I need to explain the workflow:
User clicks on form-Submit to send a POST to /historyDetails/{history_id}
Some data will be fetched from database using the history_id
The data will be rendered on history-detail-view.html
This is my DispatcherServlet:
#Configuration
#EnableWebMvc
#ComponentScan("*")
public class DispatcherServlet extends WebMvcConfigurerAdapter {
#Autowired
private WebApplicationContext ctx;
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
/*
* resolve path to static ressources (images, stylesheets, javascript-files)
*/
registry.addResourceHandler("img/**").addResourceLocations("/WEB-INF/static/img/");
registry.addResourceHandler("css/**").addResourceLocations("/WEB-INF/static/css/");
registry.addResourceHandler("js/**").addResourceLocations("/WEB-INF/static/js/");
}
#Bean
public ThymeleafViewResolver getViewResolver() {
ThymeleafViewResolver vr = new ThymeleafViewResolver();
vr.setTemplateEngine(getTemplateEngine());
return vr;
}
#Bean
public SpringTemplateEngine getTemplateEngine() {
SpringTemplateEngine te = new SpringTemplateEngine();
te.setTemplateResolver(getTemplateResolver());
te.setEnableSpringELCompiler(true);
return te;
}
#Bean
public SpringResourceTemplateResolver getTemplateResolver() {
SpringResourceTemplateResolver tr = new SpringResourceTemplateResolver();
tr.setApplicationContext(ctx);
tr.setOrder(1);
/*
* resolve path to html to WEB-INF/<name>.html
*
* name can be something like templates/xxx.html
*/
tr.setPrefix("WEB-INF/");
tr.setSuffix(".html");
return tr;
}
}
My projectstructure (from root-directory):
This is the htistory-detail-view.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
type="text/css"
th:href="#{css/style.css}"/>
<script type="text/javascript"
th:src="#{https://code.jquery.com/jquery-3.4.1.min.js}"></script>
<script type="text/javascript"
th:src="#{js/utilities.js}"></script>
</head>
<body>
<div th:replace="fragments/grid :: grid(${grid}, 'HISTORY_DETAIL')"></div>
<div th:replace="fragments/paging :: paging(${grid})"></div>
</body>
<div th:replace="fragments/general :: footer"></div>
</html>
While the index.html is rendered with css, the history-detail-view.html is not but rather plain html.
The only errormessage, which I took from the network-tab in firefox is:
Loading failed for the <script> with source “http://localhost:9080/MyProject/historyDetails/js/utilities.js”.
The reason why I put the DispatcherServlet into this thread is becouse it is responsible for resolving the paths to the static ressources. When comparing the path from the projectstructure with the path in the errormessage, the DispatcherServlet doesn't seem to work properly but I don't know how to make it resolve the correct path.
The only difference I see here is the Pathvariable.
EDIT: I'm providing my index.html, since it is working properly here:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
type="text/css"
th:href="#{css/style.css}"/>
<script type="text/javascript"
th:src="#{https://code.jquery.com/jquery-3.4.1.min.js}"></script>
<script type="text/javascript"
th:src="#{js/utilities.js}"></script>
</head>
<body>
<div th:replace="fragments/grid :: grid(${grid}, 'HISTORY')"></div>
<div th:replace="fragments/paging :: paging(${grid})"></div>
</body>
<div th:replace="fragments/general :: footer"></div>
</html>
The issue might be because of the spring security configuration if any. Add the path to your CSS static files as an exception in the spring security configuration.
If you are not using spring security or that you have provided the exception, make sure you have followed the standard folder structure.
Go through this link for more details.
Related
So I have the following controller that maps to the same ThymeLeaf template:
#GetMapping(value="/nextStep/{id}")
public String nextStep(#PathVariable int id) {
return "nextStep";
}
#GetMapping(value="/xxx")
public String nextStep() {
return "nextStep";
}
If I navigate to /xxx, the page has my css applied. If I navigate to /nextStep/10 the template displays but there is no css applied.
The template is simple:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" href="my.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
Hello world<br>
</body>
</html>
There are no exceptions thrown in this example.
I think i have the same problem, all pages load with css all right. but if i access localhost:8080/group/3 the page will come without css (even the pages was in the same directory).
#GetMapping(value = "/group/{id}")
I found a shortcut to avoid this issue:
#GetMapping(value = "/group-{id}")
In my case this works fine, i hope work on your too.
you need put CSS path like this
<link rel="stylesheet" type="text/css" th:href="#{/css/my.css}"/>
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\")
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
This probably a very simple question, but I can't figure it out alone. I have the following controller:
#RestController
public class TestController extends AbstractCloudController {
private final EquipmentRepository equipmentRepository;
#Autowired
TestController(EquipmentRepository er) {
equipmentRepository = er;
}
#RequestMapping(method=RequestMethod.GET) void index() {
List<String> codes = equipmentRepository.findAllEquipments();
String output = "";
for (String code : codes) {
output += "ID "+code+"\n";
}
}
}
And the following index.html:
<!doctype html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet"
href="./bower_components/bootstrap-css-only/css/bootstrap.min.css" />
</head>
<body ng-app="testApp">
<div class="outer">
<h1>Hello World!</h1>
<div class="container">
<div ng-controller="TestController" ng-cloak="ng-cloak">
<p>This is a test page</p>
</div>
</div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/hello.js"></script>
</div>
</body>
</html>
How do I get the information from the controller to the server side without it overriding the html? When I make the controller return something, it ends up overwriting the html and printing only the equipment code instead instead of the "Hello World", even the page title doesn't show.
I don't know what do you returned in your controller, but you may check this document: http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-ann-return-types
If you want to print the content of output, you may add it to a Model
#RequestMapping(method=RequestMethod.GET, Model model) void index() {
List<String> codes = equipmentRepository.findAllEquipments();
String output = "";
for (String code : codes) {
output += "ID "+code+"\n";
}
model.addAttribute("output", output);
}
then use JSP Expression Language to get the content
${output}
PS. Spring will treat a returned string as view name, not html content by default.
Forgive me for this beginner question. I am trying to implement d3 on a HTML page, which is displayed in a JScrollPane in a Swing project. Am following the tutorial # http://alignedleft.com/tutorials/d3/adding-elements.
As I type code, I do not see template proposals after every dot. Would not like to run it on a temp server at the moment. The new paragraph that's supposedly generated when I run the application does not appear.
Does that mean that my source link to d3 is implemented wrongly & hence no template proposals? Is there any way to determine if elements from the DOM are selected correctly? Elements not embedded within the script is shown correctly however. Please advise.
Code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>D3 test</title>
<script type = "text / javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type = "text / javascript" src="d3.js">
d3.select("body").append("p").text("New paragraph!!!");
</script>
</body>
</html>
the other class:
jfxpanel = new JFXPanel();
Platform.runLater(new Runnable() {
#Override
public void run() {
try {
WebView browser = new WebView();
WebEngine engine = browser.getEngine();
//String url = "http://www.hotmail.com";
File f = new File ("src/d3/index.html"); //display local html, instead of external webpage
System.out.println("current directory: " + f.getAbsolutePath());
String url = f.toURI().toURL().toString();
engine.load(url);
Scene scene = new Scene(browser);
jfxpanel.setScene(scene);
}
catch (Exception e){
while (e != null) {
e.printStackTrace();
}
}
}
});
spVisual = new JScrollPane(jfxpanel);
//spVisual.setEnabled(false);
spVisual.setViewportBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null));
spVisual.setSize(800, 420);
spVisual.setLocation(100, 140);
spVisual.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED);
//spVisual.setVerticalScrollBarPolicy(javax.swing.ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED);
spVisual.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_AS_NEEDED);
SwingUtilities.invokeLater(new Runnable() {
public void run() {
spVisual.getViewport().setViewPosition(new java.awt.Point(0, 0));
}
});
add (spVisual);
Don't know anything about embedding html in swing but I do know that, using src and inline javascript on the same tag is not a good idea.
Also that TEST is within a <script> tag, so it'll be executed as javascript and it's not valid.
Finally, you assuming d3 is loading, your selector, append and text are fine.
Perhaps try:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>D3 test</title>
<script src="d3/d3.v3.js"></script>
</head>
<body>
<script>
d3.select("body").append("p").text("New paragraph!!!");
</script>
TEST
</body>
</html>