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>
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'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'>
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.
I am trying to link CSS file in my velocity file but for some reason is not working properly.
Any ideas?
CSS filename:custom.css
velocity file snip code:
<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
<head>
<title>GreenZap</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="/greenTheme-theme/docroot/css/custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/arial.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>
</head>
On the other hand I get the words "javascript" and "href" underlined with error line. Nut later on int he code "href" is not underlined anymore.
Any help will be appreciated!
Thanks in advance!
EDIT:
I am using liferay 6.1 with Tomcat 7 and Liferay SDK for Eclipse. I am trying to integrate a website template to a liferay theme created with the SDK.
You need not have to link the css file to velocity.
Just follow these steps -
Im assuming that you have created theme and inside it you have copied the images,js,templates folder inside themes _diff folder .
Now inside your _diff/css/main.css
just copy these lines of code - #import url(custom.css);
HTH
Try without the docroot in the path:
<link href="/greenTheme-theme/css/custom.css" rel="stylesheet" type="text/css" />
you can use another way. Create file common.vm with content:
.error-message {
color: red;
}
In file container.vm, use:
#include("common.vm")