1

I am working on a spring MVC project in which I am trying to use css style sheets by referencing it to design my JSP page. But somehow my css files are not being picked up once I hit my method in the controller..

Below is my JSP file -

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>

<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>

</body>
</html>

And below is my test.css file -

h1 {color:red;}
h2 {color:blue;}
p {color:green;}    

And below is my method in controller class -

@RequestMapping(value = "testing", method = RequestMethod.GET)
public Map<String, String> testing() {

    final Map<String, String> model = new LinkedHashMap<String, String>();

    return model;
}

Directory structure is like this -

webapp/
|-- resources/
|   +-- css/
|           test.css
+- WEB-INF/
  +-- views/
        testing.jsp

But somehow it's not working for me.. Is there anything wrong I am doing here?

UPDATE:-

Here is my web.xml file-

<?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_3_0.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>testweb</display-name>
  <listener>
    <listener-class>com.host.webres.resource.env.EbayResourceRuntimeListener</listener-class>
  </listener>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>index</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>appServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/spring/context.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>appServlet</servlet-name>
    <url-pattern>/testweb/*</url-pattern>
  </servlet-mapping>
</web-app>

And below is my context.xml file -

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:task="http://www.springframework.org/schema/task"
    xsi:schemaLocation="
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.1.xsd
        http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-3.1.xsd">

    <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->

    <!--  Allow proxys -->
    <aop:aspectj-autoproxy />

    <!-- Enables the Spring MVC @Controller programming model -->
    <mvc:annotation-driven>
            <mvc:message-converters>
              <!--  Support AJAX processing with progressive rendering. Overrides HttpOutputMessage with RaptorResponseWriter -->
            <beans:bean class="com.host.terr.kernel.filter.RaptorJacksonHttpMessageConverter"/>                 
            </mvc:message-converters>
    </mvc:annotation-driven>

    <context:component-scan base-package="com.host.terr.config" />
    <context:component-scan base-package="com.host.personalization.bullseye.zookeeper.p13nzook.controller" />       

    <!-- Handles HTTP GET requests by efficiently serving up static resources 
         in the corresponding directory -->
    <resources mapping="/js/**" location="/js/" />
    <resources mapping="/css/**" location="/css/" />

    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>
</beans:beans>

This is exception I am getting on my console but browser shows the data without any css -

404 /testweb/test.css Not Found /testweb/test.css Not Found }, Correlations : {} }

5 Answers5

1

In your servlet-context.xml file,you have setting about your directory of resources.In your case,with changing

<resources mapping="/resources/**" location="/resources/"/>

and in your jsp page like below,

<link rel="stylesheet" type="text/css" href="
      <c:url value="/resources/css/test.css"/> "/>

I hope it will work

  • I just need to modify the jsp page to include the path of css as you have mentioned? That's all? –  Mar 11 '14 at 00:50
  • This is exception I am getting - `/testweb/%3Cc:url%20value= Not Found /testweb/%3Cc:url%20value= Not Found` after trying this. –  Mar 11 '14 at 00:53
  • I updated my question with servlet-context.xml file. –  Mar 11 '14 at 00:55
0

You need to provide the context path.

 <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/test.css" />

What does this expression language ${pageContext.request.contextPath} exactly do in JSP EL?

Community
  • 1
  • 1
Chinmay
  • 4,726
  • 6
  • 29
  • 36
0

You need to set <base/> as following...

<c:set var="req" value="${pageContext.request}" />

<c:set var="url"> ${req.requestURL} </c:set>
<c:set var="uri" value="${req.requestURI}" />

<head>
    <title></title>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />

Then You can Import any JS or CSS like below..

<script src="assets/js/angular/angular.js"></script>
Chinthaka Dinadasa
  • 3,332
  • 2
  • 28
  • 33
0

Maybe by adding your .css file in a specific folder inside the WEB-Content then, you could use the attribute href = "yourFolder/yourFile.css Indeed all "web" ressources like the view should be there (i.e. jsp, css.). You can also precise that your link (in the .jsp file) is a stylesheet one by adding: rel="stylesheet"

you will have a link looking like this :

swiftBoy
  • 35,607
  • 26
  • 136
  • 135
Max Alonzo
  • 45
  • 5
-2

this css resource issue

please try below

 <link rel="stylesheet" type="text/css" href="css/test.css" />

and you can see this resource if be load by bowaser.

Game Over
  • 6
  • 6