I am using thymeleaf with springboot, all the links which I mention with a local url are not working. I even checked the network tab on the browser and all css and js resources load correctly but somehow have no effect.Here is some of the code:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header">
<title>Fullstack app skeleton</title>
<!-- Bootstrap core CSS -->
<link th:href="#{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
rel="stylesheet"></link>
<!-- Custom styles for this template -->
<link type="text/css" th:href="#{/css/styles.css}" rel="stylesheet">
</link>
</head>
<div th:fragment="before-body-scripts">
<script th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}">
</script>
<script th:src="#{/js/fullstackapp.js}"></script>
</div>
</html>
Also, I have checked pom.xml and all dependencies have been loaded correctly. In above code in when I mention the absolute url (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css) then all the bootstrap features work, but when I use the reference to the local jar it doesn't. Can someone suggest a possible reason???
I am using one .java file to mapping Bootstrap and Jquery
#Configuration
public class MvcConfig implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/bootstrap/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/4.0.0/");
registry.addResourceHandler("/resources/jquery/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/jquery/3.0.0/");
}
}
Here is my html code:
<link th:href="#{/resources/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<script th:src="#{/resources/jquery/jquery.min.js}"></script>
<script th:src="#{/resources/bootstrap/js/bootstrap.js}"></script>
Hope to that help you
Related
I build a war application with spring boot it is working fine when I run in my local machine. But when I try to dockerize it is not loading external bootstrap, CSS and js files.
application.properties
# App config
spring.mvc.view.prefix: /WEB-INF/jsp/
spring.mvc.view.suffix: .jsp
jsp file
<link rel="stylesheet" href="${source}/bootstrap.min.css">
<link rel="icon" href="${LOGO}" type="image/png" sizes="16x16">
<script type="text/javascript" src= "${source}/jquery.min.js"></script>
<script type="text/javascript" src= "${source}/bootstrap.min.js"></script>
inside controller
#Controller
public class RsvpHomeController {
#RequestMapping(value = {"/","home"})
public ModelAndView home()
{ ModelAndView mv = new ModelAndView("profile");
mv.addObject("source","links");
}
}
I just put all of my external files in the static folder and changed JSP file to
<link rel="stylesheet" href="/bootstrap.min.css">
<link rel="icon" href="${LOGO}" type="image/png" sizes="16x16">
<script type="text/javascript" src= "/jquery.min.js"></script>
<script type="text/javascript" src= "/bootstrap.min.js"></script>
My project structure:
resoureces
static
css
js
templates
a.html
b.html
My application.yml:
resources:
static-locations: classpath:/
And my html code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta content="webkit" name="renderer">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="shortcut icon" href="static/img/favicon.ico" />
<script src="static/js/jquery-3.2.1.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-confirm.min.js"></script>
<link href="static/css/reset.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/pretty.css" rel="stylesheet">
<link href="static/css/iconfont.css" rel="stylesheet">
<link href="static/css/common.css" rel="stylesheet">
<link href="static/css/jquery-confirm.min.css" rel="stylesheet">
</head>
<body>
<p>test</p>
</body>
My controller:
#Controller
public class IndexController {
#GetMapping("/index")
public String toIndex(){
return "index";
}
#GetMapping("/index/test")
public String test(){
return "index";
}
}
/index css and js success
but /index/test idea show no mapping for it
What is the correct configuration?
HTML How to link CSS and JS?
The issue is that you're using relative paths, such as static/css/reset.css.
Your browser will handle these by using the current path, and append the relative one.
Assuming that you're running your application on port 8080, when you call http://localhost:8080/index, the resources will be fetched from http://localhost:8080/static/css/reset.css. However, when you're calling /index/test, the relative path would refer to http://localhost:8080/index/static/css/reset.css.
That means that due to you using relative paths, it will fetch the resources from a different location if your path is different.
One possible solution is to use a <base /> tag within the <head> section of your HTML, such as:
<base href="/" />
By setting the <base /> tag, you're telling your browser where to relatively fetch resources from.
More detailed information can be found within this question.
Also, be aware that by default, Spring boot will serve resources within src/main/resources/static on the context path itself, so might have to drop the static/ part from the URLs, such as:
<link href="css/reset.css" rel="stylesheet">
I'm trying to understand how use Thymeleaf, I have a structure like this:
I have a default.html that work like the most general page, I put there some inclusion like general css, bootstrap and so on.. The I replace using th:replace the footer and a navbar. I use this page as base line for all the other pages.
My problem is: how can I use this page for all the other pages?
For example if I have 2 pages, page A and B and both of them need bootstrap, the app's css and so on, I don't want write the code to include them twice, but only once. So to do that I think I have to put page A inside default.html if I want show A and B in the other case.
At least, I done in this way using JSP.
How can I do it? Is it possible using Thymeleaf?
I tried to do somenthig like that but id doesn't work
DEFAULT.HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title th:text="#{application_name}"></title>
<link rel="icon" type="image/x-icon" th:href="#{/static/favicon.ico}"/>
<script th:src="#{/webjars/jquery/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="#{/webjars/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="#{/css/mio.css}"/>
<link rel="stylesheet" th:href="#{/webjars/font-awesome/css/font-awesome.min.css}"/>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<div class="container">
<div layout:fragment="content">
<p>Your page content goes here</p>
</div>
</div>
<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>
It is totally possible!
We have some steps to do it with Thymeleaf:
Configurations:
1 - Include the thymeleaf layout dialect into your project:
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.1.2</version>
</dependency>
2 - I do not know how is your webConfig, but with Spring, we have to add this configuration to template engine:
#Bean
public TemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setEnableSpringELCompiler(true);
//your templateResolver
engine.setTemplateResolver(templateResolver());
//here it is!
engine.addDialect(new LayoutDialect());
return engine;
}
The default html:
<!DOCTYPE html>
<html lang="pt-BR"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
<!-- Necessary to thymeleaf layout dialect-->
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<link rel="stylesheet" type="text/css" th:href="#{/layout/stylesheets/vendors/bootstrap.css}" />
</head>
<body>
<header>your Heder here</header>
<!--Here what you want, it gonna find the other html that contains "maincode"-->
<section layout:fragment="maincode"></section>
<footer>yourFooter</footer>
<script th:src="#{/javascript/vendors/jquery-2.2.4.min.js}"></script>
<script th:src="#{/layout/javascripts/bootstrap.min.js}"></script>
<th:block layout:fragment="javascript-extra"></th:block>
</body>
</html>
The other html:
<!DOCTYPE html>
<html lang="pt" xmlns="http://w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
<!--Tell who is the default html-->
layout:decorate="layout/defaultHtml">
<body>
<section layout:fragment="maincode">
bla bla bla
</section>
</body>
</html>
Any question, just ask!
I'm seeing an issue where I can see the bound 'test' value appear on the demo page on Chrome but not in Firefox. I'm already including the polyfills (webcomponents-lite.js) so I'm really not sure what's missing. Any ideas?? Thank you in advance.
ticket-item demo page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ticket-item demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../ticket-item.html">
<script>
window.addEventListener('WebComponentsReady', function() {
let element = document.getElementById('ticket-item');
element.test = 'test';
});
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic ticket-item demo</h3>
<demo-snippet>
<template>
<ticket-item id="ticket-item"></ticket-item>
</template>
</demo-snippet>
</div>
</body>
</html>
ticket-item element
<dom-module id="ticket-item">
<template>
<style include="my-theme">
:host {
display: block;
}
</style>
<div>test: [[test]]</div>
</template>
<script>
class TicketItem extends Polymer.Element {
static get is() { return 'TicketItem'; }
static get properties() {
return {
test: String
};
}
}
window.customElements.define(TicketItem.is, TicketItem);
</script>
</dom-module>
The first thing:
Custom element names. By specification, the custom element's name must start with a lower-case ASCII letter and must contain a dash (-). There's also a short list of prohibited element names that match existing names. For details, see the Custom elements core concepts section in the HTML specification.
So, you must change the name of "item" element.
Instead of loading the webcomponents-lite.js directly, load webcomponents-loader.js (a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection), that will do the rest.
Plnkr link: works both in Firefox and Chrome.
The problem was that I named my component 'ticket-item' and the id was set to 'ticket-item'. It apparently needs to be something different from 'ticket-item'. I change the id to 'item' and now I'm seeing the binding.
I use springboot + thymeleaf, it can find the template pages, but could not find the static (css or js).
application.yml :
spring:
application:
name: exe-springboot
thymeleaf:
suffix: .html
resources:
static-locations: /static/**
and the controller :
#RequestMapping("/index")
public String index() {
return "index";
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<link rel="stylesheet" href="../static/index.css"/>
</head>
<body>
<h2>test page</h2>
<span class="test-span">hello world with css</span>
</body>
</html>
index.css
.test-span{
font-size: 20px;
color: red;
}
and browser: http://localhost:8080/index
the except color of hello world with css should be red, but not. and the console, with chrome, shows 404 http://localhost:8080/static/index.css
Try to access the resources in your static directory like this :
<link rel="stylesheet" th:href="#{index.css}"/>
When you are using thymeleaf do not forget "th:" and also you do not have to write the whole path to the resource you want. Spring is looking at static directory so you can access the index.css like in my example.
Also a good practise maybe is to put your css, js, fonts and images in to different folders in your static directory. For example create a folder CSS and put the index.css in it and access it in your HTML like :
<link rel="stylesheet" th:href="#{/css/index.css}"/>
EDIT:
Now the problems is not in the loading of the resources from your static folder. As you can see you are getting a status code 200 that means that the index.css is loaded to your HTML.
So I can suggest you better replace your tag with :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">