Link/ include css in FreeMarker using Spring 3 MVC - spring-mvc

I am currently trying to include a css file in my FreeMarker *.ftl. I also have configured a resource folder in my servlet config xml file.
<mvc:resources mapping="/resources/**" location="/resources/" />
But how can I access my css file from my FreeMarker template?
I simply tried the following but without success.
<link href="/resources/css/style.css" rel="stylesheet" type="text/css" />
The resource folder lies in the root of my spring MVC 3.0 application.
/web
/resources
/img
/css
/WEB-INF
/templates
My Servlet root is defined as:
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/web/*</url-pattern>
</servlet-mapping>
My FreeMarker files are lying in the templates folder.

I have found two solutions. One with spring macros and one without in my FreeMarker file.
The simplest way is to use it without macros:
<link rel="stylesheet" type="text/css"
href="/springmvc/resources/css/style.css" />
In this solution I have to define the complete path.
By using spring macros you have to lay your spring.ftl into your template directory and include it in each FreeMarker template where you like to use it.
<#import "spring.ftl" as spring />
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css"
href="<#spring.url '/resources/css/style.css'/>"/>
...
The spring macros can also be used for other things this blog gives a good overview.

You can try this,
<link rel="stylesheet" type="text/css" href="<c:url value="/"/>resources/css/style.css" />
At run time this code will return exact path.

Related

jsp file is not reflecting the styles in bootstrap

I have jsp file and trying to load bootstrap.min.css there, both files(jsp and bootstrap) are in the same directory which is webapp and this is the code that I use to link jsp and bootstrap.css together.
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
But the jsp is not reflecting any style that the bootstrap contain and this is the problem that I got.
Resource interpreted as Stylesheet but transferred with MIME type text/html
The problem solved when I changed the code in the web.xml
<servlet-mapping>
<servlet-name>hotel-deals</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
to
<servlet-mapping>
<servlet-name>hotel-deals</servlet-name>
<url-pattern>/hotel</url-pattern>
</servlet-mapping>

Tomcat + Spring MVC: CSS and Javascript are not loaded in SSL setting

I am using Tomcat (6.0.26) and Spring MVC for a website on Windows 7. I would like to test whether it works on SSL for certain pages or directories.
I have a self-assigned SSL certificate (file: .keystore) in C:\Users\Me with the default password "changeit".
In my Spring's security context, I have the following:
<http auto-config="false" use-expressions="true" request-matcher="regex" >
....
<intercept-url pattern="^\/login$" requires-channel="https" />
<port-mappings>
<port-mapping http="8080" https="8443"/>
</port-mappings>
</http>
When I click http://localhost:8080/login, I am redirected to https://localhost:8443/login, which works as I hoped for. However, only SOME, not all, css files get loaded and NONE of my javascript files get loaded. All my css and javascript files are local.
Here is how I have for css files in JSP:
<link rel="stylesheet" href="/css/styles.css" />
I have this in Spring context for CSS and JS files
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/js/**" location="/js/" />
Here is how I have for javascript files and what is shown in Firebug:
<script src="/js/my.js"></script>
this leads to Status being "302 Moved Temporarily". no file content is loaded
<script src="//js/my.js"></script>
this leads to Status being "Aborted"
What went wrong? How to fix it? Thanks!
(1) Add this to your web.xml
<servlet-mapping>
<servlet-name>main</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
(2) add <mvc:annotation-driven /> to your context
(3) try path as /yourApp/css/*.css

unable to get external css working in a dynamic web project spring

Am currently working on a spring mvc project on Eclipse. Am unable to get an external css working in a .jsp . My folder structure is as follows
Myproj, WebContent,
WEB-INF,
css,
.css files
I use the following piece of code to reference the css file.
<link href="<c:url value="/css/filename.css" />" rel="stylesheet" type="text/css" />
I use spring jars version 3.1.0. I have also added the following lines of code within myproj-servlet.xml
<mvc:annotation-driven />
<mvc:resources location="../css/" mapping="/css/**"/>
Still am unable to access my css file or get it apply to my jsp file. While using firebug i see that the css link gets a 404 not found only. Where could be the issue/ how can i resolve?
Change your resource location to
<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
and while accessing on jsp you could very well write
<c:set var="context" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css" href="${context}/css/style.css" />
Cheers.

Spring mvc 3.2 and extjs 4.1.3 : do I have to define mvc:resources mapping for al requestMapping path?

I have a problem using spring mvc 3 and extjs 4 or more precisely a problem of path when exjs try to load my controllers or my images.
The structure of my webapp is like this :
src
-- webapp
-- app
-- extjs4.1.3
-- css
-- icons
-- WEB-INF
-- jsp
app.js
I have a controller annoted like this
#RequestMapping(value = "/path/init.do", method = RequestMethod.GET)
It return a view name that match a jsp in my WEB-INF/jsp folder. This jsp load extjs files.
ViewResolver :
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />
web.xml :
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>tiana Web Application</display-name>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:/spring/application-context.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>spring</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
Because my url pattern is "/", I had to make use of the mvc:resources magic tag available since spring 3.0.5 (approximatively) like this :
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/app/**" location="/app/" />
<mvc:resources mapping="/extjs-4.1.3/**" location="/extjs-4.1.3/" />
<mvc:resources mapping="/app.js" location="/app.js" />
I know it could be better if I place all those things in a resources folder. I would have to write only :
<mvc:resources mapping="/resources/**" location="/resources/" />
But I don't think it'll solve my problem
My jsp file is like this :
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My jsp title</title>
<link rel="stylesheet" type="text/css" href='<c:url value="/extjs-4.1.3/resources/css/ext-all.css" />'>
<link rel="stylesheet" type="text/css" href='<c:url value="/css/myStyle.css" />'>
<script type="text/javascript" src='<c:url value="/extjs-4.1.3/ext-all-debug.js" />'></script>
<script type="text/javascript" src="<c:url value="/app.js" />"></script>
</head>
<body></body>
</html>
First of all I had to write the references to my resources files using jstl tags.
Without those tags, if I keep url like /myresource.xxx, the url will be
localhost:8080/myresource.xxx
And if I write myresource.xxx without the slash, it is
localhost:8080/mywebapp/path/myresource.xxx
But it works like this, any suggestion would be appreciated to skip the jstl dependency but it works.
My real problem is that my app.js will load extjs's controllers and for that it uses some kind of 'window.location' to construct the url. In my case, it will be
localhost:8080/mywebapp/path/app/controller/myController.js
but i'd like it to be
localhost:8080/mywebapp/app/controller/myController.js
I face the same kind of problem if I put an icon in my extjs files, the url will be
localhost:8080/mywebapp/path/icons/myIcon.png
and not
localhost:8080/mywebapp/icons/myIcon.png as expected.
I can solve this by adding
<mvc:resources mapping="/path/app/**" location="/app" />
<mvc:resources mapping="/path/icons/**" location="/icons" />
But I can believe that each time I define a new requestMapping in a Spring mvc controller, "path2" for example, I'll have to define a corresponding mvc:resources mapping.
I tried to define a global "baseUrl" javascript variable in my jsp file, prefixing the appFolder by this variable in the app.js file and prefixing all icons and things used in extjs code by this variable but it's not either acceptable.
What have I missed ? I googled a lot and I came to this "/" url-pattern and mvc:resources method (which seems very clean for spring mvc webapp) but I cannot solve my "uri" problem (I don't know how the path generated by the requestMapping is called in real english).
Thank you so much if you can help me and if not, thank you for your time
You can try to put all of your resources (i'm not sure which of your contents is a static resource) in:
-- webapp
--resources
-- app
-- extjs4.1.3
-- css
-- icons
-- WEB-INF
-- jsp
app.js
then you define a single mapping:
<mvc:resources mapping="/resources/**" location="/resources/" />
at this point you'll access the css folder for example using:
<c:url value="/resources/css/myStyle.css" />
and any other of your paths in the same way or you can try by using (but not tested):
<mvc:resources mapping="/**" location="/resources/" />
and i suppose you'll access your css folder:
<c:url value="/css/myStyle.css" />

How and where CSS in XHTML file of Dynamic Web Project Eclipse

I'm trying to link css file to xhtml page in several ways but nothing what I did want to work.
Here is folders structure of project:
Project
Java serources
WebContent
**index.xhtml**
META-INF
WEB-INF
style
**style.css**
Now in index.xhtml file I have:
<link rel="stylesheet" href="style/style.css" />
Can someone tell me what I do wrong?
Add resources folder under the WebContent
and inside resources create css folder
then access the files like this
<h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" />
Here's a tutorial Resources (library) in JSF 2.0
Put your link tag as I mention below:
<link href="style/style.css" rel="stylesheet" type="text/css"/>

Resources