I've written simpliest page using bootstrap. Now i want to run in using spring and gradle. I have added dependency
compile group: 'org.webjars', name: 'bootstrap', version: '3.2.0'
into my build.gradle file. The only think i can't solve is what should i put in simplePage.html to force thymeleaf to resolve it. I wonder how to add
<link href="../../../../../../../Documents/js/first/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../../../../../../Documents/js/first/js/bootstrap.min.js"></script>
using external libraries added with Gradle. These imports above i used to make bootstrap project locally.
From Webjars documentation for Sping Boot :
Instructions for Spring Boot
[...]
Then reference a WebJar asset like:
<link rel='stylesheet' href='/webjars/bootstrap/3.1.0/css/bootstrap.min.css'>
Related
I have a Spring boot web application, it works fine when running as executable jar, but when I build as war and deploy to Tomcat, the css, js files are not loading and looking into further, I found out all links are pointing to root context path "/", I tried changing base href = "./" this fixed the problem of loading css and js, but I need to do that in lot of pages.
Also the links in <a> still points to root context path and to make this work I need prefix'./' . Below are my code snips,
CSS and JS link
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/signin.css" rel="stylesheet">
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Tag
<a class="topHeader" href="/activateAccount"></a>
Is there a shortcut to fix this problem or should I change <base href> and <a href> in all the pages? Any help is highly appreciated.
There is no short cut or quick fix for this, I removed "/" in links in all anchor tags and that worked for me.
Example
<a href="/resetPassword" style="float: right;">
changed to
<a href="resetPassword" style="float: right;">
I have been searching all day, moved the style.css everywhere and still not managed to get it loaded. The images wont load as well.
My structure:
But if i click the firefox button, it loads:
This is how the style.css is imported in the head of the index:
(tried all kind of combinations)
When i check the developer tools, it says 404 for GET request (style.css and the pictures)
Spring Boot knows where the static directory is, so you don't need to use the ../ technique to get to the files within. The other part is that you should be using an annotation to get there. It may depend on what view template you are using, but for thymeleaf this is how you would achieve pulling in the css file:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Your Title</title>
<link rel="stylesheet" th:href="#{/css/style.css}" />
</head>
Notice the annotation in th:href="#{/css/style.css}"
Make sure you include the namespace of your view template, th in the example.
Images work the same way:
<img th:src="#{/img/stanev2.png}" />
I'm working on a project in Spring MVC. I would like to connect CSS and js under it. However, for some reason, spring can not see these files. In the previous project which was configured using XML and everything worked fine. Any suggestion would be helpful.
Project Structure
<script type="text/javascript" src='<spring:url value="/resources/js/script.js"/>'></script>
<link href='<spring:url value="/resources/css/style.css"/>' rel="stylesheet" />
Configuration:
public void addResourceHandlers(final ResourceHandlerRegistry registry){
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
}
Move the resource folder under webapp folder. And with this line you can connect your css file.
<link rel="stylesheet" href="/css/styles.css">
Similarly write code to connect script like
<script type="text/javascript" src="/js/script.js"></script>
I'm trying to implement the versioning when serving static resources with Spring MVC. I need to force the clients reload the resources when a new version of the application is deployed.
I've followed the spring official guide here and I cannot let it work with the mvc:resources, but it works in the JSP pages.
Here my configuration in springMVC-servlet.xml:
<mvc:resources mapping="/style-#{applicationProps['version']}/**" location="/style" />
...
<util:properties id="applicationProps" location="/WEB-INF/conf/application.properties"/>
and this is the part of the jsp that is working:
<spring:eval expression="#applicationProps['version']" var="applicationVersion"/>
<link rel="stylesheet" type="text/css" href="/style-${applicationVersion}/style-common.css">
and finally this is the page source in the browser:
<link rel="stylesheet" type="text/css" href="/style-2.1-SNAPSHOT/style-common.css">
The problem is that this file is not mapped. When I click on it it says: resource not found...
Any idea how to proceed, debug, understand the issue?
Many thanks!
Replace
<mvc:resources mapping="/style-#{applicationProps['version']}/**" location="/style" />
By
<mvc:resources mapping="/style-#{applicationProps['version']}/**" location="/style-#{applicationProps['version']}/" />
Resource location attribute should be complete folder name.
I am trying to experiment with Polymer in my scala project with Play framework. I followed the getting started at https://www.polymer-project.org/docs/start/creatingelements.html. In my index.scala.html I have included my-element.html and trying to access my-element. I am not seeing my contents in element as expected. Any suggestions about if what I am trying to do is feasible. Thank you in advance
On Mac, created a play-java app in IntelliJ.
Installed latest play framework 2.3.7 from https://www.playframework.com/download.
Extracted zip file and ran the activator command activator new to create new project
Opened Intellij IDEA and imported the new project
Ran project by activator run
Code attached below...
octo-element.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="octo-element" noscript>
<template>
<span>Hello from <b>octo-element</b>. This is my Shadow DOM.</span>
</template>
</polymer-element>
index.scala.html
#(message: String)
#main("Welcome to Play") {
#message
<octo-element></octo-element>
}
main.scala.html
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/hello.js")" type="text/javascript"></script>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import" href="../../bower_components/elements/octo-element.html">
</head>
<body>
#content
</body>
</html>
Application.java
package controllers;
import play.mvc.Controller;
import play.mvc.Result;
import views.html.index;
public class Application extends Controller {
public static Result index() {
return ok(index.render("Your new application is ready."));
}
}
The polymer components (html and java scripts) should be created under assets. The assets route is defined in routes configuration.